Differences in Ng-route and ng-ui-router in angular ($http)

Ngroute and Ui-router are not two separate parts, Ui-router is a community library to improve the functionality of Ngroute, can be used in multi-view (nested), the function is very powerful!

To fully understand the differences between the two, here I will add the $http request to compare the two,

1. Introduction of the file:

ngroute:<script src= "Angular-route.js" ></script>

ui-router:<script src= "Angular-ui-router.js" ></script>

2. Inject:

Ngroute: var app = angular. Module (' app ', [' Ngroute']);

Ui-router: var app = angular. Module (' app ', [' Ui.router']);

3. Configuration:

"Parameter control, judging condition, default designation"

Ngroute: app.config([' $routeProvider ', function ($routeProvider) {

$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 namespace bound to view can also be placed on a tag)

Multiple pass-through parameter modes:
URL: '/index/:id ',//(This is the hash value)
URL: '/index/{id:int} ',
URL: '/index/?id&name ',
templateurl: "Me-musiclist.html",
Template: "

              controller: "Lrxcontroller"
        })
             . State (' music ', {
                 URL : '/music/:id ',
                 templateurl: "me-musiclist.html",
                 controller: "Lrxcontroller"
             })
        //( Router page default specified first page)    
         $ Urlrouterprovider.otherwise (' index/1 ');

4. Controller: " dependent: $routeParams ', ' $stateParams ', callback: 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 Replace with then
         Console . log (res);
         $scope. musiclist  = res
     })
}]);

5. Directives and Views: " parameters, Ng-view." Ui-sref, Ui-view"

<li><a href= "#/index/1" > Popular </a></li>
<li><a href= "#/index/2" > Retro </a></li>

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

<!--(ui-sref-active view current activation status and set Class)
. Active a{
font-size:30px;
}-->

<li ui-sref-active= "Active" ><a ui-sref= "Home ({id:1})" > Home </a></li>
<li ui-sref-active= "Active" ui-sref= "music ({id:2})" ><a> musical </a></li>

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

Differences in Ng-route and ng-ui-router in angular ($http)