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 をどのように設計すればよいですか。

ホームは、ヘッダーとフッターがビューである親です。

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 つのオプション:

  • デフォルトのangular ngRouteモジュールを使用できます（こことここの例を参照してください）。

次のようなものがあります。

index.html: (ヘッダー/フッターを含む Web サイトのレイアウトが含まれます)

<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 を使用できます。開始するには、この非常に優れたチュートリアルを参照してください。

-編集

$stateProvider を使用して、サブビュー「ホーム」にリンクするインデックスを操作する Plunker の例を次に示します。

于 2013-11-12T13:05:06.940 に答える