当前位置:   article > 正文

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

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

app.js中的写法:

  1. var app=angular.module('birthdayApp',['ngRoute']);
  2. app.config(function($routeProvider){
  3. $routeProvider
  4. .when('/', {
  5. templateUrl: 'views/login.html',
  6. controller: 'loginCtr',
  7. controllerAs: 'login'
  8. })
  9. .when('/regist', {
  10. templateUrl: 'views/regist.html',
  11. controller: 'registCtr',
  12. controllerAs: 'regist'
  13. })
  14. .otherwise({
  15. redirectTo: '/'
  16. });
  17. });

需要导入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中的写法:

  1. var app=angular.module('birthdayApp',['ui.router']);
  2. app.config(function($stateProvider,$urlRouterProvider){
  3. $urlRouterProvider.otherwise('/login');
  4. $stateProvider
  5. .state('login', {
  6. url: "/login",
  7. views: {
  8. 'view': {
  9. templateUrl: 'views/login.html',
  10. controller: 'loginCtr'
  11. }
  12. }
  13. });
  14. $stateProvider
  15. .state('regist', {
  16. url: "/regist",
  17. views: {
  18. 'view': {
  19. templateUrl: 'views/regist.html',
  20. controller: 'registCtr'
  21. }
  22. }
  23. });
  24. });

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

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

html中的写法:

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




声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/1009345
推荐阅读
相关标签
  

闽ICP备14008679号