Part 16 ng include directive in AngularJS
ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application.
The value of ng-include directive can be the name of the HTML page that you want to reuse or a property on the $scope object that points to the reusable HTML page.
EmployeeList.html : This is the HTML page that we intend to reuse on multiple HTML pages
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.salary}} </td>
</tr>
</tbody>
</table>
Script.js :
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender: "Male", salary: 55000 },
{ name: "Sara", gender: "Female", salary: 68000 },
{ name: "Mark", gender: "Male", salary: 57000 },
{ name: "Pam", gender: "Female", salary: 53000 },
{ name: "Todd", gender: "Male", salary: 60000 }
];
$scope.employees = employees;
});
HTMLPage1.html : This is the HTML page where we want to reuse EmployeeList.html. Notice that we are using ng-include directive and the value for it is the name of the HTML file that we want to reuse.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div ng-include="'EmployeeList.html'">
</div>
</div>
</body>
</html>
In this example, we have specified the name of the HTML file in the view. You can also have a property attached to the $scope object that points to the HTML file that you want to reuse , and use that property with ng-include directive. Here are the changes required to use a model property with ng-include directive.
Script.js : Notice, in the controller function we have employeeList property attached to the $scope object. This property points to the EmployeeList.html file that we want to reuse.
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) { var employees = [
{ name: "Ben", gender: "Male", salary: 55000 },
{ name: "Sara", gender: "Female", salary: 68000 },
{ name: "Mark", gender: "Male", salary: 57000 },
{ name: "Pam", gender: "Female", salary: 53000 },
{ name: "Todd", gender: "Male", salary: 60000 }
]; $scope.employees = employees;
$scope.employeeList = "EmployeeList.html";
});
HTMLPage1.html : Set the property employeeList that you have attached to the $scope object, as the value for ng-include directive
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div ng-include="employeeList"></div>
</div>
</body>
</html>
Example : Create an HTML page with a dropdownlist that allows the user to select the view - Table or List. Depending on the selection we want to load the respective HTML page into the current HTML page i.e HTMLPage1.html
If the user selects Table from the dropdownlist, the employee data should be presented using a Table
If the user selects List from the dropdownlist, the employee data should be presented using an unordered list
EmployeeTable.html : This HTML page presents the employee data using a table element
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.salary}} </td>
</tr>
</tbody>
</table>
EmployeeList.html : This HTML page presents the employee data using 2 unordered list elements
<ul ng-repeat="employee in employees">
<li>
{{employee.name}}
<ul>
<li>{{employee.gender}}</li>
<li>{{employee.salary}}</li>
</ul>
</li>
</ul>
Script.js : The controller function attaches employeeView property to the $scope object and sets it to EmployeeTable.html. This means when the page is initially loaded the employee data will be presented using a table.
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) { var employees = [
{ name: "Ben", gender: "Male", salary: 55000 },
{ name: "Sara", gender: "Female", salary: 68000 },
{ name: "Mark", gender: "Male", salary: 57000 },
{ name: "Pam", gender: "Female", salary: 53000 },
{ name: "Todd", gender: "Male", salary: 60000 }
]; $scope.employees = employees;
$scope.employeeView = "EmployeeTable.html";
});
HTMLPage1.html : This HTML page loads either the EmployeeTable.html or EmployeeList.html page depending on the item the user has selected from the dropdownlist.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Select View :
<select ng-model="employeeView">
<option value="EmployeeTable.html">Table</option>
<option value="EmployeeList.html">List</option>
</select>
<br /><br />
<div ng-include="employeeView">
</div>
</div>
</body>
</html>
Part 16 ng include directive in AngularJS的更多相关文章
- 使用-MM生成include指令和依赖生成(make include directive and dependency generation with -MM)
I want a build rule to be triggered by an include directive if the target of the include is out of d ...
- angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- Part 6 AngularJS ng repeat directive
ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- part 4 AngularJS ng src directive
- 16.语句include和require的区别是什么?为避免多次包含同一文件，可用(?)语句代替它们?
require->require是无条件包含也就是如果一个流程里加入require,无论条件成立与否都会先执行 require include->include有返回值,而require没 ...
- Vue.js（16）之 directive自定义指令
推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...
- angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?
1,错误如图所示 简单说下错误原因是:没有js没有注册进去. 解决方法: 1.看下index.html有没有引入你的js文件. 2.看下app.js有没有注册js,比如我这次就是这步没做好,合并代码时 ...
- AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq
报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.
随机推荐
- HCNP Routing&Switching之路由引入导致的问题及解决方案
前文我们了解了路由引入相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15359902.html:今天我们来讨论下由于路由引入所导致的问题以及怎么避免此 ...
- 使用Jacoco统计服务端代码覆盖情况实践
一.背景 随着需求的迭代,需求增加的同时,有可能会伴随着一些功能的下线.如果不对系统已经不用的代码进行梳理并删除不需要的代码,那么就会增加系统维护成本以及理解成本.但经历比较长的迭代以及系统交接,可能 ...
- IDEA破解方法：重新刷新到30天【支持正版】
IDEA破解方法:重新刷新到30天[支持正版] 步骤: 导入plugins.zhile.io 进入File-->Settings-->Plugins 点设置(齿轮符号)-->Mana ...
- 数值计算：Legendre多项式
Legendre多项式的概念以及正交特性在此不多作描述,可以参考数学物理方程相关教材,本文主要讨论在数值计算中对于Legendre多项式以及其导数的计算方法. Legendre多项式的计算 递推公式 ...
- 多项目如何高效协同合作 | springcloud系列之bus消息总线
前言 在springcloud config章节中我们完成了配种中心的搭建,以及通过配置中心完成配置的抽离通过springcloud config模块我们将配置抽离到git仓库中我们不必要每次为了改配 ...
- 【k8s】使用k8s部署一个简单的nginx服务
名词解释 Namespace 表示命名空间 Deployment 表示pod发布 Service 表示多个pod做为一组的集合对外通过服务的表示 kubectl 是k8s的命令行操作命令,可以创建和更 ...
- pdb的插拔测试
pdb的插拔测试:将pdb从一个cdb中,插拔到另一个cdb中. 源端pdb unplug SQL> select instance_name from v$instance; INSTANCE ...
- 每日总结：Java基本语法 （2021.9.23）
对象:对象是类的一个实例,有状态和行为. 类:类是一个模板,它描述一类对象的行为和状态. 方法:方法就是行为,一个类可以有很多方法. 实例变量:每个对象都有独特的实例变量,对象的状态由这些实 ...
- 关于十二生肖的数学发现（C++）
把数字看成是年份,然后根据生肖赋值.这里把鼠年赋值为1,牛年赋值为2,虎年赋值为3,兔年赋值为4,龙年赋值为5,蛇年赋值为6,马年赋值为7,羊年赋值为8,猴年赋值为9,鸡年赋值为10,狗年赋值为11, ...
- Windows内核开发-9-32位和64位的区别
Windows内核开发-9-32位和64位的区别 32位的应用程序可以完美再64位的电脑上运行,而32位的内核驱动无法再64位的电脑上运行,或者64位的驱动无法在32位的应用程序上运行.这是为什么呢. ...