AngularJS入门

AngularJS概述
一个纯JS框架
适用于以数据操作为主的SPA(Single Page Application)应用

四大特性

• 采用MVC模式：页面中无dom操作 ---- MVVM
• 双向数据绑定
• 依赖注入
• 模块化设计

Angular中ng模块提供的指令(Directive)

• ngApp：自动载入/启动一个Angular应用
  语法：
             
  每个HTML只有一个ng-app指令，用于确定AngularJS应用范围
• ngInit：用于声明Model变量 × [不推荐使用]
  此变量前，不能存在var声明
  语法：
             
  可以先使用再声明
  一次可声明多个变量，使用;隔开
• ngController：创建一个控制器对象的实例(即调用Controller函数) √
  *语法：
• ngBind：在当前元素的innerHTML上输出指定表达式的值 √
  语法： 与{{表达式效果一致}}
• ngRepeat：为HTML增加循环功能，循环输出当前元素
  语法：{{变量名}}
             {{k}}--{{v}}
• ngIf：：为HTML增加选择功能，只有在表达式值为true时，当前元素才添加
  语法：
  注意：条件为假的时候，从DOM树删除
• ngSrc：当src中出现的Model变量，从而解决在加载前出现404错误
  语法：等
• ngClick：为元素绑定监听函数[模型函数] {所有类似事件语法}
  语法：
  使用$scope.函数 = function(){}声明模型函数
• ngStyle：为当前元素制定样式,赋值为Model对象
  语法：
• ngShow/ngHide：通过display属性控制是否显示
  语法：
  注意：show为真show假hide hide为真hide假show
• ngDisabled：控制当前元素是否禁用
  语法：
  注意：值为真时禁用，假为使用
• ngChecked：

Angular中ng模块提供的函数(Function)
angular.module()
angular.forEach(obj,function(key,value){})

Angular中ng模块提供的服务(Service)

1. $rootScope $location 修改/读取当前URL $log.error/info...日志输出服务
2. $interval 周期定时

• 返回值为promise对象
• 解除定时器 $interval.cancel(e);
• e为promise对象

3. $timeout 一次定时
4. $http 发起异步的AJAX请求服务
5. $http.post/get(‘路径’).success(function(data){}) post需要更改请求头

Angular表达式
{{表达式}} 作用：当前位置输出该表达式的值
不能出现new关键字
算术运算中不含++/--
赋值运算中不含+=/-=
特殊运算禁用
可以调用对象的方法和属性

Angular声明变量---Model数据

• 使用ngInit指令声明 [View,Model混合] ×
• 使用Controller创建变量 √
  新版本Angular 不允许使用全局函数污染全局
  新版本Angular要求控制器必须声明在一个模块中
  创建Module <= 创建Controller <= 创建Model变量
  具体步骤

1. 声明一个自定义模块module
   angular.module(‘模块名’,[])
2. 在当前AngularJS应用中注册自定义模块
   ng-app=”模块名”
3. 在自定义模块中创建Controller函数
4. 声明Model数据
   $scope.key = value;
5. 在View中创建Controller对象实例，指定其作用范围
   
   在ANY标签范围内输出声明过的Model变量
6. 在Controller作用范围内输出Model变量
   angular表达式作为输出

  
ename:{{ename}}
  
age:{{age}}
  
birthday:{{birthday}}

$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 ：方法依赖参数
  依赖对象的解决：

1. 主动创建，并传递
2. 被动注入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

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'
})

注意事项：

1. 由于模板页面被客户端请求后挂载到当前DOM树上，即相对当前页面路径
2. 使用ngRoute模块时，无需为模板页面中某个元素单独设置controller，只需
   要在声明路由字典时设置controller即可，同时在其前声明数据变量等。见上
3. 跳转路由地址的方式：
   href 中为路由字典中设置的路径声明
   
   $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

指令必须赋值为一个字符串