第218天：Angular---模块和控制器
1、使用NG实现双边数据绑定
所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中 ng-app是ng的入口，表示当前元素的所有指令都会被angular管理（对每一个指令进行分析和操作）
1 <body>
2 <div ng-app ng-init="user.name='world'">
3 <h1>使用NG实现双边数据绑定</h1>
4 <input type="text"
5 placeholder="请输入你的姓名"
6 ng-model="user.name">
7 <p>hello <strong>{{user.name}}</strong></p>
8 </div>
9 <script src="bower_components/angular/angular.js"></script>
10 </body>2、模块
1 <body>
2 <div ng-app="myApp" ng-controller="DemoController">
3 <h1>使用NG实现双边数据绑定</h1>
4 <input type="text" placeholder="请输入你的姓名" ng-model="user.name">
5 <p>hello <strong>{{user.name}}</strong></p>
6 <input type="button" ng-click="show()">
7 </div>
8 <script src="bower_components/angular/angular.js"></script>
9 <script>
10 // 注册模块 通过module函数，
11 // 第一个参数是这个模块的名字
12 // !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数，如果没有传递第二个参数，angular.module就不是创建一个模块
13 // angular.module 返回 刚刚创建的模块对象
14 var app= angular.module('myApp',[]);
15 // app.controller 方法用于创建一个控制器，所创建的控制器属于myApp模块
16 // app.controller('DemoCtrl');
17 // 控制器函数的参数中有一个$scope
18 // angular.module('myApp').controller('DemoController', function($scope) {
19 // // 当控制器执行时会自动执行的函数
20 // $scope.user = {};
21 // $scope.user.name = '张三';
22 // // $scope不仅仅可以往视图中暴露数据，还可以暴露行为
23 // $scope.show = function() {
24 // console.log($scope.user);
25 // };
26 // });
27 </script>
28 </body>3、控制器
1 <body ng-app="myModule" ng-controller="HelloController">
2 <script src="bower_components/angular/angular.js"></script>
3 <script>
4 // 由于控制器是必须出现在某个模块下的，想创建一个控制器必须先创建模块
5 var module = angular.module('myModule', []); // 返回的就是模块对象
6
7 // angular在执行控制器函数时，
8 // 会根据参数的名字（$scope）去自动的注入对象
9 // 根据参数名称传递对应对象，所以必须要写正确的参数名称
10 // module.controller('HelloController', function($scope) {
11 // console.log($scope);
12 // });
13 //
14 // 由于压缩代码会改变参数名称，注册控制的标准方式就是通过第二个参数传递数组的方式（数组的成员最后一个就是原本的控制器函数，前面的成员都是需要注入的对象名称）
15 module.controller('HelloController', ['$scope','$http', function(a,b) {
16 console.log(a);
17 }]);
18 </script>
19 </body>4、注册登录的实现
1 <!DOCTYPE html>
2 <html lang="en" ng-app="HelloApp">
3
4 <head>
5 <meta charset="utf-8">
6 </head>
7
8 <body>
9 <table border="1" ng-controller="WorldController">
10 <tr>
11 <td>用户名</td>
12 <td>
13 <input type="text" ng-model="user.username">
14 </td>
15 </tr>
16 <tr>
17 <td>密码</td>
18 <td>
19 <input type="password" ng-model="user.password">
20 </td>
21 </tr>
22 <tr>
23 <td></td>
24 <td>
25 <input type="button" ng-click="login()" value="登陆">
26 </td>
27 </tr>
28 <tr>
29 <td></td>
30 <td>{{message}}</td>
31 </tr>
32 </table>
33 <script src="bower_components/angular/angular.js"></script>
34 <script>
35 // 创建一个模块
36 var app = angular.module('HelloApp', []);
37 // 为这个模块创建一个控制器
38 app.controller('WorldController', ['$scope', function($scope) {
39
40 // 数据
41 $scope.user = {
42 username: '',
43 password: ''
44 };
45 $scope.demo = '';
46
47 // 行为数据
48 $scope.login = function() {
49 // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上
50 console.log($scope.user);
51 };
52
53
54 // 请输入用户名 输入格式不合法
55 $scope.message = '请输入用户名';
56 // $scope.message取决于$scope.user
57
58 // 官方的API中提供了一个$scope.$watch方法，
59 $scope.$watch('user.username', function(now, old) {
60 // 当user.username发生变化时触发这个函数
61 // console.log('now is ' + now);
62 // console.log('old is ' + old);
63 if (now) {
64 if (now.length < 7) {
65 $scope.message = '输入格式不合法';
66 } else {
67 $scope.message = '';
68 }
69 } else {
70 $scope.message = '请输入用户名';
71 }
72 });
73
74 // angular 基本不用操作DOM，如果必要，可以使用angular提供的jqlite
75 //
76 // angular.element('body')
77 }]);
78 </script>
79 </body>
80
81 </html>5、表达式（页面由表达式转为数据过程的隐藏）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Angular 表达式</title>
7 <style>
8 /* ng-cloak指令就是在NG执行完毕过后自动移除 */
9
10 [ng-cloak],
11 .ng-cloak {
12 display: none;
13 }
14 </style>
15 </head>
16
17 <body ng-app class="ng-cloak">
18 {{ true ? 'true':'false' }}
19 <script src="bower_components/angular/angular.js"></script>
20 </body>
21
22 </html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-04-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
