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