您的位置:首页 > 产品设计 > UI/UE

ui-router详细介绍及ngRoute工具区别

2018-03-20 22:28 288 查看
angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.ngRoute使用时需要ui中用ng-view指令指定 如:<div ng-view></div>url改变此区域会被刷新.首先要配置注册 ngRoute var app = angular.module(“YIJIEBUYI", ['ngRoute']);               
app.config(function ($locationProvider) { });路由设置:angular.module(‘XXX').config(['$urlRouterProvider',function($urlRouterProvider) {     $urlRouterProvider.when(“/blog", “/blog/index").otherwise("/blog/index");});
ui-router使用时需要ui中用ui-view指令指定 如:<div ui-view></div>需要下载 ui-route 文件.首先配置注册 ui-route[code=js;toolbar:false">var app = angular.module(“YIJIEBUYI", [‘ui.router']);
    app.config(function () { 
    //路由配置
});
路由设置:angular.module(‘YIJIEBUYI').config(['$stateProvider',
function($stateProvider) {
    $stateProvider.state('blog',{
        url:'/blog',
        views:{
            'container':{templateUrl:'templates/blog/layout.html'}
        }
    }).state('blog.index',{
        url:'/index',
        views:{
            'container':{templaterUrl:'templates/blog/index.html'}
        }
    })
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ui-router