第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

Java设计模式学习笔记—单例模式(上)

文章最后“Java设计模式笔记示例代码整合”为本系列代码整合,所有代码均为个人手打并运行测试,不定期更新。本节内容位于其Singleton包(package)中...

602
来自专栏Java技术栈

Java高级篇——深入浅出Java类加载机制

类加载器 简单讲,类加载器ClassLoader的功能就是负责将class文件加载到jvm内存。 类加载器分类 从虚拟机层面讲分为两大类型的类加载器,一是Boo...

2667
来自专栏java学习

Java入门基础题目练习

《Java基础入门》课后习题 第1章 Java开发入门 一、填空题 1、Java的三大体系分别是______、_____、______。 2、Java...

3674
来自专栏C/C++基础

分离编译模式简介

示例代码编译运行环境:Windows 64bits+VS2017+Debug+Win32。

904
来自专栏草根专栏

用ASP.NET Core 2.0 建立规范的 REST API -- DELETE, UPDATE, PATCH 和 Log

本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblog...

1132
来自专栏自动化测试实战

flask第十篇——url_for【3】

2336
来自专栏北京马哥教育

从零构建一个简单的 Python 框架

范围 框架可以处理请求-响应周期、身份认证、数据库访问、模板生成等部分工作。Web 开发者使用框架是因为,大多数的 web 应用拥有大量相同的功能,而对每个项目...

3866
来自专栏Java帮帮-微信公众号-技术文章全总结

day27.MongoDB【Python教程】

集合:类似于关系数据库中的表,储存多个文档,结构不固定,如可以存储如下文档在一个集合中

1103
来自专栏吴伟祥

Linux下的shell简介(三) 原

        shell的本意是“壳”的意思,其实已经很形象地说明了shell在Linux系统中的作用。shell就是围绕在Linux内核之外的一个“壳”程序...

903
来自专栏醒者呆

你不想干我帮你——代理模式

关键字:设计模式,代理模式,proxy,保护代理,虚拟代理,远程代理,缓冲代理,智能引用代理 代理模式 代理模式:给某一个对象提供一个代理或占位符,并由...

3394

扫码关注云+社区

领取腾讯云代金券