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:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- html -->
<ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
</ul>
<div ng-view></div>

//js
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', '$routeProvider',function($locationProvider, $routeProvider){
    $locationProvider.html5Mode(false).hashPrefix('');
    $routeProvider
     .when('/view1', {
         templateUrl: 'view1/view1.html',
         controller: 'View1Ctrl'
     })
     .when('/view2', {
         templateUrl: 'view2/view2.html',
         controller: 'View2Ctrl'
     })
     .otherwise({redirectTo: '/view1'});
}])

ui-router:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<!--html-->
<ul class="menu">
    <li><a ui-sref="state1">state1</a></li>
    <li><a ui-sref="state2">state2</a></li>
</ul>
<div ui-view></div>

//js
angular.module('myApp', ['ui.router'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/state2');
    // ui-router state配置
    $stateProvider.state('state1',{
        url: "/state1",
        templateUrl: "view1/view1.html",
        controller: 'View1Ctrl'
    }).state('state2',{
        url: "/state2",
        templateUrl: 'view2/view2.html',
        controller: 'View2Ctrl'
    });
}])