javascript - 部分和模板的复杂嵌套(Complex nesting of partials and templates)

Question

My question involves how to go about dealing with complex nesting of templates (also called partials ) in an AngularJS application.

(我的问题涉及如何在AngularJS应用程序中处理模板 （也称为部分 ）的复杂嵌套。)

The best way to describe my situation is with an image I created:

(描述我的情况的最好方法是使用我创建的图像：)

As you can see this has the potential to be a fairly complex application with lots of nested models.

(正如您所看到的，这可能是一个包含大量嵌套模型的相当复杂的应用程序。)

The application is single-page, so it loads an index.html that contains a div element in the DOM with the ng-view attribute.

(该应用程序是单页面的，因此它使用ng-view属性加载一个index.html ，其中包含DOM中的div元素。)

For circle 1 , You see that there is a Primary navigation that loads the appropriate templates into the ng-view .

(对于圆圈1 ，您会看到有一个主导航将适当的模板加载到ng-view 。)

I'm doing this by passing $routeParams to the main app module.

(我是通过将$routeParams传递给主app模块来实现的。)

Here is an example of what's in my app:

(这是我的应用程序中的一个示例：)

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' })       

    }]);

In circle 2 , the template that is loaded into the ng-view has an additional sub-navigation .

(在圆圈2中 ，加载到ng-view的模板具有附加的子导航 。)

This sub-nav then needs to load templates into the area below it - but since ng-view is already being used, I'm not sure how to go about doing this.

(然后这个子导航需要将模板加载到它下面的区域 - 但由于ng-view已被使用，我不知道如何去做。)

I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex.

(我知道我可以在第一个模板中包含其他模板，但这些模板都非常复杂。)

I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.

(我想将所有模板分开，以使应用程序更容易更新，并且不必依赖于必须加载的父模板才能访问其子代。)

In circle 3 , you can see things get even more complex.

(在第3圈中 ，您可以看到事情变得更加复杂。)

There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

(子导航模板可能具有第二个子导航 ，需要将其自己的模板加载到圆圈4中的区域)

How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

(如何构建AngularJS应用程序来处理模板的这种复杂嵌套，同时保持它们彼此分离？)

  ask by PhillipKregg translate from so

Answer 1

UPDATE: Check out AngularUI's new project to address this problem(更新： 查看AngularUI的新项目以解决此问题)

---

For subsections it's as easy as leveraging strings in ng-include:

(对于小节，它就像在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>

Or you can create an object in case you have links to sub pages all over the place:

(或者你可以创建一个对象，以防你到处都有到子页面的链接：)

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

Or you can even use $routeParams

(或者你甚至可以使用$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>

You can also put an ng-controller at the top-most level of each partial

(您还可以将ng控制器放在每个部分的最顶层)