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.jsapp.js文件呼唤,那么网页将不能正常的展示。并且我们可在Chrome的”开发者工具”中看到报错信息。