AngularJS概述
一个纯JS框架
适用于以数据操作为主的SPA(Single Page Application)应用
四大特性
- 采用MVC模式：页面中无dom操作 ---- MVVM
- 双向数据绑定
- 依赖注入
- 模块化设计
Angular中ng模块提供的指令(Directive)
-
ngApp：自动载入/启动一个Angular应用
语法：<ANY ng-app=”XXX”></ANY>
<ANY data-ng-app=”xxx”></ANY>
每个HTML只有一个ng-app指令，用于确定AngularJS应用范围 -
ngInit：用于声明Model变量 × [不推荐使用]
此变量前，不能存在var声明
语法：<ANY ng-init=”key=value;key=value;...”></ANY>
<ANY class=”ng-init:key=value;”></ANY>
可以先使用再声明
一次可声明多个变量，使用;隔开 -
ngController：创建一个控制器对象的实例(即调用Controller函数) √
*语法：<ANY ng-controller=”控制器名称”></ANY> -
ngBind：在当前元素的innerHTML上输出指定表达式的值 √
语法：<ANY ng-bind=”表达式”></ANY> 与{{表达式效果一致}} -
ngRepeat：为HTML增加循环功能，循环输出当前元素
语法：<ANY ng-repeat=”变量名 in Model数组/对象”>{{变量名}}</ANY>
<ANY ng-repeat=”(k,v) in Model数组/对象”>{{k}}--{{v}}</ANY> -
ngIf：：为HTML增加选择功能，只有在表达式值为true时，当前元素才添加
语法：<ANY ng-if=”表达式”></ANY>
注意：条件为假的时候，从DOM树删除 -
ngSrc：当src中出现的Model变量，从而解决在加载前出现404错误
语法：<img ng-src=”images/{{}}”></img>等 -
ngClick：为元素绑定监听函数[模型函数] {所有类似事件语法}
语法：<ANY ng-click=”模型函数()”></ANY>
使用$scope.函数 = function(){}声明模型函数 -
ngStyle：为当前元素制定样式,赋值为Model对象
语法：<ANY ng-style=”模型对象”></ANY> -
ngShow/ngHide：通过display属性控制是否显示
语法：<ANY ng-show/ng-hide=”表达式”></ANY>
注意：show为真show假hide hide为真hide假show -
ngDisabled：控制当前元素是否禁用
语法：<ANY ng-disabled=”表达式”></ANY>
注意：值为真时禁用，假为使用 - ngChecked：
Angular中ng模块提供的函数(Function)
angular.module()
angular.forEach(obj,function(key,value){})
Angular中ng模块提供的服务(Service)
- $rootScope $location 修改/读取当前URL $log.error/info...日志输出服务
- $interval 周期定时
- 返回值为promise对象
- 解除定时器 $interval.cancel(e);
- e为promise对象
- $timeout 一次定时
- $http 发起异步的AJAX请求服务
- $http.post/get(‘路径’).success(function(data){}) post需要更改请求头
Angular表达式
{{表达式}} 作用：当前位置输出该表达式的值
不能出现new关键字
算术运算中不含++/--
赋值运算中不含+=/-=
特殊运算禁用
可以调用对象的方法和属性
Angular声明变量---Model数据
- 使用ngInit指令声明 [View,Model混合] ×
-
使用Controller创建变量 √
新版本Angular 不允许使用全局函数污染全局
新版本Angular要求控制器必须声明在一个模块中
创建Module <= 创建Controller <= 创建Model变量
具体步骤
- 声明一个自定义模块module
angular.module(‘模块名’,[])- 在当前AngularJS应用中注册自定义模块
ng-app=”模块名”- 在自定义模块中创建Controller函数
- 声明Model数据
$scope.key = value;- 在View中创建Controller对象实例，指定其作用范围
<ANY ng-controller=”控制器名称”></ANY>
在ANY标签范围内输出声明过的Model变量- 在Controller作用范围内输出Model变量
angular表达式作为输出
<script>
//1.声明module
angular.module('myModule1',['ng']).controller('myController1',function ($scope) {
//3.创建Controller函数
//4.使用Controller函数创建修改删除Model数据
$scope.ename = 'Tom';
$scope.age = 30;
$scope.add = "陕西";
$scope.birthday = new Date();
})
</script>
<div ng-controller="myController1">
<p>ename:{{ename}}</p>
<p>age:{{age}}</p>
<p>birthday:{{birthday}}</p>
</div>
$scope创建局部模型变量
$rootScope 创建全局模型变量 [可实现继承]
Angular双向数据绑定
- 方向一：把Model数据绑定到View中，当数据发生改变时，view随之改变
实现：*ng-bind *{{}} *ng-repeat *ng-if *ng-src等众多指令均实现
优点：无需DOM操作，直接操作模型数据即可 - 方向二：把View中的修改绑定到Model上，当view发生改变，数据随之改变
实现：ng-model指令 针对[input/textarea/select等]
优点：表单控件value的值改变，模型数据直接改变并且该指令会在初始时实现方向一，先查询模型数据
说明：单行文本输入域，多行文本输入域，下拉框，单选按钮默认将value绑定，而复选框会把true/false值绑定
Angular依赖注入 ----- 其他的依赖注入方式众多
体现“最少知识”设计原则
需要外部js时，若使用.min.js文件，会将形参混淆
解决：在控制器中声明数组(‘name’,[‘$http’,’$scope’,function(a,b){}]);
-
依赖Dependency ：方法依赖参数
依赖对象的解决：
- 主动创建，并传递
- 被动注入Inject ----- 成为依赖注入
由特定框架创建方法，发现依赖对象，则自动创建被依赖对象
举例
module.controller(“name”,function($scope,$xxx,$yyy){});
控制器对象不能自己手动创建，即框架创建ng-controller
传递依赖的参数对象必须为框架提供的参数名称如$scope
Angular中ng模块提供的过滤器(Filter)
对模型数据在view中呈现时进行某种格式的筛选/过滤
过滤器使用时，需要借助管道 |
语法：{{数据 | 过滤1 | 过滤2 | ....}}
lowercase *uppercase *number:小数位数 *currency:’符号’
date:’格式’ 将长整形数字转换成指定格式时间
Angular模块化设计
体现“高内聚低耦合”设计原则
项目中，根据不同功能，将不同组件放置在不同模块中
AngularJS两种模块
- 官方提供模块
- 用户自定义模块
Angular中ngRoute模块 ---- 实现spa的关键
Route：路由，为到达目的地而经过的线路
可以让用户自定义”路由字典”，自动解析请求的路由地址，查找路由字典，自动发起异步请求，将获取的结果放到当前页面
使用：只需要自定义路由字典即可
引入angular.js和angular-route.js
<div ng-view></div> ng-view标志包含获取结果,有且只包含一个页面
创建自定义模块，声明依赖于ng和ngRoute模块
在当前模块中使用ngRoute提供的对象配置路由字典
创建不同的模板页面
测试路由字典的配置是否正确
angular.module('M',['ng','ngRoute']).controller(‘xxx’
,function($scope){
$scope.xxx = xxx ;
}).config(function ($routeProvider) {//配置路由字典
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'xxx'
}).otherwise({ //若未提供或错误的路由地址则访问此
redirectTo:'/start'
})
注意事项：
- 由于模板页面被客户端请求后挂载到当前DOM树上，即相对当前页面路径
- 使用ngRoute模块时，无需为模板页面中某个元素单独设置controller，只需
要在声明路由字典时设置controller即可，同时在其前声明数据变量等。见上 - 跳转路由地址的方式：
<a href = “#/start”></a> href 中为路由字典中设置的路径声明
<button ng-click=”jump()”></button>
$scope.jump = function(){
$location.path(‘/start’); //修改url路由地址部分
}
a标签中必须包含#，而path的参数不需要#
Angular中ngAnimate模块
可以支持JS，Transition，Keyframes动画，本身未提供动画效果，而是为上述三种技术提供了相应的”动画钩子(Hooks)”
ng模块中的指令默认都提供了动画钩子
- 使用ngView [enter and leave]
1.使用ngAnimate模块调用css Transition动画钩子步骤 - 引入angular.js 和 angular-animate.js 以及angular-route.js
- 自定义模块中声明依赖于ngAnimate模块即可产生动画钩子
- 为ng-view设定class=”page” 对应即可
- 自定义样式
.page{transition: all .15s linear;position: absolute;width: 100%;}
.page.ng-leave{left:0;} [要离开时]
.page.ng-leave.ng-leave-active{left: -100%;} [离开后]
.page.ng-enter{left: 100%;} [要进入时]
.page.ng-enter.ng-enter-active{left:0;} [进入后] - 注意：overflow:hidden;
2.使用ngAnimate模块调用其它动画
补充引入页面：
- 使用Web服务器的SSI技术(SeverSideInclude) --- 修改Web服务器配置文件[复杂]
- 使用服务器段动态编程语言进行页面包含，如php：include (‘footer.html’);等[优先使用]
- 前端
1.使用framset/iframe ---- 少用 会使布局难以控制
2.使用AJAX异步请求 ---- 请求次数多
$(document).ready(function(){
$(‘#header’).load(‘header.html’)
*})
3.AngularJS中提供类似AJAX方式 √
ngInclude <div ng-include=” ’header.html’ ”></div>
指令必须赋值为一个字符串
