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

本文对比分析了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>




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值