ngroute和ui-router并不是兩個相互獨立的部分，ui-router是社區(qū)庫提供的用來提高ngroute的功能的，可用于多視圖(嵌套)，功能十分強(qiáng)大！

為了全面的了解兩者的不同點，在這里我就加上$http請求時對兩者進(jìn)行比較，

1.引入文件：

ngroute：<script src="angular-route.js"></script>

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

2.注入：

ngroute： var app = angular.module('app',['ngRoute']);

ui-router： var app = angular.module('app',['ui.router']);

3.配置：

【傳參控制、判斷條件、默認(rèn)指定】

    $routeProvider.when('/index/:id',{
        templateUrl:'template/musicList_tpl.html',
        controller:"musicControler"
    }).otherwise({
        redirectTo:'/index/1'//redirectTo
    })
]}

ui-router：app.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $stateProvider.state("first",{//(first命名空間 綁定到視圖可以也放在ａ標(biāo)簽)
多種傳遞參數(shù)方式：
            url:'/index/:id',//（這才是hash值）
            //url:'/index/{id:int}',
            //url:'/index/?id&name',
            templateUrl:"me-musicList.html",

可以擁有自身的控制器
            controller:"lrxController"
        })
            .state('music',{
                url:'/music/:id',
                templateUrl:"me-musicList.html",
                controller:"lrxController"
            })
        //(router網(wǎng)頁默認(rèn)指定首頁)   
        $urlRouterProvider.otherwise('index/1');

4.控制器：【依賴：$routeParams'、'$stateParams'、回調(diào)：success/error、then/catch】

ngroute： app.controller('lrxController',['$routeParams','$http','$scope',function ($routeParams,$http,$scope) {//
//        console.log($routeParams.id);
        $http({
            url:'listMusic.php',
            method:'get',
            params:{
                id:$routeParams.id
            }
        }).success(function (res) {
            $scope.musicList = res;
        })
    }]);

 

ui-router: app.controller('lrxController',['$scope','$stateParams',"$http",function ($scope,$stateParams,$http) {
    $http({
        url: "listMusic.php",
        method: "get",
        params: {
            id: $stateParams.id
        }
    }).then(function (res) {//success替換成then
        console.log(res);
        $scope.musicList = res
    })
}]);

5.指令和視圖：【參數(shù)，ng-view。 ui-sref、 ui-view】

 a href="#/index/1">流行</a>
a href="#/index/2">復(fù)古</a>

<div class="content" ng-view> </div>

 

<!--(ui-sref-active查看當(dāng)前激活狀態(tài)并設(shè)置Class)
.active a{
    font-size: 30px;
}-->

 

<li ui-sref-active="active"><a  ui-sref="home({id:1})">首頁</a></li>
<li ui-sref-active="active" ui-sref="music({id:2})"><a音樂</a></li>

<div class="content" ui-view> </div>