AngularJS--双向数据绑定

 

Google AngularJS是一个JS框架，适用于以数据操做为主的SPA应用。全部的操做都是以数据为出发点。四大特性：

  (1)MVC模型

Model：即业务数据   $scope.xx  $rootScope.xx

View：即业务数据的呈现   HTML + ngXxx

Controller：负责操做业务数据   .controller('', function(){})

  (2)双向数据绑定

方向1：Model绑定到View，只要Model变View随着变

方向2：View(表单控件)绑定到Model，只要View变Model随着变

  (3)依赖注入

  (4)模块化设计

 

面试题：AngularJS的最大的不足/应用时须要特别关注的地方？ 原生ES/JS/DOM只有特定HTML元素的特定事件的监听机制，没有监听数据/对象/值改变的机制。

$interval和window.setInterval()的区别？ $interval修改的任何Model数据，底层会当即遍历一遍$digest队列； setInterval()即便修改了Model数据，也不会遍历$digest队列；

$interval(function(){ $scope.count++; }, 1000) 等价于 setInterval(function(){ $scope.count++;  $digetst()/$apply(); }, 1000)

 

 

2.依赖注入

 Dependency：若某个函数调用时须要其它的对象做为形参，就此函数依赖于形参对象。

 function Driver( car ){          //司机依赖于一个car对象

       car.start();

car.run();

car.stop();

 }

 如何解决依赖关系：

  (1)主动建立方式

var c1 = new Car(); //主动建立依赖对象

var d1 = new Driver( c1 );  //传递依赖对象

  (2)被动注入(Injection)方式

module.controller('控制器', function($scope, $interval){})

    Angular中的ngController指令在实例化控制器对象时，会根据指定的形参名，建立出控制器所依赖的对象，并注入给控制器对象——依赖注入（Dependency Injection，DI）现象。

  注意：

(1)Angular在建立控制器对象时，会根据形参列表中的每一个形参的名称来建立依赖的对象，故控制器声明函数不能声明Angular没法识别的形参名——Angular只提供了这一种依赖注入方式——根据形参名来注入依赖的对象！

      (2)若项目JS文件使用了相似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会致使Angular的依赖注入失败！解决办法：

module.controller('控制器名', [

'$scope',

'$interval',

'$http',

function(aaa,bbb,ccc){}

])

 

 

["num1", 'num2', 'num3', function add(n1, n2,n3){}]

var num1=10;

var num2=20;

var num5=50;

var num3=30

add(10, 20, 30);

 

 

3.能够被注入的对象——全部的service/provider对象均可以被注入

  (1)$rootScope：在多个控制器间共享数据的服务

  (2)$interval：提供周期性定时器服务

  (3)$timeout：

  (4)$log：提供五个基本的日志输出服务

  (5)$http：提供异步HTTP请求（AJAX）服务

用法： $http({method:'GET', url:'/xx.php'}).

success(fn).

error(fn);

简化版：  $http.get('url').success(fn);

$http.post('url', data).success(fn);

  (6)$location

 

 

 

 

4.ng模块中提供的过滤器(filter)

  Filter: 把Model数据在显示时以某种特定的格式呈现。

  (1)lowercase

语法： {{ 表达式 | lowercase }}

  (2)uppercase

语法： {{ 表达式 | uppercase }}

  (3)number

语法： {{ 表达式 | number }}

  {{ 表达式 | number : 小数位数 }}

  (3)currency

语法： {{ 表达式 | currency }}

  {{ 表达式 | currency : '货币符号' }}

  (3)date

语法： {{ 表达式 | date }}      默认格式： Sep 1, 2015

  {{ 表达式 | date : '日期时间格式'}}

 

 

5.Web项目中多页应用和单页应用的比较

  Mutiple Page Application

  Single Page Application

多页应用	单页应用(SPA)
项目中有多个完整的HTML页面	整个项目中只有一个完整的HTML页面；其它HTML文件都是HTML片断
使用超连接、JS实现页面跳转	使用超连接、JS实现“伪跳转”
全部的页面请求都是同步的——客户端在等待服务器给响应的时候，浏览器中时一片空白	全部的“伪页面请求”都是异步请求——客户端在等待下一个页面片断到来时，仍能够显示前一个页面内容——浏览体验更好
不便于实现两个页面间切换过场动画	很容易实现两个伪页面间的过场切换动画
浏览器须要不停的建立完整的DOM树、删除完整的DOM树	浏览器只须要建立一个完整的DOM树，此后的伪页面切换其实只是在换某个div中的内容。
每一个页面都须要加载本身的CSS和JS文件	整个项目的CSS和JS文件只须要加载一次

 

手动实现单页应用的步骤：

(1)建立一个完整的HTML页面（如index.html)，引入所须要的全部CSS和JS；body中只须要一个伪页面的容器元素，如<div></div>

(2)建立若干个伪HTML页面/模板页面：只须要声明HTML片断

(3)客户端请求完整的HTML页面，同时URL中再追加一个特殊的标记，如http://127.0.0.1/index.html#/start——指定要加载的伪页面的名称

(4)浏览器解析出伪页面名称，查找一个字典，找到该名称对应的模板页面的URL

window.location.hash

#/start            =>                template/start.html

#/m               =>                template/main.html

#/detail          =>                template/productdetail.html

(5)客户端发起异步的AJAX请求，获取模板页面的内容，加载到index.html的伪页面容器中便可

 

 

 

 

6.AngularJS提供的模块——ngRoute

  Route：路由，经过某条线路找到目标内容。

  ngRoute模块的用途：就是根据浏览器中URL中的一个特殊的地址标记(形如#/xxx)，查找到该标记所对应的模板页面，并异步加载到当前页面的ngView指令中。使用步骤：

  (1)建立惟一完整的HTML页面，其中声明一个容器，ngView指令。引入angular.js和angular-route.js

  (2)建立多个模板页面(习惯上放在一个特别的目录下，如tpl)

  (3)建立Module，声明依赖于ng和ngRoute两个模块。

  (4)在Module中配置路由字典。

  (5)使用浏览器作测试：

http://IP地址/index.html#/路由地址

 

 

7.ngRoute模块中的伪页面跳转

(1)经过超连接跳转

<a href="#/路由地址">    #不能省

(2)经过JS跳转

<button ng-click="jump()"></button>

$scope.jump = function(){

//location.href="2.html"        不能使用多页面应用中的跳转

$location.path('/路由地址');    //#不能有

}