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

学习 ui-router - 多个命名的视图

http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/app

AngularJS中ui-router全攻略

http://www.cnblogs.com/darrenji/p/5167999.html框架