前端开发工程师——AngularJS

时间:2024-06-01 11:22:51

一.表达式和语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- ng-app指令: 表示告诉angular它管理当前标签所包含的整个区域,并且会自动创建$rootScope跟作用域对象-->
    <!-- ng-model:表示当前输入框的值与谁关联(属性名:属性值) ,username表示属性名,{{username表示属性值}}他是表达式,获取属性值-->
    <input type="text" ng-model="username">
    <p>您输入的内容是:<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app ng-init="username='tom'">
    <!-- ng-init:用来初始化当前作用域变量 -->
    <!-- ng-model双向数据绑定 -->
    <input type="text" ng-model="username">
    <p>姓名1:<span>{{username}}</span></p><br/>
    <input type="text" ng-model="username">
    <p>姓名2:<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

作用域对象和控制器对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- 控制器对象 
        用来控制Angular应用数据的实例对象
        ng-controller:用来指定控制器构造函数,Angular会自动new此函数创建控制器对象
        同时还会创建一个新的作用域对象$scope,他是$rootScope的子对象
        在控制器函数中声明$scope形参,Angular会自动将$scope传入
    -->

    <div ng-controller="MyController">
        <input type="text" placeholder="姓" ng-model="firstname">
        <input type="text" placeholder="名" ng-model="lastname">
        <p>输入的姓名为:{{firstname + '-' + lastname}}</p>
        <p>输入的姓名2为:{{getName()}}</p>
    </div>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
    <script>
        function MyController($scope){
            console.log($scope);
            $scope.firstname = 'kobe';
            $scope.lastname = "tom";
            $scope.getName = function(){
                return $scope.firstname + '' + $scope.lastname;
            }
        }
    </script>
</body>
</html>