拆分角模板成多个小模板 [英] Split Angular template into multiple small templates
问题描述
在我的角度应用程序，我想明白了什么是分裂我的网页成组件的正确途径。
In my Angular app, I'm trying to understand what would be the right way to split my page into components.
进行更改之前的页面类似于：
The page before the change is similar to:
<div id='settings'>
<p class='controlGroup' ng-controller="FirstCtrl">
<label class='control-label'>First Control</label>
<div class="control">
<!-- some inputs -->
</div>
</p>
<p class='controlGroup' ng-controller="SecondCtrl">
<label class='control-label'>Second Control</label>
<div class="control">
<!-- some inputs -->
</div>
</p>
</p>
<button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button>
</div>
虽然控制逻辑分离到两个不同的控制器，我想他们的模板分开为好，所以这将是易于重用它们或将其移动到不同的位置。
Although the control logic is separated to two different controllers, I want to separate theirs template as well, so it would be easy to reuse them or to move them to a different location.
我看到很多选项： NG-包括，剧本标记等
I see many options: ng-include, script tag etc.
什么是做正确的方式？
推荐答案
使用NG-包括你可以有不同的模板，并简单地使用它，它是很好的时候，你要加载基于不同的看法他们注入你的DOM的部分像点击一个导航按钮或者一个变量左右不同的情况，请注意，NG-包括还编译模板，这样你就可以在模板中使用控制器和其它角度的功能和指令，这里是从angularjs文档的例子：
Using ng-include you can have different templates and simply inject them into parts of your DOM using it, it's good for times when you want to load different views based on different situations like clicking a nav button or a variable or so, please note that ng-include also compiles the template so you can use controllers and other angular features and directives in the template, here is an example from angularjs docs:
这里是你的主HTML：
here is your main html:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
<hr/>
<div ng-include src="template.url"></div>
</div>
</body>
</html>
和这里是JS：
function Ctrl($scope) {
$scope.templates =
[ { name: 'template1.html', url: 'template1.html'}
, { name: 'template2.html', url: 'template2.html'} ];
$scope.template = $scope.templates[0];
}
这篇关于拆分角模板成多个小模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
