AngularJs入门教程之环境搭建+创建应用示例
本文简单讲述了AngularJs环境搭建+创建应用的方法。分享给大家供大家参考，具体如下：
概述
AngularJS是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。本系列文章將以实际的案例简单的介绍AngularJs的特性和用法。
开发环境搭建
俗话说"巧妇难为无米之炊"，我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库，AngularJs官网（ https://angularjs.org/）有提供下载。或者点击此处本站下载。
获取到AngularJs库文件我们就可以开始了，但是为了提高工作效率，一款好的集成开发工具是必备可少的，这里笔者使用的是WebStorm。Chrome和Firefox提供的开发人员工具非常方便代码调试，笔者使用的是Chrome，这里也推荐大家使用。下图是WebStorm的工作界面，读者也可以根据喜好自行选择。
创建第一个应用
新建一个工程，將AngularJs库文件夹拷贝的工程中。
接下来我们编写第一个HTML5页面。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial01_1</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div>{{"Anguar"}} </div>
</body>
</html>
我们通过<script>标签引入angular.js文件,用编辑器打开angular.js可以看到最后有这样几行代码：
jqLite(document).ready(function() {
angularInit(document, bootstrap);
});
在页面加载时调用angularInit方法，也就是说我们引入angular.js文件后页面加载时也就启动了AngularJs。
<html>标签中定义了一个属性ng-app，它是AngularJs的内置指令，用来告诉AngularJs该标签之后的所有DOM元素都由AngularJs来管理。
"{{内容}}"这种形式为AngularJs的表达式，用来向HTML页面中输出内容。
在浏览器中运行该HTML页面，可以看到我们通过表达式输出的文字。
上面提到的ng-app指令可以出现在页面中的任何标签的属性中，例如我们可以把它放在第二个div标签中：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
<title>tutorial01_2</title>
</head>
<body>
<div> {{"First Angular App!"}}</div>
<div ng-app>{{"Anguar"}} </div>
</body>
</html>
再次运行会发现，{{"First Angular App!"}}原样输出，这是因为只有ng-app指令之后的元素才会由AngularJs管理，所以我们通常把该指令放在html标签中，让AngularJs管理整个页面。
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
下面小编就为大家带来一篇详谈AngularJs 控制器、数据绑定、作用域。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angular在一个页面中使用两个ng-app的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
SCSS是Sass 3引入新的语法,其语法完全兼容 CSS3,并且继承了Sass的强大功能,下面这篇文章主要给大家介绍了关于Angular项目中使用scss文件的一些技巧的相关资料,需要的朋友可以参考下2022-05-05
由于最近的一个项目使用的是angularjs1.0的版本，涉及到分页查询数据的功能，后来自己就用自定义指令实现了该功能，下面小编把实例demo分享到脚本之家平台，需要的朋友参考下2017-09-09
网上已经有AngularJS比较多的相关教程了，那么这篇文章我们一起来看一个AngularJS双击排序的例子，对大家日常开发很有帮助的，有需要的可以参考借鉴。2016-08-08
这篇文章主要给大家介绍了关于Angular6项目打包优化的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-12-12
Angular2使用Angular-CLI快速搭建工程（二）
这篇文章主要介绍了Angular2使用Angular-CLI快速搭建工程（二）,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了Angular 2应用的8个主要构造块,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
在学习了如何简单开始一个Angular程序之后，跟着网上的教程我也来实现一个购物车功能，为了减少页面样式设计我使用了bootstrap来偷懒，现在分享给大家，有需要的可以参考借鉴。2016-08-08
AngularJs bootstrap搭载前台框架——基础页面
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下2016-09-09
最新评论