AngularJS Router原生路由和Angular UI Router嵌套路由

1、安装
      npm install angular-ui-router

2、引入文件 angular-ui-router.min.js 
      <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-ui-router.min.js"></script>
      <script src="js/angular-ui-router.min.js"></script>

3、引入依赖,把 ui.router 添加到模型中
      var myApp = angular.module("myApp",['ui.router']);

4、把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入
   myApp.config(function ($stateProvider, $urlRouterProvider) {
       $stateProvider
          .state("PageTab", {
              url: "/PageTab",
              templateUrl: "PageTab.html"
          })
          .state("PageTab.Page1", {
              url: "/Page1",
              templateUrl: "Page-1.html"
          })
          .state("PageTab.Page2", {
              url: "/Page2",
              templateUrl: "Page-2.html"
          })
          .state("PageTab.Page3", {
              url: "/Page3",
              templateUrl: "Page3.html"
          });
   });
   或
   myApp.config(function ($stateProvider, $urlRouterProvider) {
       $stateProvider
           .state('tab1', {
               name: 'tab1',
               url: '/tab1',
               template: '<div class="tab tab1"><p>Caerphilly fromage che.</p></div>'
           })
           .state('tab2', {
               name: 'tab2',
               url: '/tab2',
               template: '<div class="tab tab2"><p>Airedale hard cheese r.</p></div>'
           })
           .state('tab3', {
               name: 'tab3',
               url: '/tab3',
               template: '<div class="tab tab3"><p>Cheese and biscuits st.</p></div>'
           })
   })

------------------------------------------------------------------------------------------------------------------
1、原生路由 ngRoute

2、第三方路由,嵌套路由 ui-router
      使用下面三种之一的方式来定义视图使用的模板:template, templateUrl, templateProvider
      template:字符串方式的模板内容,或者是一个返回 HTML 的函数
      templateUrl:模板的路径,或者返回模板路径的函数
      templateProvider:返回 HTML 内容的函数

      例如
      $stateProvider.state('home', {
        template: '<h1>Hello {{ name }}</h1>'
      });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值