AngularJS 路由:ng-route 与 ui-router
AngularJS的ng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的 Angular 路由在APP中定义多个页面的控制器,并给出对应的模板。然后
var app = angular.module('ngRouteExample', ['ngRoute'])
controller'MainController'function($scope) {
})
config($routeProvider$locationProvider{
$routeProvider
when'/users'{
templateUrl: 'user-list.html''UserListCtrl'
})
'/users/:username''user.html''UserCtrl'
});
// configure html5
html5Mode(true);
});
上述代码中,
<div ng-controller="MainController">
Choose:
<a href="users">user list</a> |
"users/alice">user: alice</a>
ng-view></div>
</div>
注意到模板文件中有一个 路由参数接着我们定义上述路由配置的子页面控制器和视图模板。用户列表页面: app'UserListCtrl'{});
<!--user-list.html-->
<h1>User List Page</h1>
用户页面: 'UserCtrl'$routeParams{
params ;
});
<!--user.html-->
<h1>User Page</h1>
<span ng-bind="params.userName"></span>
我们点击首页的 // Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1'sectionId'2'search'moby'}
除了$routeParams,Angular还提供了$location来获取和设置URL。 UI-RouterUI-Router是Angular-UI提供的客户端路由框架,它解决了原生的ng-route的很多不足:
UI-Router提出了 <!-- in index.html -->
<body "MainCtrl">
<section ui-view></section>
</body>
// in app-states.js
$stateProvider
state'contacts'{
url'/contacts'template'contacts.html''ContactCtrl'
'contacts.detail': "/contacts/:contactId"'contacts.detail.html': function $stateParams{
// If we got here from a url of /contacts/42
contactId === "42";
}
当访问
/contacts 时,contacts $state 被激活,载入对应的控制器和视图。在ui-router时,通常使用$state 来完成页面跳转, 而不是直接操作URL。例如,在脚本使用$state.go:
$statego); // 指定state名,相当于跳转到 /contacts
contactId: 42}); // 相当于跳转到 /contacts/42
在模板中使用ui-sref(这是一个Directive): ui-sref="contacts">Contacts</a>
"contacts.detail({contactId: 42})">Contact 42</a>
嵌套视图不同于Angular原生的ng-route,ui-router的视图可以嵌套,视图嵌套通常对应着$state的嵌套。 <!-- contacts.html -->
<h1>My Contacts></div>
<!-- contacts.detail.html -->
'contactId'></span>
命名视图在ui-router中,一个 <!-- index.html -->
<body>
ui-view="filters"></div>
"tabledata""graph"</body>
这一个模板包含了三个命名的 $stateProvider
'report'views: {
'filters''report-filters.html'){ ... controller stuff just for filters view ... }
},
'tabledata''report-table.html'tabledata 'graph''report-graph.html'graph }
})
转载:http://harttle.land/2015/06/10/angular-route.html (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Angular4中常用管道
- 查看bash变量的确切内容? (hexdump没有帮助)
- twitter-bootstrap – 带有bootstrap JS的Angular 2
- angularjs – 如何用jwt保护express中的静态文件夹
- autoindent是vim中smartindent的子集?
- 阅读bootstrap2 中的bootstrap-responsive.css源文件总结的
- angularjs – 从Angular JS $资源POST返回的值不匹配服务器
- 使用Ansible部署docker时如何设置运行参数?
- angularjs – 如何将一些数据从一个控制器传递到另一个控制
- 斯卡拉 – 阿卡未来 – 并行与并发?