【原】AngularJS环境设置

码农9527 2021-11-11

展开全文

　在本章中，我们将讨论如何建立AngularJS库在Web应用程序开发中使用。我们还将简要地学习目录结构和它的内容。

　　打开链接https:///，会看到有两个下载AngularJS库的选项：

　　View on GitHub- 单击此按钮跳到GitHub，并获得所有最新的脚本。

　　Download- 或者点击此按钮，会看到屏幕如下：

　　此屏幕给出了使用AngularJS如下多种选择：

　　Downloading and hosting files locally

　　有两种不同的选择：旧版和最新版。旧版是版本低于1.2.x版本，最新是1.3.x版本。

　　我们也可以使用缩小，非压缩或压缩版本。

　　CDN access: 也可以使用一个CDN。CDN全世界可访问，它放在谷歌主机区域性数据中心。这也提供了一个优点，即如果访问者的网页已经从相同的CDN 下载了AngularJS的副本，它不必再重新下载。

　　在本教程中我们使用的是CDN版本库

　　示例

　　现在让我们使用AngularJS库编写一个简单的例子。让我们创建一个HTML文件 first-angular.html 如下：

<!doctype html>
<html>
   <head>
      <script src="https://ajax./ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   <title>第一个AngularJS程序</title>
   </head>
   <body ng-app="myapp">
      <div ng-controller="HelloController" >
         <h2>你好 ！第一个{{helloTo.title}}程序示例</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>
1234567891011121314151617181920复制代码类型：[html]

　　下面的章节详细描述上面的代码：

　　包括AngularJS

　　我们已经包括了AngularJS的JavaScript文件到HTML页面中，所以我们可以用AngularJS：

<head>
   <script src="http://ajax./ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
1234复制代码类型：[html]

　　在其官方网站检查AngularJS的最新版本。

　　指向AngularJS应用程序

　　接下来我们指示HTML的哪一部分包含了AngularJS应用程序。这可以通过ng-app属性到AngularJS应用程序的根HTML元素。可以把它添加到HTML元素或body元素，如下所示：

<body ng-app="myapp">
</body>12复制代码类型：[html]

　　视图

　　这是视图的一部分：

<div ng-controller="HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of kaikeba tutorials!</h2>
</div>
1234复制代码类型：[html]

　　ng-controller 告诉AngularJS什么控制器使用在视图中。helloTo.title告诉AngularJS将命名helloTo.title的值写入到HTML的“model”中。

　　控制器

　　这里是控制器部分：

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
    });
</script>1234567复制代码类型：[html]

　　此代码注册一个名为HelloController的控制器功能，在myapp模块。我们将学习更多关于它们在各自的模块和控制器章节。控制器函数注册在Angular中，通过angular.module(...).controller(...) 的函数来调用。

　　传递给控制器函数的$scope参数是模型。控制器函数增加了helloTo的 JavaScript对象，并在该对象它增加了一个标题字段。

　　当页面在浏览器中加载，输出下面的结果：

　　HTML文档加载到浏览器，并且由浏览器进行评估计算。AngularJS JavaScript文件被加载，Angular 全局对象被创建。接下来，JavaScript一个注册控制器的函数被执行。

　　接下来AngularJS通过HTML扫描，以寻找AngularJS应用程序和视图。当视图的定位后，它连接视图到对应的控制器函数。

　　接下来，AngularJS执行控制器函数。然后，它呈现通过控制器模型数据来自填充的视图。此时网页已准备就绪。