angularJS的简介,去官方文档看吧
感谢谷歌翻译等等,以及自己粗俗的英文
一个简单的AngularJS实例
下面是一个包含了一个表单的典型CRUD应用。表单值先经过验证,然后用来计算总值,这个总
值会被格式化成本地的样式。下面有一些开发者常见的概念,你需要先了解一下:
将数据模型(data-model)关联到视图(UI)上;
写、读、验证用户的输入;
根据模型计算新的值;
将输出格式本地化。
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="InvoiceCntl">
<b>Invoice:</b>
<br>
<br>
<table>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input type="integer" min="0" ng-model="qty" required ></td>
<td><input type="number" ng-model="cost" required ></td>
</tr>
</table>
<hr>
<b>Total:</b> {{qty * cost | currency}}
</div>
</body>
</html>
script.js:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
效果图
加载angular脚本
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
双向绑定
Quantity: <input type="integer" min="0" ng-model="qty" required >
Cost: <input type="number" ng-model="cost" required >
因为标签里有required属性,所以,如果你什么都每天写的话,这个input 输入框会自动变红。输入框的这种新特性,能让开发者更容易实现CRUD应用里常见的字段验
证功能。
接下来的{{}} 我觉得你会非常经常会用到
比如本例中
Total: {{qty * cost | currency}}
这个{{}} 标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器( {{ expression | filter }} ) 的组合。AngularJS提供了过滤器来对输入输出数据格式化。
上面的这个例子里, {{}} 里的表达式让AngularJS把从输入框中获得的数据相乘,然后把相乘结
果格式化成本地货币样式,然后输出到页面上。
值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻
辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成静态页面更多的工作,让它
能满足动态WEB应用的需要。
AngularJS开发指南02:引导程序
简单介绍下AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化。
Angular <script>
Tag
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js"><script>
</body>
</html>
其实就跟你用jquey是一摸一样的,别想得太高深了
Automatic Initialization(自动初始化)
如果你设置了ng-app 则会加载angularJS ,然后初始化,等等,执行代码,编写代码,水到渠成了吧都 很简单
<!doctype html>
<html ng-app="optionalModuleName">
<body>
<script src="angular.js"></script>
I can add: {{ 1+2 }}.
</body>
</html
手动初始化就不讲了,去研究吧