angularJS开发指南(angularJS developer guide) 之一

最新推荐文章于 2025-05-27 02:25:50 发布

翻译最新推荐文章于 2025-05-27 02:25:50 发布 · 4.2k 阅读

angular 同时被 2 个专栏收录

2 篇文章

订阅专栏

编程指南

2 篇文章

订阅专栏

本文通过一个简单的AngularJS实例展示了如何使用AngularJS进行数据绑定、双向绑定、过滤器和初始化过程。其中包括如何创建一个CRUD应用，利用AngularJS的特性实现数据验证、计算总值并本地化显示。

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脚本

双向绑定

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是一摸一样的，别想得太高深了

将ng-app 指令放到你的应用的标签根节点中,如果你想要AngularJS自动执行整个<html> 程序就把它放在 <html> 标签中。

Automatic Initialization（自动初始化）

如果你设置了ng-app 则会加载angularJS ，然后初始化，等等，执行代码，编写代码，水到渠成了吧都很简单

<!doctype html>
<html ng-app="optionalModuleName">
<body>

<script src="angular.js"></script>
I can add: {{ 1+2 }}.
</body>
</html

手动初始化就不讲了，去研究吧

angularJS开发指南(angularJS developer guide) 之一

Angular <script> Tag

Angular `<script>` Tag