angularjs是google开发的一款高大上的前端mvc开发框架。
angularjs官网：https://angularjs.org/ 官网有demo,访问可能需要fq
angularjs中国社区：http://www.angularjs.cn/ 适合初学者
引用文件：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
使用angular注意
引用angularjs库：https://github.com/litengdesign/angularjstest/blob/master/angular-1.0.1.... 可以在本节示例的github上下载
需要在你使用的区域加上ng-app=appname,或者直接ng-app（全局）。
设置控制器 ng-controller=ctrl。
测试一下示例请注意以下几点
需要在head之前引入angularjs代码,作者使用的是angular-1.0.1.min.js，请注意版本区别。
所有小示例都是在以下区域运行，记得在作用区域加上 ng-app。
下面通过一些小的案例来说明angularjs默认的常见的指令和用法。
hello world程序(双数据绑定)
使用ng-model={{name}}来绑定数据
复制代码 代码如下:
name:
hello:{{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjstest/helloangularjs.html
事件绑定使用小案例
复制代码 代码如下:
单价：
  数量:
总价：{{(price) * (quantity)}}
注:
    涉及html5的input：http://www.w3school.com.cn/html5/att_input_type.asp>http://www.w3school.com.cn/html5/att_input_type.asp>
    ng-init:设定初始值
http://2.liteng.sinaapp.com/angularjstest/event-bind.html
ng-init:可默认指定属性值
复制代码 代码如下:
{{value}}
http://2.liteng.sinaapp.com/angularjstest/ng-init.html
ng-repeat:用于迭代数据类似于js中的 i for info
复制代码 代码如下:
我有{{friends.length}} 朋友.他们是
[{{$index+1}}]:{{friend.name}}年龄为：{{friend.age}}
http://2.liteng.sinaapp.com/angularjstest/ng-repeat.html
ng-click:dom的点击事件
复制代码 代码如下:
{{a}}
http://2.liteng.sinaapp.com/angularjstest/ng-click.html
ng-show:设置元素显示
注：ng-show=!xx:在属性值前面加！表示确定显示,如果不加！表示不确定则不显示
复制代码 代码如下:
ng-show=!show
ng-show=show
http://2.liteng.sinaapp.com/angularjstest/ng-show.html
ng-hide:设置元素隐藏
复制代码 代码如下:
ng-hide=aaa
ng-show=!aaa
http://2.liteng.sinaapp.com/angularjstest/ng-hide.html
运用ng-show制作toggle效果
复制代码 代码如下:
toggle
  显示logo
http://liteng.org/sites/default/files/logo.png alt=>
http://2.liteng.sinaapp.com/angularjstest/ng-toggle.html
ng-style:和默认style类似
这里请注意书写格式：字符串需要用引号包含
复制代码 代码如下:
box
http://2.liteng.sinaapp.com/angularjstest/ng-style.htmlfilter:过滤字段
复制代码 代码如下:
{{9999|number}}
{{9999+1 |number:2}}
{{9*9|currency}}
{{'hello world' | uppercase}}
http://2.liteng.sinaapp.com/angularjstest/filter.html
ng-template:可以加载模板
复制代码 代码如下:
tpl.html
复制代码 代码如下:
hello
http://2.liteng.sinaapp.com/angularjstest/show-tpl.html$http:一个类似ajax的方法很管用
复制代码 代码如下:
http请求-方法1
{{x.name}}+{{x.country}}
方法2
{{y.aid}}+{{y.title}}
http://2.liteng.sinaapp.com/angularjstest/ajax.html
以上所有的code:https://github.com/litengdesign/angularjstest
实现的demo:http://2.liteng.sinaapp.com/angularjstest/index.html
至于angularjs的路由（router）和指令（directive）下次本人将单独拿出来讲。