AngularJS SPA 应用中使用 ng-include 进行模板引入与优化-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 单页应用（SPA）中，我们经常需要使用模板来表示不同的页面。而在应用中使用 ng-include 指令，可以很方便地将一个模板文件引入到另一个模板中，提高重用性和可维护性，从而优化我们的应用。

ng-include 是什么？

ng-include 是 AngularJS 内置的指令，用于将一个外部的 HTML 文件（也可以是 JS / CSS）引入到当前的模板中。它的语法非常简单：

<ng-include src="'路径/文件名'"></ng-include>

其中，src 属性表示要引入的文件的地址和名称，可以是一个表达式或变量。引号是必须的，因为这里的路径是一个字符串。

ng-include 的用途

ng-include 的主要作用是将一个公用的 HTML 片段引入到多个视图中，从而增加代码的复用性和可维护性。它可以用于以下场景：

头部和底部的导航栏、页脚等公用部分；
表单中的某些字段，例如复选框、日期选择器等；
弹框、对话框中的模板，例如错误提示框、登录框等。

此外，ng-include 还可以用于按需加载模板文件，从而提高页面性能。这是因为在单页应用中，通常需要加载大量的 HTML 和 JavaScript 代码，这会影响页面的加载速度和响应时间。而通过 ng-include，我们可以将模板文件分散到多个小文件中，等到需要的时候再进行加载，从而减少请求和下载的数量，优化应用性能。

ng-include 实例

下面，我们来演示一下如何使用 ng-include 进行模板引入。

首先，我们创建一个 index.html 文件，它包含一个头部和一个主体部分：

<!doctype html>
<html ng-app="myApp">
<head>
  <title>AngularJS SPA Demo</title>
  <script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
</head>
<body>
  <div ng-include="'tpls/header.html'"></div>
  <div ng-view></div>
</body>
</html>

在头部的 div 块中，我们使用 ng-include 指令引入了一个 header.html 文件，它包含一个导航菜单和一个搜索框：

<nav>
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/about">About</a></li>
    <li><a href="#/contact">Contact</a></li>
  </ul>
</nav>
<div>
  <input type="text" placeholder="Search..." />
</div>

然后，我们再创建一个 home.html 文件，它包含了一个主体内容：

<h2>Welcome to my AngularJS SPA Demo</h2>
<p>This is a demo application for AngularJS SPA using ng-include.</p>

在 main.js 中，我们定义了一个 AngularJS 模块 myApp，其中包含一个路由器和对应的控制器：

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
  $routeProvider
  .when('/home', {
    templateUrl: 'tpls/home.html',
    controller: 'homeCtrl'
  })
  .when('/about', {
    templateUrl: 'tpls/about.html',
    controller: 'aboutCtrl'
  })
  .when('/contact', {
    templateUrl: 'tpls/contact.html',
    controller: 'contactCtrl'
  })
  .otherwise({
    redirectTo: '/home'
  });
})
.controller('homeCtrl', function($scope) {
  //
})
.controller('aboutCtrl', function($scope) {
  //
})
.controller('contactCtrl', function($scope) {
  //
});

在上面的代码中，我们使用了 ngRoute 模块来进行路由管理，定义了三个路由，分别对应了三个不同的模板文件。在 homeCtrl、aboutCtrl 和 contactCtrl 控制器中，我们可以对应地定义相应的业务逻辑。

最后，我们在 tpl 目录中创建了三个模板文件，分别为 home.html、about.html、contact.html，包含了不同的 HTML 片段。

总结

本文介绍了 AngularJS 单页应用中如何使用 ng-include 进行模板引入与优化。通过引入外部的 HTML 文件，我们可以提高代码的复用性和可维护性，从而优化我们的应用。

在实际应用中，我们需要根据具体的情况来灵活使用 ng-include，避免过度抽象和不必要的模板引入。同时，我们也需要注意 ng-include 的性能问题，尽量减少请求和下载的数量，提高页面响应速度。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65ab52b1add4f0e0ff4f3d4f

AngularJS SPA 应用中使用 ng-include 进行模板引入与优化

ng-include 是什么？

ng-include 的用途

ng-include 实例

总结

纠错反馈