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 ...
随机推荐
- Java知识点解析
JAVA 1:简述Java的基本历史 java起源于SUN公司的一个GREEN的项目,其原先目的是为家用消费电子产品 发送一个信息的分布式代码系统,通过发送信息控制电视机.冰箱等. 2:简单写出Jav ...
- 微软版UnityVs横空出世，究竟是谁成就了谁？
在移动互联网浪潮持续发力下,手游行业也异常火热.在现在的手游行业,Unity3d无疑是最耀眼的哪颗星.一直觉得Unity面向设计师是友好的,对程序猿这边并非非常友好. 2012年用Unity时开发工具 ...
- matplotlib 可视化 —— matplotlib.patches
官方帮助文档 patches - Matplotlib 1.5.1 documentation patches 下主要包含的常用图形类有: Eclipse Circle Wedge 1. plt.gc ...
- angular4过滤器
Angular4中过滤器 一.大小写转换过滤器 uppercase将字符串转换为大写 lowercase将字符串转换为小写 <p>将字符串转换为大写{{str | uppercase}}& ...
- POJ 2190 模拟
按照题意模拟就好- 注意"X"只能出现在最后一位... // by SiriusRen #include <cstdio> using namespace std; c ...
- Android APP 调试过程中遇到的问题。
调试过过程中APP安装完启动后有的时候会异常退出,报这个错误.有的时候可以直接启动.查找不到原因.网上说把commit方法替换成commitAllowingStateLoss() 也无效. Andro ...
- 1、Windows服务器 VS Linux服务器
- windows2008搭建ftp服务器
控制面板 操作—〉添加角色 (web,文件服务) windows 搜索中: 添加ftp站点: 计算机---管理 –服务器管理 --- 添加一个用户 ,密码. 防护墙高级设置中添加 出入站规则 允许2 ...
- 3ds Max制作妄想中的外星人形象
来源:CG游 作者:FedericoScarbini 使用软件:3ds Max, Photoshop, ZBrush 简介 我认为每一个人都曾经在他的人生中的某些时刻妄想着关于外星人的事情;我猜这是很 ...
- 洛谷3627 [APIO2009]抢掠计划
题目描述 输入格式: 第一行包含两个整数 N.M.N 表示路口的个数,M 表示道路条数.接下来 M 行,每行两个整数,这两个整数都在 1 到 N 之间,第 i+1 行的两个整数表示第 i 条道路的起点 ...