angular ng-route和ui-route

在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>  

 

posted @ 2017-06-25 21:42  UniverseWang  阅读(191)  评论(0编辑  收藏  举报