AngularJS初始化ng-app

本节我们将学习基本的ng-app初始化。

ng-app可以将网页自动初始化为一个AngularJS应用，这样你才能在网页中使用各种AngularJS提供的功能（比如前一节介绍的基本表达式功能）。

在现在阶段，我们并不会用到ng-app的扩展功能，只需要在独立的JavaScript文件中将ng-app声明好，再引用入HTML页面即可。

创建一个独立的JavaScript文件，并在HTML中引用

在./public/js目录中新建一个app.js文件，并填入如下代码：

  1. var App = angular.module("App", []);

在index.html中引入app.js文件，并将ng-app配置进去即可。

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>学习AngularJS 1.x</title>
  6. </head>
  7. <body>
  8.     <h1>{{"Hello World!"}}</h1>
  9.     <script type="text/javascript" src="components/angular/angular.js"></script>
  10.     <script type="text/javascript" src="js/app.js"></script>
  11.     <!-- 这里我们将app.js引入了进来 -->
  12. </body>
  13. </html>

以上代码有两个问题需要注意：

AngularJS的作用域

ng-app标签可以放置在<html>标签或者<body>标签上，也可以放置在HTML页面的任何一个标签上。

这里，我们就需要注意AngularJS对于作用域的定义。我们先通过如下的例子来看看作用域的具体表现：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- 网页的标题，我们在这里使用了AngularJS的基本表达式 -->
  6.     <title>{{"学习AngularJS 1.x"}}</title>
  7. </head>
  8. <body ng-app="App"> <!-- ng-app被放置在了这里 -->
  9.     <h1>{{"Hello World!"}}</h1>
  10.     <script type="text/javascript" src="components/angular/angular.js"></script>
  11.     <script type="text/javascript" src="js/app.js"></script>
  12. </body>
  13. </html>

以上代码的运行结果如下：

图4-1 ng-app在body时的运行结果

我们可以看到，网页标题中的AngularJS表达式并没有执行，这是因为网页的<head>标签中的内容，并不在AngularJS的管理之下。

如果我们将ng-app声明放置在<body>元素中，那么AngularJS只会针对<body>元素中的内容进行处理。这也是AngularJS的核心特性之一，它让我们的JavaScript代码有了作用域的概念，降低了代码之间不期望的一些互相影响。

这个特性我们在后面会大量的使用，将网页分为多个部分，并分别交于不同的JavaScript代码进行管理，各个部分之间互相独立，这样即可在网页中实现逻辑复杂的功能。

引入文件的顺序

引入JavaScript文件的顺序是有差异的，如果我们将上面代码的angular.js和app.js文件呼唤，那么网页将不能正常的展示。并且我们可在Chrome的”开发者工具”中看到报错信息。