在angular中他的自带路由是 ng-route.但是它的缺点很大,其中单个视图是最致命的一点。
所有我们可以使用第三方路由 ui-route。它主要针对多视图的嵌套。
ng-route
js
var app=angular.module('App',['ngRoute']); app.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/login.html' }) .when('/1', { templateUrl: 'views/regist.html' }) .otherwise({ redirectTo: '/' }); });
html
<script src='angular-route.js'></script>//引入 <div ng-view=''></div>//html 插入
ui.route
js
var app=angular.module('birthdayApp',['ui.router']); app.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise('/'); $stateProvider .state('1', { url: "/1", views: { 'view': { templateUrl: 'views/login.html', controller: 'loginCtr' } } }); $stateProvider .state('2', { url: "/2", views: { 'view': { templateUrl: 'views/regist.html', controller: 'registCtr' } } }); });
html
<script src='angular-ui-router.js'></script> <div ui-view="view"></div>