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. Markdown学习 Day 001

    Markdown学习 Day 001 快速标题 "#" + "空格" + "标题内容",回车即可,PS. "#"数量n代 ...

  2. 轻松集成腾讯云短信服务实现短信发送（Java实现）

    不论是阿里云还是腾讯云,要想在网站上实现短信发送功能,首先得保证你的网站域名是通过备案的,因为短信签名是需要用到备案过的域名截图,所以域名通过了,申请很快就会审批成功了. (说点题外话,备案的话,需要 ...

  3. windwos10安装mysql8.0.20详细图文教程

    windwos10安装mysql8.0.20详细图文教程 1.浏览器搜索mysql下载安装 地址:https://dev.mysql.com/downloads/mysql/ 2.登录或者不登录下载 ...

  4. ldirectord

    试想,LVS作为前端负载均衡设备,当后端服务器宕机时,LVS还会把用户请求发送到该服务器上,这对用户体验来说是极其糟糕的,因为用户的请求无法得到处理.那么是否有一种机制,能保证后端服务器的是否正常?或 ...

  5. The Data Way Vol.4｜开源是创造软件诸多方法中最好的一种形式

    关于「The Data Way」 「The Data Way」是由 SphereEx 公司出品的一档播客节目.这里有开源.数据.技术的故事,同时我们关注开发者的工作日常,也讨论开发者的生活日常:我们聚 ...

  6. 题解 Christmas Game

    题目传送门 题目大意 给出 \(t\) 个 \(n\) 个点 \(m\) 条边的无向图,每次可以从任意一棵树选择一条边删掉,然后该树不与根(为 \(1\) )联通的部分被删掉.不能操作的人输.问谁有必 ...

  7. vj-E题Ehab and Path-etic MEXs

    Ehab and Path-etic MEXs 题意:给定一棵树所有的边,对所有的边进行标号,询问任意两点Mex的最大值最小的的标号方案(输出任何一种). Mex(u,v)表示从u到v的简单路径中没有 ...

  8. 4.1 The Example Domain 领域示例代码

    4.1 The Example Domain 领域示例代码 The examples will use some concepts those are used by GitHub, like Iss ...

  9. 痞子衡嵌入式：超级下载算法RT-UFL v1.0在IAR EW for Arm下的使用

    痞子衡主导的"学术"项目 <RT-UFL - 一个适用全平台i.MXRT的超级下载算法设计> v1.0 版发布近 4 个月了,部分客户已经在实际项目开发调试中用上了这个 ...

  10. springcloud (一）系统架构演变之路

    演变过程 从传统架构(单点应用)→分布式架构(以项目进行拆分)→SOA架构(面向服务架构)→微服务架构 1 传统架构 其实就是ssh架构或者ssm架构,属于单点应用,把整个开发业务模块都会在一个项目中 ...