AngularJS自整理

2021-06-10 10:02

阅读：553

标签：tar span toggle get 单元素作用域 show 控制组合

准备:

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

1.初时AngularJS

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>Documenttitle>
 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     title>Documenttitle>
 6 head>
 7 
 8 body>
 9     
10     div class="box" ng-app="App">
11         
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     title>Documenttitle>
 6     script src="../angular.min.js">script>
 7 head>
 8 body ng-app="Demo">
 9     
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     title>Documenttitle>
 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">Welcomeh1>
20         h2 ng-hide="false">Welcomeh2>
21         h3 ng-if="true">Welcomeh3>
22         h4 ng-class="{red:true,blue:true}">Welcomeh4>
23         h5 class="{{className}}">Welcomeh5>
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">aaaoption>
32             option value="0" ng-selected="true">bbboption>
33             option value="0">cccoption>
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    指定  元素的 src 属性
56             ng-href    为 the  元素指定链接
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     title>Documenttitle>
 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       
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:‘hello world!‘,
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     title>Documenttitle>
 6     script src="../angular.min.js">script>
 7 head>
 8 
 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         
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     title>Documenttitle>
 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     title>Documenttitle>
 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自整理

标签：tar span toggle get 单元素作用域 show 控制组合

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

上一篇：【转】文件各种上传，离不开的表单

下一篇：vue.js开发环境搭建

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：AngularJS自整理
文章链接：http://soscw.com/index.php/essay/93093.html

亲，登录后才可以留言！

AngularJS自整理

hello world!

评论

热门文章

推荐文章

最新文章

置顶文章