1

我的 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 是父级，其中页眉和页脚是视图。

4

2 回答 2

2

它像这样工作..

$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"
                        }

                    }
                })
于 2013-11-13T07:23:46.283 回答
1

2个选项：

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

你会有这样的事情：

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>

应用程序.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 获得更高级的路由功能。请参阅此非常好的教程以开始使用。

-编辑

使用 $stateProvider，这是 Plunker中使用索引的示例，链接到子视图“home”。

于 2013-11-12T13:05:06.940 回答