AngularJS中三层ui-view嵌套

最新推荐文章于 2017-12-19 22:15:00 发布

web_cgh

最新推荐文章于 2017-12-19 22:15:00 发布

阅读量6.5k

点赞数

文章标签： angularjs ui-view 嵌套 ng

本文链接：https://blog.csdn.net/web_cgh/article/details/78491343

版权

一 项目目录结构

### 代码目录
                   
+-- js                                ---js文件
|   --- angular.js             
|   --- angular-ui-router.js                  
|   --- App.js                   
+-- tpl/                              ---html文件
|   +-- center.html                           
|   +-- guo.html                           
|   +-- jia.html                           
|   +-- min.html                           
|   +-- self.html                           
|   +-- user-address.html                           
|   +-- user-avatar.html                              
|   +-- user-center.html                              
|   +-- user-setting.html                              
--- index.html                      ---首页入口html文件

二代码部分

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/angular.js"></script>
  <script src="js/angular-ui-router.js"></script>
  <script src="js/App.js"></script>
</head>
<body data-ng-app="myApp">
<h1>AngularJS Home Page</h1>

<!--左侧边栏 -->
<aside ui-view="aside"></aside>
<!--页面正文区-->
<div ui-view></div>
</body>
</html>

2.App.js

var myApp = angular.module("myApp", ["ui.router"]);

myApp.config(function ($stateProvider, $urlRouterProvider) {

    // $urlRouterProvider.when("", "/PageTab/Page1");
    $urlRouterProvider.when("", "/user");

    $stateProvider
      .state('user', {
          url: '/user',
          templateUrl: 'tpl/center.html'
      })
      .state("user.home", {
          url: '/home',
          templateUrl: 'tpl/user-center.html'
      })
      .state("user.setting", {
          url: '/setting',
          templateUrl: 'tpl/user-setting.html',
          controller: 'bannerListCtrl'
      })
      .state("user.setting.min", {
          url: '/setting/min/{pageNum}',
          templateUrl: 'tpl/min.html'
      })
      .state("user.setting.guo", {
          url: '/setting/guo/{pageNum}',
          templateUrl: 'tpl/guo.html'
      })
      .state("user.setting.jia", {
          url: '/setting/jia/{pageNum}',
          templateUrl: 'tpl/jia.html'
      })
      .state("user.setting.self", {
          url: '/setting/self/{pageNum}',
          templateUrl: 'tpl/self.html'
      })
      .state("user.avatar", {
          url: '/avatar',
          templateUrl: 'tpl/user-avatar.html'
      })
      .state("user.address", {
          url: '/address',
          templateUrl: 'tpl/user-address.html'
      });

});
myApp.controller('bannerListCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
      $scope.boosttype = function (num) {
          console.log(num);
      };
      $scope.clickMe = function (index) {
          console.log("clickMe");
          console.log(index);
      }
  }]);

3.center.js

<div class="full_page">
  <div class="full_page_head">
    <nav class="ctn_navigate navi_menus">
      <a class="current" ui-sref=".home">个人主页</a>
      <a ui-sref=".setting">设置中心</a>
      <a ui-sref=".avatar">上传头像</a>
      <a ui-sref=".address">通信地址</a>
    </nav>
  </div>
  <div class="full_page_body" ui-view>
    <!-- 导航栏的内容在此显示-->
  </div>
</div>

4.user-address.html

<div>
  <div>
    <h1>user-address page</h1>
  </div>
</div>

5.user-avatar.html

<div>
  <div>
    <h1>user-avatar page</h1>
  </div>
</div>

6.user-center

<div>
  <div>
    <h1>user-center page</h1>
  </div>
</div>

7.user-setting.html

<div>
  <div>
    <h1>user-setting page</h1>
  </div>
  <div class="full_page">
    <div class="full_page_head">
      <nav class="ctn_navigate navi_menus">
        <a ng-click="boosttype(1)" class="current" ui-sref=".min({pageNum:1})">爱民</a>
        <a ng-click="boosttype(2)" ui-sref=".guo({pageNum:2})">爱国</a>
        <a ng-click="boosttype(3)" ui-sref=".jia({pageNum:3})">爱家</a>
        <a ng-click="boosttype(4)" ui-sref=".self({pageNum:4})">爱自己</a>
      </nav>
    </div>
    <div class="full_page_body" ui-view="">
      <!-- 导航栏的内容在此显示-->
    </div>
  </div>
</div>

8.guo.html

<div>
  <div>
    <h1>Page guo...</h1>
  </div>
</div>

9.jia.html

<div>
  <div>
    <h1>Page jia...</h1>
  </div>
</div>

10.min.html

<div>
  <div>
    <h1 ng-click="clickMe(110)">Page min...</h1>
  </div>
</div>

11.self.html

<div>
  <div>
    <h1>Page self...</h1>
  </div>
</div>

web_cgh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中三层ui-view嵌套

angularjs,ui-view,嵌套，ng
复制链接

扫一扫

AngularJS中三层ui-view嵌套

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