AngularJs路由和双向绑定

AngularJs用的是前端路由，页面是一个单页面，先对指定的ng-app，定义路由规则（routeProvider），然后通过不同的URL，告诉ng-app加载哪个HTML，渲染到视图（ng-view）上。

 

使用路由机制：

$routeProvider提供了定义路由表的两个核心方法when(path,route)和otherwise(params)

首先看when(path,route),它当中的path与($location.path)的值进行匹配，如下：

})
   .when('/about', {
   templateUrl: 'views/about.html',
   controller: 'AboutCtrl'
})

 

$location.path('about');

 注：path是一个string类型。

otherwise(params)对当路由匹配不到时，可以配置以redirectTo参数，如下：

.otherwise({
   redirectTo: '/'
});

 在主视图中指定加载子视图的位置：

<div ng-view></div>

 这样子视图就会被引入进来，渲染到页面

 

总的来说包括以下内容：

$routeProvider用来定义一个路由表

$routeParams保存了地址栏中的参数

$route完成路由匹配，并且提供路由相关的属性访问及事件

指令ngView用来在主视图中指定加载子视图的区域

 

 

AngularJs的双向绑定

双向绑定，一种是数据从模型到视图方向的绑定，一种是数据从视图到模型方向的绑定。

AngularJs是如何实现双向绑定的呢？这里要涉及到$scope者个作用域，它就相当于模型和视图间数据传递的中间者。$scope中存储了很多东西，模型可以在$scope中存入数据，视图可以直接在$scope中获取模型存入的数据，并加载到页面上，反之亦如此。

下面先来看一个数据从模型到视图的绑定：

$scope.activities = [1,2,3,4];     
//将一个数组存入了$scope，可以通过console.log($scope)查看

 

<p ng-repeat = "activity in activities">{{activity}}</p>   
 //在页面上显示绑定数据通过{{}}实现

 再来看看数据从视图到模型的绑定：

<input ng-model="activityName">    //当输入值时，对应的$scope中的值会随着改变

 

var activityName = $scope.activityName;

 双向绑定，当模型的发生改变，对应的页面也会同时更新，当页面的值发生改变，对应的模型也会变化。