Download presentation
Presentation is loading. Please wait.
1
AngularJS 常虎
2
目录 概述 常用指令 过滤器 依赖注入 路由
3
AngularJS概述 AngularJS是一个动态WEB应用设计的结构框架 它能让你使用HTML作为模板语言，通过扩展HTML的语法
它能让你能更清楚、简洁的构建应用组件 其创新点在于利用了数据绑定和依赖注入 注意：它是一个框架，不是类库。 类库是一些函数的集合，能帮你实现WEB应用，起主导作用的是你的代码，由你来决定何时何地使用这些类库，如jQuery。 框架是一种特殊的、已经实现的WEB应用，你只需要对它填充相应的业务逻辑，这里框架起主导作用，由它来根据具体的应用逻辑调用你的代码，如：ExtJS
4
AngularJS概述 AngularJS的核心是基于对HTML标签的增强
5
AngularJS下载 下载地址：
6
AngularJS - Hello World
绑定数据 起点 用{{}} 显示数据
7
AngularJS - Hello World
angular.bootstrap 当页面加载完成之后调用bootstrap启动angular
8
AngularJS - MVC 告诉angular引擎他应该管理的内容 设置控制器 控制器是一个普通JS方法
9
AngularJS - MVC div 是视图 Hellocontroller方法是控制器 $scope.greeting是数据模型
10
AngularJS - 数据绑定 ng-model实现数据的双向绑定 {{}} 实现模型数据的展示
11
AngularJS - 常用指令 ng-app ng-controller ng-repeat ng-model ng-bind
ng-change ng-click ng-app 告诉angular它应该管理页面的哪一部分 Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. ng-controller 用javascript管理的页面的区域叫控制器 ng-repeat 循环便利集合并为每一个元素拷贝模板内容 ng-model 将html组建和数据模型之间进行数据绑定 双向的数据绑定 ng-bind {{}} 进行数据绑定 ng-change 值变化事件绑定 ng-click 点击事件绑定 ng-src 为了解决动态资源地址问题
12
AngularJS - 指令 ng-class ng-href ng-src ng-show ng-init ng-class
<ul ng-show="show"> <li ng-repeat="item in items" ng-click="selectedItem($index)" ng-class="{selected : $index == selectedItemIndex}"> <p>{{item}}</p> </li> </ul>
13
AngularJS - $watch 语法： 当需要侦听模型变化的时候使用$watch $watch方法返回一个函数，执行该函数则取消侦听。
14
AngularJS - $watch $watch 传入一个表达式和一个回调函数，当表达式发生变化的时候执行回调函数。
15
AngularJS - filter 语法： 过滤器实现模型数据展示时的格式化
$watch 传入一个表达式和一个回调函数，当表达式发生变化的时候执行回调函数。
16
AngularJS - filter 带有名字的模块 自定义过滤器： 定义模块tf并定义过滤器titleCase
var tf = angular.module('tf', []); tf.filter('titleCase', function(){ return function(input){ var ws = input.split(' '); for(var i = 0; i < ws.length; i++){ ws[i] = ws[i].charAt(0).toUpperCase() + ws[i].slice(1); } return ws.join(' '); });
17
AngularJS - 依赖注入 $scope从哪儿来？
18
AngularJS - 依赖注入 控制器的另外一种写法
1 定义模块 2 调用模块的controller方法，第一个参数为控制器名称，第二个参数为一个数组，数组中第一位为依赖的对象，后面方法的参数。
19
AngularJS - 依赖注入 $scope $http这两个参数必须和前面两个字符串对应 错误 正确
20
AngularJS - $http 1 依赖注入$http对象 2 $http的调用和jQuery类似
21
AngularJS - $http
22
AngularJS - $http
23
AngularJS - $http
24
AngularJS - $http
25
AngularJS - $http
26
AngularJS - $http
27
AngularJS - $http
28
AngularJS - $http
29
AngularJS - $http
30
AngularJS - $http
31
AngularJS - $http
32
AngularJS - $resource
33
AngularJS - $resource
34
AngularJS - $resource
35
AngularJS - $resource
36
AngularJS - $resource
37
AngularJS - $resource
38
AngularJS - 路由 1 首先引入angular.js和angular-route.js两个文件
39
AngularJS - 路由 1 定义模块demo8，引入ngRoute模块
2 通过config API注入$routeProvider模块，并通过$routeProvider.when方法来定义路由规则。 注意：第二条路由规则匹配参数，以：声明的参数会被提取出然后存放在$routeParams对象中。
40
从$routeParams中可获取当前URL中匹配的参数。
AngularJS - 路由 1 定义控制器demo8,该控制器引入了$scope $http $routeParams 三个模块 从$routeParams中可获取当前URL中匹配的参数。
41
AngularJS - 路由 下面是两个模板页面文件
42
AngularJS - 路由
43
AngularJS - 路由
44
AngularJS - 路由
45
AngularJS - 路由
46
AngularJS - 路由
48
AngularJS特性 -- 数据绑定
49
AngularJS特性 -- 数据绑定
50
AngularJS -- 表达式
51
AngularJS特性
52
AngularJS特性
53
AngularJS特性
54
AngularJS -- 指令
55
AngularJS -- 指令
56
AngularJS -- 指令
57
AngularJS -- 指令
58
AngularJS -- 指令
59
AngularJS -- 指令
60
AngularJS -- 指令
61
AngularJS -- 指令
62
AngularJS -- 指令
63
AngularJS -- 指令
64
AngularJS -- 指令
65
AngularJS -- 指令
66
AngularJS特性
67
AngularJS特性
68
AngularJS -- 指令
69
AngularJS -- 指令
70
AngularJS特性
71
AngularJS -- 指令
72
AngularJS -- 指令
73
AngularJS -- 指令
74
AngularJS -- 指令
75
AngularJS特性
76
AngularJS -- 指令
77
AngularJS特性
78
AngularJS -- 指令
79
AngularJS -- 指令
80
AngularJS -- 指令
81
AngularJS -- 指令
82
AngularJS -- 指令
83
AngularJS -- 指令
84
AngularJS -- 指令 参考资料：
85
AngularJS -- 指令
86
AngularJS -- 指令
87
AngularJS -- 指令
88
AngularJS -- 指令
89
AngularJS -- 指令
90
AngularJS -- 指令
91
AngularJS -- 指令
92
AngularJS特性
93
AngularJS -- 指令
94
AngularJS -- 指令
95
AngularJS -- 指令
96
AngularJS特性
97
AngularJS -- 指令
98
AngularJS -- 指令
99
AngularJS特性
100
AngularJS -- 指令
101
AngularJS特性-DI
102
AngularJS特性-DI
103
AngularJS特性-DI
104
AngularJS特性-DI
105
AngularJS特性-DI
106
AngularJS特性-DI
107
AngularJS特性-DI
108
AngularJS特性-DI
109
AngularJS特性-DI
110
AngularJS -- 作用域
111
AngularJS -- 作用域
112
AngularJS -- 作用域
113
AngularJS -- 作用域
114
AngularJS -- 作用域
115
AngularJS -- 作用域
116
AngularJS -- 作用域
117
AngularJS -- 作用域
118
AngularJS -- 作用域
119
AngularJS -- 作用域
120
AngularJS -- 作用域
121
AngularJS -- 作用域
122
AngularJS -- 作用域
123
AngularJS -- 作用域
124
AngularJS -- 作用域
125
AngularJS -- 作用域
126
AngularJS -- 作用域
127
AngularJS -- 作用域
128
AngularJS -- ngTouch
129
AngularJS -- ngTouch
130
AngularJS -- ngTouch
131
AngularJS -- ngTouch
132
AngularJS -- ngTouch
133
AngularJS -- ngTouch
134
AngularJS -- ngTouch
135
AngularJS -- ngTouch
136
AngularJS -- ngTouch
137
AngularJS -- ngTouch
Similar presentations
