码迷,mamicode.com
首页 > 其他好文 > 详细

ngRoute插件

时间:2015-11-23 16:48:36      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

angular中可以使用插件,例如ngRoute插件就是用与路由控制。

首先要在模块中引入即可:

var m1 = angular.module(‘myApp‘,[‘ngRoute‘]);

然后我们进行供应商配置

m1.config([‘$routeProvider‘,function($routeProvider){
    
    $routeProvider
        .when(‘/aaa/:num‘,{
            template : ‘<p>首页的内容</p>{{name}}‘,
            controller : ‘Aaa‘
        })
        .when(‘/bbb‘,{
            template : ‘<p>学员的内容</p>{{name}}‘,
            controller : ‘Bbb‘
        })
        .when(‘/ccc‘,{
            template : ‘<p>课程的内容</p>{{name}}‘,
            controller : ‘Ccc‘
        })
        .otherwise({
            redirectTo : ‘/aaa‘
        });
    
}]);

如上,通过when方法来制定不同的hash值对应不同的视图,hash只后面还可以带上参数num,

如何改变hash值?

1.可以通过a链接的href属性

2.通过$location.path()方法来改变

m1.controller(‘Aaa‘,[‘$scope‘,‘$location‘,‘$routeParams‘,function($scope,$location,$routeParams){
    
    $scope.name = ‘hello‘;
    $scope.$location = $location;
    
    console.log( $routeParams );
    
}]);

 

还可以在run方法中监听路由事件。

m1.run([‘$rootScope‘,function($rootScope){
    
    $rootScope.$on(‘$routeChangeStart‘,function(event,current,pre){
        console.log(event);
        console.log(current);
        console.log(pre);
    });
    
}]);

 

ngRoute插件

标签:

原文地址:http://www.cnblogs.com/toodeep/p/4988527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!