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的更多相关文章

  1. 使用-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 ...

  2. 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& ...

  3. 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 ...

  4. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  5. part 4 AngularJS ng src directive

  6. 16.语句include和require的区别是什么?为避免多次包含同一文件，可用(?)语句代替它们?

    require->require是无条件包含也就是如果一个流程里加入require,无论条件成立与否都会先执行 require include->include有返回值,而require没 ...

  7. Vue.js（16）之 directive自定义指令

    推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...

  8. 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,比如我这次就是这步没做好,合并代码时 ...

  9. AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq

    报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.

随机推荐

  1. P5644-[PKUWC2018]猎人杀【NTT,分治】

    正题 题目链接:https://www.luogu.com.cn/problem/P5644 题目大意 \(n\)个人,每个人被选中的权重是\(a_i\).每次按照权重选择一个没有死掉的人杀死,求第\ ...

  2. GDOI 2021 退役记

    Day -n 时常想自己不学OI会怎样,经常畏惧自己其实没有心里想的那样有能力,去机房来麻痹自己 从 3.21 始加大频率刷题,复习以前都学会,而现在都被抛在脑后的算法 反正都要退役了,成绩也得鲜亮点 ...

  3. 数值计算：四阶龙格-库塔法 for 二阶微分方程

    引言 考虑存在以下二阶偏微分方程 \[\begin{align} f_2 \cdot \ddot{X(t)}+f_1 \cdot \dot{X(t)} +f_0 \cdot {X(t)} =F(t) ...

  4. Windows下node-gyp查找VS安装路径简单解析

    node-gyp的作用我已经不想赘述了,这里给一个我之前文章的链接:cnblogs看这里,知乎看这里.本文主要从源码入手,介绍node-gyp查找VisualStudio的过程 为了方便我们研究nod ...

  5. 关于dp那些事

    拿到一道题,先写出状态转移方程,再优化时间复杂度 状态优化: 对于状态可累加 \(e.g.dp[i+j]=dp[i]+dp[j]+i+j\) 的,用倍增优化 决策优化: \(e.g.dp[i][j]= ...

  6. 题解 Yuno loves sqrt technology II

    题目传送门 题目大意 有\(n\)个数,\(m\)个查询,每次查询一个区间内的逆序对个数. \(n,m\le 10^5\) 思路 其实是为了锻炼二次离线才做这道题的. 不难想到可以有一个\(\Thet ...

  7. Miller-Rabin学习笔记

    首先给出两个定理: 1.费马小定理 设p是一个素数,a是一个整数,且不是p的倍数,那么 \(a^{p−1} \equiv\ 1 \pmod p\) 2.二次探测定理 若\(p\)是素数,\(x\)是一 ...

  8. IP包头结构

    版本号(Version): 长度4比特.标识目前采用的IP协议的版本号.一般的值为0100(IPv4),0110(IPv6) IP包头长度(Header Length): 长度4比特.这个字段的作用是 ...

  9. python filter lambda 的使用

    lambda 匿名函数的使用 >>> a=lambda x : x in "1234567890.," >>> a("asd" ...

  10. UltraSoft - Beta - 项目展示

    UltraSoft - DDL Killer - Beta 项目展示 团队介绍 CookieLau fmh 王 FUJI LZH DZ(转出) Monster hdl(转入) PM & 后端 ...