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

来源：互联网发布：淘宝上购买刀具违法吗编辑：程序博客网时间：2024/05/07 00:28

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