AngularJS自收拾

准备:

  从该地点获取AngularJS所以版本: https://code.angularjs.org/ 

1.初时AngularJS

AngularJS 1AngularJS 2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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-模块化

AngularJS 3AngularJS 4

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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.模块化

AngularJS 5AngularJS 6

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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.放指令

AngularJS 7AngularJS 8

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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">{{item}}</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.由定义指令

AngularJS 9AngularJS 10

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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:'<h1>hello world!</h1>',
24                 //templateUrl:'header.html'//引入外部文件,需要在服务器上使用,与上面的代码不能同时使用
25                 replace:true,//模板替换标签
26             };
27         });
28 
29     </script>
30 </body>
31 </html>

从定义指令

6.数据绑定

AngularJS 11AngularJS 12

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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         {{demo}}
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>

AngularJS数码绑定

7.作用域

AngularJS 13AngularJS 14

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</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>

作用域

相关文章