AngularJS 學習筆記——路由配置（ui-router）

時間 2019-11-11

標籤 angularjs 學習筆記路由配置 router 欄目 AngularJS 简体版

原文原文鏈接

1、參考例子javascript

<!DOCTYPE html>  
<html ng-app="App">  
<head>  
    <meta charset="UTF-8">  
    <title>AngularJS 路由-參數,模塊配置,佈局模板</title>  
</head>  
 
<body>  
    <div class="wrapper">  
        <!-- 導航菜單 -->  
        <ul class="meb-menu" menu>
            <li class="ico1"><a ui-sref="member" title="個人我的中心">個人我的中心</a></li>
            <li class="ico2"><a ui-sref="" title="發佈項目">發佈項目</a></li>
            <li class="ico3"><a ui-sref="myproject" title="個人項目">個人項目</a></li>
            <li class="ico4"><a ui-sref="myaccount" title="個人帳戶">個人帳戶</a></li>
            <li class="ico5"><a ui-sref="details" title="消費明細">消費明細</a></li>
            <li class="ico6"><a ui-sref="capital" title="帳戶資金">帳戶資金</a></li>
        </ul>  
        <!-- 內容 -->  
        <div class="content">  
            <!--4 佈局模板 佔位符 -->  
            <div ui-view></div> 
        </div>  
  
    </div>  
    <!-- AngularJS核心框架 -->  
    <script src="js/angular.min.js" type="text/javascript"></script>
    <!-- 1 路由模塊理解成插件 -->  
    <script src="js/angular-ui-router.js" type="text/javascript"></script>  

    <script>  
      
        //2 實例化模塊（App）時，當成依賴傳進去（模塊名稱叫ui.router）  
        var App = angular.module('App',['ui.router']); 
  
        //3 配置路由模塊，使其正常工做   
        App.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('member'); //默認連接  

        $stateProvider
            .state('member',{
                // template: '<h1>contact US Pages!</h1>', 字符串視圖
                url : '/member',
                templateUrl : 'member/member.html'
            })
            .state('myproject',{
                url : '/myproject',
                templateUrl : 'member/myproject.html',
            })
            .state('myaccount',{
                url : '/myaccount',
                templateUrl : 'member/myaccount.html',
                controller: 'ContactController' // 定義控制器 
            })
            .state('details',{
                url : '/details',
                templateUrl : 'member/details.html',
            })
            .state('capital',{
                url : '/capital',
                templateUrl : 'member/capital.html',
            })
        });
  
        // 列表控制器  
        App.controller('ContactController', ['$scope', '$http', function ($scope, $http) {  
  
            $http({  
                url: 'contact.php'  
            }).success(function (info) {  
                $scope.content = info;  
            });  
  
        }]);  
  
    </script>  
  
</body>  
</html>

2、平級嵌套php

$stateProvider.state("home",{
    views: {
        "":{template: "<h1>hi</h1>"}, //<div ui-view></div>
        "data": {template: "<div>data</div>"}, //<div ui-view="data"></div>
        "tabledata": {templateUrl: 'report-table.html',},
   }
});

3、父級嵌套html

.state('home', {
            url: "/home",
            templateUrl: "sources/tpls/home.html",
            //abstract: true,
            controller: 'homeCtrl',
        })
        .state('home.popup-current', {
            url: "/popup-current?:deviceid",
            views: {
                "popup":{
                    templateUrl:"sources/tpls/popup/popup-current.html",
                    controller:'currentMachineCtrl'
                },
            }
        })
        .state('home.popup-history', {
            url: "/popup-history?:deviceid&year&month&level",
            views: {
                "popup":{
                    templateUrl:"sources/tpls/popup/popup-history.html",
                    controller: 'reportCtrl'
                },
            }
        });

4、相對命名與絕對命名java

<!-- index.html (root unnamed template) -->
<body ng-app>
<div ui-view></div> <!-- contacts.html plugs in here -->
<div ui-view="status"></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>
<div ui-view="detail"></div>

<!-- contacts.detail.html -->
<h1>Contacts Details</h1>
<div ui-view="info"></div>

$stateProvider
  .state('contacts', {
    // 根狀態，對應的父模板則是index.html
    // 因此 contacts.html 將被加載到 index.html 中未命名的 ui-view 中
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        // 嵌套狀態，對應的父模板是 contacts.html
        // 相對命名
        // contacts.html 中 <div ui-view='detail'/> 將對應下面
        "detail" : { },   
         
        // 相對命名
        // 對應 contacts.html 中的未命名 ui-view <div ui-view/>
        "" : { }, 
        // 絕對命名
        // 對應 contacts.detail.html 中 <div ui-view='info'/>
        "info@contacts.detail" : { }
        // 絕對命名
        // 對應 contacts.html 中 <div ui-view='detail'/>
        "detail@contacts" : { }
        // 絕對命名
        // 對應 contacts.html 中的未命名 ui-view <div ui-view/>
        "@contacts" : { }
        // 絕對命名
        // 對應 index.html 中 <div ui-view='status'/> 
        "status@" : { }
        // 絕對命名
        // 對應 index.html 中 <div ui-view/>
        "@" : { } 
  });

參考資料api