angularjs ngRoute和ui.router对比

ngRoute模块是angularjs自带的路由模块，ui.router是一个第三方路由模块，接下来将对两者进行一个对比：

ng-router(angular-router.js) ng-view ngRoute模块 $routeProvider服务 .when() .otherwise();

ui-router(angular-ui-router.js) ui-view ui.router模块 $stateProvider服务 .state(),$urlRouterProvider服务 .otherwise();

ng-router:

=>
• >view1
• >view2

<span style="color: #008000">//<span style="color: #008000">js
angular.module(<span style="color: #800000">'<span style="color: #800000">myApp<span style="color: #800000">',[<span style="color: #800000">'<span style="color: #800000">ngRoute<span style="color: #800000">'<span style="color: #000000">])
.config([<span style="color: #800000">'<span style="color: #800000">$locationProvider<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$routeProvider<span style="color: #800000">'<span style="color: #000000">,function($locationProvider,$routeProvider){
$locationProvider.html5Mode(<span style="color: #0000ff">false).hashPrefix(<span style="color: #800000">''<span style="color: #000000">);
$routeProvider
.when(<span style="color: #800000">'<span style="color: #800000">/view1<span style="color: #800000">'<span style="color: #000000">,{
templateUrl: <span style="color: #800000">'<span style="color: #800000">view1/view1.html<span style="color: #800000">'<span style="color: #000000">,controller: <span style="color: #800000">'<span style="color: #800000">View1Ctrl<span style="color: #800000">'<span style="color: #000000">
})
.when(<span style="color: #800000">'<span style="color: #800000">/view2<span style="color: #800000">'<span style="color: #000000">,{
templateUrl: <span style="color: #800000">'<span style="color: #800000">view2/view2.html<span style="color: #800000">'<span style="color: #000000">,controller: <span style="color: #800000">'<span style="color: #800000">View2Ctrl<span style="color: #800000">'<span style="color: #000000">
})
.otherwise({redirectTo: <span style="color: #800000">'<span style="color: #800000">/view1<span style="color: #800000">'<span style="color: #000000">});
}])

ui-router:

<ul <span style="color: #0000ff">class=<span style="color: #800000">"<span style="color: #800000">menu<span style="color: #800000">">

>state1

>state2

<span style="color: #008000">//<span style="color: #008000">js
angular.module(<span style="color: #800000">'<span style="color: #800000">myApp<span style="color: #800000">',[<span style="color: #800000">'<span style="color: #800000">ui.router<span style="color: #800000">'<span style="color: #000000">])
.config([<span style="color: #800000">'<span style="color: #800000">$stateProvider<span style="color: #800000">',<span style="color: #800000">'<span style="color: #800000">$urlRouterProvider<span style="color: #800000">'<span style="color: #000000">,function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise(<span style="color: #800000">'<span style="color: #800000">/state2<span style="color: #800000">'<span style="color: #000000">);
<span style="color: #008000">//<span style="color: #008000"> ui-router state配置
$stateProvider.state(<span style="color: #800000">'<span style="color: #800000">state1<span style="color: #800000">'<span style="color: #000000">,{
url: <span style="color: #800000">"<span style="color: #800000">/state1<span style="color: #800000">"<span style="color: #000000">,templateUrl: <span style="color: #800000">"<span style="color: #800000">view1/view1.html<span style="color: #800000">"<span style="color: #000000">,controller: <span style="color: #800000">'<span style="color: #800000">View1Ctrl<span style="color: #800000">'<span style="color: #000000">
}).state(<span style="color: #800000">'<span style="color: #800000">state2<span style="color: #800000">'<span style="color: #000000">,{
url: <span style="color: #800000">"<span style="color: #800000">/state2<span style="color: #800000">"<span style="color: #000000">,templateUrl: <span style="color: #800000">'<span style="color: #800000">view2/view2.html<span style="color: #800000">'<span style="color: #000000">,controller: <span style="color: #800000">'<span style="color: #800000">View2Ctrl<span style="color: #800000">'<span style="color: #000000">
});
}])