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

来源：互联网发布：药品条形码数据库编辑：程序博客网时间：2024/05/16 16:07

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>

0 0