AngularJs轻松入门（一）创建第一个应用
AngularJs是Google工程师研发的一款JS框架，官方文档中对它的描述是，它是完全使用JavaScript编写的客户端技术，同其他历史悠久的Web技术（HTML，CSS等）配合使用，使得Web开发变得更简单、更高效。它是笔者用过的比较有特色的一款框架，以HTML作为模版语言并扩展HTML属性，使得应用组件开发保持高度的清晰和一致。本系列文章將以实际的案例简单的介绍AngularJs的特性和用法。
开发环境搭建
俗话说“巧妇难为无米之炊”，我们要使用AngularJs开发Web应用首先要做的就是获取AngularJs开发库，AngularJs官网（ https://angularjs.org/）有提供下载，鉴于官网经常打不开，笔者上传了一份到CSDN。
下载地址：http://download.csdn.net/detail/rongbo_j/8612479
获取到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轻松入门
AngularJs轻松入门系列博文:http://blog.csdn.net/column/details/angular.html AngularJs轻松入门(一)创建第一个应用 AngularJs ...
- AngularJs轻松入门（四）模块化
在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...
- AngularJs轻松入门（九）与服务器交互
AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...
- AngularJs轻松入门（八）Cookies读写
虽然使用JavaScript创建和获取Cookie很简单,AngularJs还是把它作为一个单独的模块进行了封装,模块名为ngCookies,和前面的教程中做法一样,先引入angular-cookie ...
- AngularJs轻松入门（五）过滤器
在前面几节里我们已经接触过AngularJs的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下 ...
- BootStrap入门_创建第一个例子
一.选择合适的IDE 一般前端开发选用的都是WebStorm.Brackets等,因为本人对VS比较熟悉,索性就拿VS进行练习了,而且VS练习有些好处,就是通过nuget方式获取BootStrap可以 ...
- AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
- AngularJs轻松入门（六）表单校验
表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...
- AngularJs轻松入门（三）MVC架构
MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...
随机推荐
- OpenCV特征点检測------Surf（特征点篇）
Surf(Speed Up Robust Feature) Surf算法的原理 ...
- 从头认识java-16.4 nio的读与写（ByteBuffer的使用）
这一章节我们来讨论一下nio的读与写. 1.nio的读 package com.ray.ch16; import java.io.IOException; import java.io.RandomA ...
- LeetCode -- 求字符串数组中的最长公共前缀
题目描写叙述: Write a function to find the longest common prefix string amongst an array of strings.就是给定1个 ...
- Qt Quick Controls 与 Qt Quick Controls 2的区别（详细对照）
Qt Quick Controls 原本是为支持桌面平台而开发的,后来又加入了移动平台和嵌入式平台的支持.它们应用非常广泛,因为它们提供了足够灵活的样式系统,以允许开发具有平台相关或者无关风格的应用程 ...
- bzoj1305: [CQOI2009]dance跳舞（二分答案+网络流）
1305: [CQOI2009]dance跳舞 题目:传送门 题解: 一眼网络流基础建模...然后就GG了 二分答案+拆点建边+最大流判断: 把男女生拆为男1,男2,女1,女2 1.男1和男2还有女1 ...
- ES什么时候会平衡分片
"cluster.routing.allocation.balance.shard":"0.45f",//定义分配在该节点的分片数的因子 阈值=因子*(当前节点 ...
- xshell同时发送多条命令
1.如图,勾选撰写栏 勾选全部会话 下面的是一个很方便的小技巧.分屏 如下图垂直排列 水平排列等等
- Linux基础01
** 一些老生常谈的问题 一提起Linux,行业内无人不知<鸟哥私房菜>,就是放在胸口可以防弹的那种书,虽说经典.全面,但对于初学者而言,确实过于厚重,而且容易学着后边忘了前边,毕竟实际操 ...
- javascript常用代码(不完整版)
求大神指点 Javascript嵌入式 <script typt:javascript>代码</script> 注释 //或者/*内容*/ 变量名赋值 Var 变量名 = 值 ...
- swift语言点评八-枚举
总结:swift中的枚举可以看作变量可以作为case匹配参数的类 Enumerations 枚举的作用:状态列举与匹配 枚举值与类型 If a value (known as a “raw” valu ...