本文共 2029 字，大约阅读时间需要 6 分钟。
一、AngularJS ng-include指令
ng-include 指令用于包含外部的 HTML 文件。
包含的内容将作为指定元素的子节点。
ng-include 属性的值可以是一个表达式，返回一个文件名。
默认情况下，包含的文件需要包含在同一个域名下。
ng-include 指令作为元素使用:
所有的 HTML 元素都支持该指令。
| 值 | 描述 |
|---|---|
| filename | 文件名，可以使用表达式来返回文件名。 |
| onload | 可选， 文件载入后执行的表达式。 |
| autoscroll | 可选，包含的部分是否在指定视图上可滚动。 |
二、实例1，指定外部html文件
结论特别说明：
1.ng-include,如果单纯指定地址，必须要加引号 2.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册 3.ng-include,加载外部html中含有style标签样式可以识别 4.ng-inclue,记载外部html中的link标签可以加载html：
js：
/** 特别说明：* 1.ng-include,如果单纯指定地址，必须要加引号* 2.ng-include,加载外部html，script标签中的内容不执行，不能加载，如果需要控制器处理需要在主页中注册* 3.ng-include,加载外部html中含有style标签样式可以识别* 4.ng-inclue,记载外部html中的link标签可以加载*/var app = angular.module('myApp', []);app.controller('headCtrl', function ($scope) { $scope.users = ['张三'];}); 三、ng-include+ngAnimate动画实例1 html：
js：
/** bootstrap中tab切换可以指定自带的fade*/var app = angular.module('myApp', ['ngAnimate']);app.controller('headCtrl', function ($scope) { $scope.users = ['张三'];});四、ng-include+ngAnimate动画实例2 特别说明：
1.ng-include的外部html缓存加载，第一次从服务器加载，第二次从缓存加载 2.好像没有提供自定义控制缓存的接口js：
/** 特别说明：* 1.ng-include的外部html缓存加载，第一次从服务器加载，第二次从缓存加载* 2.好像没有提供自定义控制缓存的接口*/var app = angular.module('myApp', ['ngAnimate']);app.controller('headCtrl', function ($scope) { $scope.users = ['张三'];});app.controller('myCtrl', function ($scope) { $scope.tabClick = function (url) { $scope.tabUrl = url; }});更多： 转载地址：http://hcogi.baihongyu.com/