angularjs中ng-route和ui-router简单用法的代码比较

最新推荐文章于 2024-06-18 14:24:57 发布

转载最新推荐文章于 2024-06-18 14:24:57 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/28623

文章标签：

#ui #javascript #ViewUI

本文对比分析了Angular中两个流行的路由框架：ng-route和ui-router，介绍了它们的基本用法、配置方式及在HTML中的实现，并讨论了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用ng-route：

app.js中的写法：

var app=angular.module('birthdayApp',['ngRoute']);
  app.config(function($routeProvider){
      $routeProvider
      .when('/', {
        templateUrl: 'views/login.html',
        controller: 'loginCtr',
        controllerAs: 'login'
      })
      .when('/regist', {
        templateUrl: 'views/regist.html',
        controller: 'registCtr',
        controllerAs: 'regist'
      })
      .otherwise({
        redirectTo: '/'
      });
	  
  });

需要导入angular-route.js：

<script src='./angular-1.4.0-rc.2/angular-route.js'></script>

html中的写法：

<div ng-view></div>

2、使用ui-router:
app.js中的写法：

var app=angular.module('birthdayApp',['ui.router']);
app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/login');
    $stateProvider
    .state('login', {
	url: "/login",
	views: {
	   'view': {
		templateUrl: 'views/login.html',
		controller: 'loginCtr'
	   }
	}
   });
   $stateProvider
    .state('regist', {
	url: "/regist",
	views: {
	   'view': {
		templateUrl: 'views/regist.html',
		controller: 'registCtr'
	   }
	}
   });
});

需要导入angular-ui-router.js(需要下载):

<script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>

html中的写法：

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