AngularJs入门教程中环境构建与创建的应用示例

本文简要描述了在AngularJs环境中构建和创建应用程序的方法。分享给大家参考，如下：

摘要

AngularJS是谷歌工程师开发的JS框架。官方文档将其描述为完全用JavaScript编写的客户端技术，它与其他历史悠久的Web技术(HTML、CSS等)结合使用。)让Web开发变得更简单、更高效。它是作者使用的独特框架，以HTML为模板语言，扩展HTML属性，使得应用组件的开发高度清晰一致。本系列文章将通过实际案例简要介绍AngularJs的特性和用法。

建立发展环境

俗话说‘巧妇难为无米之炊’，我们用AngularJs开发Web应用首先要做的就是获取AngularJs开发库，可以在官网(https://angularjs.org/)下载。或者点击这里下载。

我们可以在得到AngularJs库文件的时候开始，但是为了提高工作效率，一个好的集成开发工具是必须的。在这里，作者使用了WebStorm。Chrome和Firefox提供的开发工具非常方便代码调试。作者使用Chrome，这里推荐。下图是WebStorm的工作界面，读者可以根据自己的喜好进行选择。

创建第一个应用程序

创建一个新项目，并将AngularJs库文件夹复制到项目中。

接下来，我们编写第一个HTML5页面。

！DOCTYPE html html ng-App head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : Angular-1 . 3 . 0 . 14/Angular . js '/脚本标题tutorial 01 _ 1/title/head dydiv { { ' First Angular App！'} }/div div { { ' anguar ' } }/div/body/html我们通过脚本标签引入angular.js文件，并用编辑器打开angular.js，最后会看到下面几行代码：

jqLite(文档)。ready(function() { angularInit(文档，引导)；});加载页面时会调用angularInit方法，这意味着在我们引入angularjs文件后，加载页面时会启动AngularJs。

html标签中定义了一个属性ng-app，这是AngularJs的内置指令，告诉AngularJs标签后的所有DOM元素都由AngularJs管理。

“{{content}}”是AngularJs形式的表达式，用于将内容输出到HTML页面。

在浏览器中运行HTML页面，可以看到我们通过表达式输出的单词。

上面提到的ng-app指令可以出现在页面中任何标签的属性中，例如，我们可以将其放在第二个div标签中：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : Angular-1 . 3 . 0 . 14/Angular . js '/脚本标题tutorial 01 _ 2/title/headsdydiv { { First Angular App！'} }/div div ng-App { { ' anguar ' } }/div/body/html再次运行，会发现{{'First Angular App！'}}是按原样输出的，因为只有ng-app指令之后的元素才会被AngularJs管理，所以我们通常会把指令放在html标签中，让AngularJs管理整个页面。

希望本文对AngularJS编程有所帮助。