Question

我的index.html文件如下..

<div id="main">
    <div ui-view>
  </div>

我的home.html文件如下..

<div login id="loginBox"></div>
  <div ng-show="users.length">
  <hr/>

  <div ui-view="header"></div>

  <div ui-view="footer"></div>

我的app.js文件如下

var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  myapp.config(['$stateProvider', '$routeProvider' ,'$urlRouterProvider',function($stateProvider,$routeProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');




$stateProvider
                .state('home', {
                    abstract:true,
                    url : "/home",
                    templateUrl : 'views/home.html',
                    controller : 'homeCtrl'
                    // views: {
                    // "": {
                    // url:"/home",
                    // templateUrl: 'views/home.html',
                    // controller: 'homeCtrl'
                    // },
                    // "header@home": {
                    // templateUrl: "views/header.html"
                    // }
                    // }
                })

                .state('header', {
                    url : '/header',
                    templateUrl : 'views/header.html'
                        })
                .state('footer', {
                    url : '/footer',
                    templateUrl : 'views/footer.html'
                        })     
       }]);

哪个不完整。我应该如何设计我的app.js，以便我可以拥有以下视图流。

Home是父级，其中页眉和页脚是视图..

Answer 1

就像这样......

$urlRouterProvider.otherwise("home");

                $stateProvider
                .state('home', {
                    //abstract:true,
                    // url : "/home",
                    // templateUrl : 'views/home.html',
                    // controller : 'homeCtrl'
                    url:'',
                    views: {
                        '': {
                            //url:"/home",
                            templateUrl: 'views/home.html',
                            controller: 'homeCtrl'
                        },
                        "header@home": {
                            templateUrl: "views/header.html"
                        },
                        "footer@home": {
                            templateUrl: "views/footer.html"
                        },
                        "container@home": {
                            templateUrl: "views/container.html"
                        }

                    }
                })

Answer 2

2个选项：

您可以使用默认的角度ngRoute模块（参考示例here和here）。

你会有这样的事情：

index.html：（包含您网站的布局，包括页眉/页脚）

<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div id="header"></div>
<div ng-view></div>
<div id="footer"></div>

home.html：（动态加载动态内容的部分视图）

<div id="content">
Your home content.
</div>

<强> app.js：

var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
    when('/home', {
      templateUrl: 'partials/home.html',
      controller: 'HomeCtrl'
    }).
    when('/page2', {
      templateUrl: 'partials/page2.html',
      controller: 'Page2Ctrl'
    }).
    otherwise({
      redirectTo: '/home'
    });
}]);

或者您可以使用ui-router获得更高级的路由功能。请参阅此very good tutorial以开始使用。

<强> - 编辑

使用$ stateProvider，here is an example in Plunker与索引一起使用，链接到子视图“home”。

Angular UI-路由器继承视图

2 个答案: