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

发布时间：2020-12-17 09:43:49 所属栏目：安全来源：网络整理

导读：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.ro

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>' });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!