AngularJS的基本使用

Posted 2020-08-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS的基本使用相关的知识，希望对你有一定的参考价值。

理解下面的图，可以让我们更好的理解ng

技术分享

1.基本使用

 1 /*
 2     ng-app: ng边界，告诉ng要去管理下面的东西
 3     ng-init: 给我模型赋初始值
 4     ng-model: 双向数据绑定指令，将当前元素的value属性和name建立绑定
 5     {{user.name}}: innerhtml属性和模型属性绑定
 6     ng-controller: 指定一个控制器
 7     $scope: 上下文模型，view和controller的桥梁，用于它们之间传递数据，利用$scope暴露数据模型
 8 */
 9 <body ng-app“myApp” ng-controller="myAppController">
10     <p>
11         <input type="text" placeholder="请输入你的姓名：" ng-model="user.name">
12     </p>
13     <p>你的名字是：{{user.name}}</p>
14 
15 
16 <script src="../bower_components/angular/angular.js"></script>
17 <script type="text/javascript">
18 
19     /**
20     * 注册Angular模块
21     * 第一个参数：模块名称
22     * 第二个参数：模块对象，没有就传空
23     */
24     var app = angular.module(‘myApp‘, []);
25     //创建控制器,这个控制器属于myApp
26     //控制器函数，$scope： 模型对象
27     app.controller(‘myAppController‘, function($scope){
28         $scope.user = {};
29         $scope.user.name = "张三";
30         $scope.show = function(){
31 
32 
33         }
34     });
35 
36     //由于压缩代码会改变参数名称，所以标准方式是传递数组
37     app.controller(‘myAppController‘, [‘$scope‘, function($scope){
38         $scope.user = {};
39         $scope.user.name = "张三";
40         $scope.show = function(){
41 
42 
43         }
44     }]);
45 </script>
46 </body>

2.控制器的职责

技术分享

 1 <html lang="en" ng-app="myApp">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5 
 6 </head>
 7 <body>
 8   <table border="1" ng-controller="demoController">
 9       <tr>
10           <td>用户名：</td>
11           <td><input type="text" ng-model="user.name"></td>
12       </tr>
13       <tr>
14           <td>密码：</td>
15           <td><input type="password" ng-model="user.password"></td>
16       </tr>
17       <tr>
18             <td></td>
19           <td><input type="button" value="登&nbsp录" ng-click="login()"></td>
20       </tr>
21   </table>
22 <script src="../bower_components/angular/angular.js"></script>
23 <script>
24     //创建一个模块
25     var app = angular.module(‘myApp‘, []);
26     app.controller(‘demoController‘, [‘$scope‘, function($scope){
27         //初始化对象
28         $scope.user = {
29             username: ‘‘,
30             password: ‘‘
31         };
32         //定义方法
33         $scope.login = function(){
34             console.log($scope.user);
35         };
36     }])
37 
38 </script>

3.$watch监视对象属性变化

技术分享

4.ng-cloak 处理页面出现{{}}的情况

1 /*ng-cloak: 在ng执行完毕后自动删除*/
2   [ng-cloak] {
3         display: none;
4    }
5 <div class="box" ng-app ng-cloak>
6        {{‘内容‘}}
7    </div>
8 或者
9 <div class="box" ng-app ng-bind=“username"></div>