AngularJS - 环境设置

AngularJS环境设置 - 从简单和简单的步骤学习AngularJS，从基本到高级概念，包括概述，环境设置，MVC架构，第一应用程序，指令，表达式，控制器，过滤器，表格，HTML DOM，模块，表格，包含， Ajax，视图，范围，服务，依赖注入，自定义指令，内部化，ToDo应用程序，记事本应用程序，Bootstrap应用程序，登录应用程序，上载文件，在线应用程序，导航菜单，切换菜单，订单表格，搜索选项卡，拖动应用程序，购物车应用，翻译应用，图表应用，地图应用，共享应用，天气应用，定时器应用，传单应用，Lastfm应用。

本章介绍如何设置要在Web应用程序开发中使用的AngularJS库.它还简要描述了目录结构及其内容.

当你打开链接 https://angularjs.org/，您将看到有两个选项可供下载AngularJS库 :

AngularJS下载

在GitHub上查看 : 通过单击此按钮，您将转到GitHub并获取所有最新脚本.
下载AngularJS 1 : 通过单击此按钮，您可以在屏幕上看到显示为&minus的对话框;

AngularJS Download

此屏幕提供了使用Angular JS的各种选项，如下所示;

在本地下载和托管文件

有两种不同的选择:Legacy和Latest.名称本身是自我描述的. Legacy的版本低于1.2.x，最新的版本为1.3.x.
我们也可以使用最小化，未压缩或压缩版本.

CDN访问 : 您还可以访问CDN. CDN使您可以访问区域数据中心.在这种情况下，谷歌主机. CDN将托管文件的责任从您自己的服务器转移到一系列外部服务器.它还提供了一个优势，如果您的网页访问者已经从同一CDN下载了AngularJS的副本，则无需重新下载.

我们在整个教程中使用了库的CDN版本.

示例

现在让我们我们使用AngularJS库编写一个简单的例子.让我们创建一个HTML文件 myfirstexample.html ，如下所示 :

                                 Welcome {{helloTo.title}} to the world of Tutorialspoint!

让我们详细阅读上面的代码 :

包括AngularJS

我们在HTML页面中包含AngularJS JavaScript文件，以便我们可以使用它 :

您可以在官方网站上查看最新版本的AngularJS.

指向AngularJS app

接下来，需要告诉HTML的哪一部分包含AngularJS应用程序.您可以通过将ng-app属性添加到AngularJS应用程序的根HTML元素来完成此操作.您可以将其添加到html元素或body元素，如下所示 :

查看

视图是这部分 :

   Welcome {{helloTo.title}} to the world of Tutorialspoint!

ng-controller 告诉AngularJS哪个控制器用于此视图. helloTo.title 告诉AngularJS在此位置用HTML编写名为helloTo.title的模型值.

控制器

控制器部分是 :

此代码在名为 myapp 的角度模块中注册名为HelloController的控制器函数.我们将详细研究模块和控制器在各自的章节中.控制器功能通过angular.module(...).controller(...)函数调用以角度注册.

$ scope参数模型传递给控制器函数.控制器函数添加一个 helloTo JavaScript对象，并在该对象中添加 title 字段.

执行

将上述代码保存为 myfirstexample.html 并在任何浏览器中打开它.您将看到以下输出 :

Welcome AngularJS to the world of Tutorialspoint!

在浏览器中加载页面后会发生什么？让我们看看 :

HTML文档被加载到浏览器中，并由浏览器进行评估.
加载AngularJS JavaScript文件，创建角度全局对象.
执行注册控制器功能的JavaScript.
接下来，AngularJS扫描HTML以搜索AngularJS应用程序和视图.
找到视图后，它会将该视图连接到相应的控制器功能.
接下来，AngularJS执行控制器功能.
然后使用控制器填充的模型中的数据呈现视图.该页面现已准备就绪.