javascript - example - angular中文




複雜的部分和模板嵌套 (4)

更新: github.com/angular-ui/ui-router

對於小節來說,使用ng-include中的字符串非常簡單:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

或者你可以創建一個對象,以防萬一你有鏈接到整個地方的子頁面:

$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

或者你甚至可以使用$routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

您也可以將ng控制器放在每個部分的最頂層

我的問題涉及如何在AngularJS應用程序中處理複雜的模板嵌套(也稱為partials )。

描述我的情況的最佳方式是使用我創建的圖像:

正如你所看到的,這可能是一個相當複雜的應用程序,有很多嵌套模型。

該應用程序是單頁面的,所以它加載了一個index.html ,它在DOM中包含一個div元素,並帶有ng-view屬性。

對於圓1 ,您會看到有一個Primary導航可以將相應的模板加載到ng-view 。 我通過將$routeParams傳遞給主應用程序模塊來做到這一點。 以下是我的應用程序中的一個示例:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

在圈2中 ,加載到ng-view的模板有一個額外的子導航 。 這個子導航然後需要加載模板到它下面的區域 - 但由於ng-view已被使用,我不知道如何去做這件事。

我知道我可以在第一個模板中包含其他模板,但這些模板都將非常複雜。 我希望將所有模板分開,以便使應用程序更容易更新,並且不必依賴於為了訪問子模塊而必須加載的父模板。

在圈3中 ,你可以看到事情變得更加複雜。 子導航模板可能會有第二個子導航 ,需要將它自己的模板加載到圓圈4的區域中

一個人如何構建一個AngularJS應用程序來處理這種複雜的模板嵌套,同時保持它們彼此獨立?



您也可以為同樣的目的檢出這個庫:

http://angular-route-segment.com

它看起來像你在找什麼,比使用ui-router更簡單。 從演示網站

JS:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/:id',      's1.itemInfo.overview').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).
within().
    segment('home', {
        templateUrl: 'templates/section1/home.html'}).
    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).
    within().
        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

頂級HTML:

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

嵌套的HTML:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>

我也在Angular的嵌套視圖中掙扎。

一旦我擁有了github.com/angular-ui/ui-router我就知道我永遠不會回到角度默認路由功能。

這是一個使用多層視圖嵌套的示例應用程序

app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");

$stateProvider
    .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html',
        controller: 'view1.MainController'
    })
    .state('view1.nestedViews', {
        url: '/view1',
        views: {
            'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
            'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
            'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
        }
    })

    .state('view2', {
        url: '/view2',
    })

    .state('view3', {
        url: '/view3',
    })

    .state('view4', {
        url: '/view4',
    });
});

可以看出有4個主視圖(view1,view2,view3,view4),view1有3個子視圖。







angularjs