AngularJS自整理

技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 body
 9     input type="text" ng-model="text"
10     h2{{text}}/h2
11 /body
12 /html

01初识

2.MVC-模块化

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6 /head
 7 !-- 添加了ng-app标签以内的所有内容都属于应用的一部分, --
 8 body
 9     !-- 一个页面上可以有多个ng-app,但是不能嵌套使用 --
10     div class="box" ng-app="App"
11         !-- 为视图指定控制器ng-controller --
12         ul ng-controller="DemoController"
13             li ng-repeat="list in lists"{{list}}/li
14         /ul
15     /div
16 
17     !-- 引入框架: --
18     script src="../angular.min.js"/script
19     script
20         // 引入angular后会提供一个全局对象:angular;在这个对象下有一个对应的方法[  module(‘模块名‘, 数组)  ]可以创建一个模块
21         var App=angular.module(App,[]);
22         // 模块的返回值也是对象,通过此对象方法[ controller(‘控制器名臣‘,数组固定格式[‘$scope‘,function($scope){}]) ]可以创建控制器
23         App.controller(DemoController,function($scope){
24             //定义好了控制器
25             // $scope就是 Model(数据模型),view是HTML
26             // $scope是一个空对象
27 
28             // 在对象中添加一个lists属性,属性值为一个数组
29             $scope.lists=[html,css,js,php];
30         });
31     /script
32 /body
33 /html

02MVC-模块化

3.模块化

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 body ng-app="Demo"
 9     !-- angulerJS是以模块进行管理的 --
10     table
11         thead
12             tr
13                 td姓名/td
14                 td性别/td
15                 td年龄/td
16             /tr
17         /thead
18         tbody ng-controller="StarsController"
19             tr  ng-repeat="star in stars"
20                 td{{star.name}}/td
21                 td{{star.sex}}/td
22                 td{{star.age}}/td
23             /tr
24         /tbody
25     /table
26     script
27         var Demo=angular.module(Demo,[]);
28         Demo.controller(StarsController,function($scope){
29             $scope.stars=[
30                 {name:小明,sex:,age:12},
31                 {name:小军,sex:,age:12},
32                 {name:小李,sex:,age:12}
33             ];
34         });
35     /script
36 /body
37 /html

模块化

4.内置指令

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7     style
 8         .red{
 9             color:red;
10         }
11         .blue{
12             color:blue;
13         }
14     /style
15 /head
16 body ng-app="Demo"
17     div class="box" ng-controller="DemoController" 
18         button ng-click="toggle()"请点击/button
19         h1 ng-show="show"Welcome/h1
20         h2 ng-hide="false"Welcome/h2
21         h3 ng-if="true"Welcome/h3
22         h4 ng-class="{red:true,blue:true}"Welcome/h4
23         h5 class="{{className}}"Welcome/h5
24         input type="text" ng-disabled="true"  value="禁用"
25         input type="text" ng-disabled="false"
26         br
27         input type="text" ng-readonly="true" value="只读"
28         input type="text" ng-readonly="false"
29         br
30         select name="" id=""
31             option value="0"aaa/option
32             option value="0" ng-selected="true"bbb/option
33             option value="0"ccc/option
34         /select
35         br
36         爱好: input type="checkbox" ng-checked="true" name="hobby"运动 input type="checkbox" ng-checked="false" name="hobby"睡觉
37         br
38         a ng-href="{{link}}"百度一下/a
39         br
40         img ng-src="{{path}}" alt="未找到图片"
41         br
42         ul
43             li ng-repeat="item in items" ng-switch on="item"span ng-switch-when="css"{{item}}/span/li
44         /ul
45     /div
46     script
47         /*
48         常用指令
49             ng-app    定义应用程序的根元素。
50             ng-controller    定义应用的控制器对象
51             ng-show    显示或隐藏 HTML 元素(频繁的显示和隐藏)
52             ng-hide    隐藏或显示 HTML 元素
53             ng-click    定义元素被点击时的行为
54             ng-if    如果条件为 false 移除 HTML 元素(DOM移除)
55             ng-src    指定 img 元素的 src 属性
56             ng-href    为 the a 元素指定链接
57             ng-class    指定 HTML 元素使用的 CSS 类
58             ng-include    在应用中包含 HTML 文件
59             ng-disabled    规定一个元素是否被禁用(修复原属性缺陷)
60             ng-readonly    指定元素的 readonly 属性(修复原属性缺陷)
61             ng-checked    规定元素是否被选中(修复原属性缺陷)
62             ng-selected    指定元素的 selected 属性
63 
64             ng-dblclick    规定双击事件的行为
65             ng-keydown    规定按下按键事件的行为
66             ng-keypress    规定按下按键事件的行为
67             ng-keyup    规定松开按键事件的行为
68             ng-blur        规定 blur 事件的行为(失去焦点)
69             ng-repeat    定义集合中每项数据的模板(实现循环取数据,对象数据迭代)
70             ng-switch    规定显示或隐藏子元素的条件 与 on ng-switch-when组合使用
71 
72         */
73         var Demo=angular.module(Demo,[]);
74         Demo.controller(DemoController,function($scope){
75             $scope.path="../img.jpg";
76             $scope.toggle=function(){
77                 $scope.show=!$scope.show;
78             };
79             $scope.link="http://www.baidu.com";
80             $scope.className=red;
81             $scope.items=[html,css,js];
82         });
83     /script
84 /body
85 /html

内置指令

5.自定义指令

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 body ng-app="Demo"
 9     tag/tag
10     p tag/p
11     div class="tag"/div
12     !-- directive:tag --  !-- 需要replace为true --
13     script
14         /*
15         自定义指令:有利于方法的扩展,通过模块实例对象的directive方法可以自定义指令(‘指令名字‘,函数)
16         */
17         var Demo=angular.module(Demo,[]);
18         Demo.directive(tag,function(){
19             //返回与指令相关的内容
20             return {
21                 restrict:EACM,//规定指令的类型:E(element) / A(attribute) / C(class) / M(mark)
22                 // 当有字符串定义模板时,必须确保整个字符串有一个根元素(即存在父子关系),否则会报错
23                 template:h1hello world!/h1,
24                 //templateUrl:‘header.html‘//引入外部文件,需要在服务器上使用,与上面的代码不能同时使用
25                 replace:true,//模板替换标签
26             };
27         });
28 
29     /script
30 /body
31 /html

自定义指令

6.数据绑定

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 !-- ng-init :初始化数据 ,写在访问外层--
 9 body ng-app="Demo" ng-init="sex=‘男‘; hobby=‘跑步‘" 
10     div ng-controller="DemoController"
11         !-- 单向数据绑定 --
12         h1 ng-cloak {{name}}/h1
13         h1 ng-bind="age"/h1
14         !-- 数据双向绑定 ng-model只能作用于表单元素--
15         input type="text" ng-model="demo"button  ng-click="say()"提示/button
16         br
17         span{{demo}}/span
18         !-- 多个数据绑定 --
19         h1 ng-bind-template="{{name}} {{age}}"/h1
20         h2{{sex}}/h2
21         h2{{hobby}}/h2
22     /div
23     script
24         // angularJS是以数据作为驱动的MVC框架所有模型里的数据经控制器展示到视图中
25         // ng-bind    绑定 HTML 元素到应用程序数据
26         //  {{}} 和 ng-bind实现绑定 ,{{}} 是 ng-bind 的简写
27         //使用{{}}会有闪烁显现(刷新时,网页加载原因),解决方案: 添加 ng-cloak (利用修改CSS属性值display)但是不能完全解决
28         var Demo=angular.module(Demo,[]);
29 
30         Demo.controller(DemoController,function($scope){
31             // 单向数据绑定
32             $scope.name=itcast;
33             $scope.age=10;
34             //数据双向绑定
35             $scope.say=function(){
36                 alert($scope.demo);
37                 alert(typeof $scope.demo);
38             };
39         });
40     /script
41 /body
42 /html

数据绑定

7.作用域

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 !-- 根作用域 --
 9 body ng-app="Demo" ng-init="name=‘爷爷‘"
10     h1{{name}}/h1
11     div ng-controller="DemoController"
12         h2{{name}}/h2
13         div ng-controller="ChildController"
14             h3{{name}}/h3
15         /div
16     /div
17     script
18         var Demo=angular.module(Demo,[]);
19 
20         Demo.controller(DemoController,function($scope){
21             $scope.name=爸爸;
22         });
23         Demo.controller(ChildController,function($scope){
24             $scope.name=儿子;
25         });
26     /script
27 /body
28 /html

作用域

8.tab切换

技术分享技术分享
 1 !DOCTYPE html
 2 html lang="en"
 3 head
 4     meta charset="UTF-8"
 5     titleDocument/title
 6     script src="../angular.min.js"/script
 7 /head
 8 !-- 根作用域 --
 9 body ng-app="Demo" ng-init="name=‘爷爷‘"
10     h1{{name}}/h1
11     div ng-controller="DemoController"
12         h2{{name}}/h2
13         div ng-controller="ChildController"
14             h3{{name}}/h3
15         /div
16     /div
17     script
18         var Demo=angular.module(Demo,[]);
19 
20         Demo.controller(DemoController,function($scope){
21             $scope.name=爸爸;
22         });
23         Demo.controller(ChildController,function($scope){
24             $scope.name=儿子;
25         });
26     /script
27 /body
28 /html

tab切换

AngularJS自整理

原文地址:http://www.cnblogs.com/nlj-blog/p/7296196.html


最新回复(0)
/jishu88hME0i43bCl2TyI1AvkchIi0CDB4zTFpsRSkA_3D_3D4719036
8 简首页