AngularJS基础教程
ng-include
前言
AngularJS 提供了一个加载模板的指令：ng-include。
加载HTML文件模板
在项目中新增一个文件，命名为 template.html，删掉 IDE 自动生成的所有代码，输入以下内容并保存：
<div>这是来自模板 template.html 的内容</div>
再创建一个名为 index.html 的文件，使其内容为：
<!DOCTYPE html>
<html>
</html>
<head>
<meta charset="utf-8" />
<title>ng-include</title>
<script src="js/angular.min.js"></script>
</head>
<title>ng-include</title>
<script src="js/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<script type="text/javascript">
</body>
<div>Hello</div>
<div ng-include="templateUrl"></div>
</div>
<div ng-include="templateUrl"></div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
</script>
app.controller('myController', function ($scope) {
$scope.templateUrl = 'template.html';
});
在浏览器中查看：
从运行结果可看出，模板文件 template.html 中的内容被加载到了当前网页上。
加载当前页定义的模板
我们还可以将模板直接定义在当前网页中：
<!DOCTYPE html>
<html>
</html>
<head>
<meta charset="utf-8" />
<title>ng-include</title>
<script src="js/angular.min.js"></script>
</head>
<title>ng-include</title>
<script src="js/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<script type="text/javascript">
</body>
<div>Hello</div>
<div ng-include="templateUrl"></div>
<div ng-include="tpl"></div>
<script type="text/ng-template" id="template2">
</div>
<div ng-include="templateUrl"></div>
<div ng-include="tpl"></div>
<script type="text/ng-template" id="template2">
<div>这是来自当前页定义的模板</div>
</script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
</script>
app.controller('myController', function ($scope) {
$scope.templateUrl = 'template.html';
$scope.tpl = 'template2';
});
$scope.tpl = 'template2';
在网页中查看：
另一种写法
<!DOCTYPE html>
<html>
</html>
<head>
<meta charset="utf-8" />
<title>ng-include</title>
<script src="js/angular.min.js"></script>
</head>
<title>ng-include</title>
<script src="js/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myController">
<script type="text/javascript">
</body>
<div>Hello</div>
<div ng-include src="templateUrl"></div>
<div ng-include src="tpl"></div>
<script type="text/ng-template" id="template2">
</div>
<div ng-include src="templateUrl"></div>
<div ng-include src="tpl"></div>
<script type="text/ng-template" id="template2">
<div>这是来自当前页定义的模板</div>
</script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
</script>
app.controller('myController', function ($scope) {
$scope.templateUrl = 'template.html';
$scope.tpl = 'template2';
});
$scope.tpl = 'template2';
这种写法和上面的写法是完全等价的。
最后，来个广告
若你觉得此文不错，请分享，若认为尚需改进，请点讚。