angularjsにおけるng-routeとui-routerの簡単な使い方のコード比較
1690 ワード
1、ng-routeを使う:
app.jsの書き方:
angular-route.jsをインポートする必要があります.
htmlの書き方:
2、ui-router:app.jsの書き方を使う:
angular-ui-router.jsをインポートする必要があります(ダウンロードする必要があります):
htmlの書き方:
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>