如何学习angular.js

AngularJS 是一个为动态WEB应用设计的结构框架。 它能让你使用HTML作为模板语言,通过扩
展HTML的语法,让你能更清楚、 简洁地构建你的应用组件。 它的创新点在于,利用 数据绑定 依赖
注入,它使你不用再写大量的代码了。 这些全都是通过浏览器端的Javascript实现,这也使得它能够完
美地和任何服务器端技术结合。
AngularJS是为了克服HTML在构建应用上的不足而设计的。 HTML是一门很好的为静态文本展示
设计的声明式语言,但要构建WEB应用的话它就显得乏力了。 所以我做了一些工作(你也可以觉得是
小花招

style="font-family: MicrosoftYaHei;fonAngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。 AngularJS通过
使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。 例如:
使用双大括号 {{}} 语法进行数据绑定;
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
端对端的解决方案
AngularJS试图成为成为WEB应用中的一种端对端的解决方案。 这意味着它不只是你的WEB应用
中的一个小部分,而是一个完整的端对端的解决方案。 这会让AngularJS在构建一个CRUD(增加
reate、 查询Retrieve、 更新Update、 删除Delete)的应用时显得很“ 固执” (原文为
pinionated,意指没有太多的其他方式)。 但是,尽管它很“ 固执” ,它仍然能确保它的“ 固执” 只
是在你构建应用的起点,并且你仍能灵活变动。 AngularJS的一些出众之处如下:
构建一个CRUD应用可能用到的全部内容包括:数据绑定、 基本模板标识符、 表单验证、 路由、 深度链
接、 组件重用、 依赖注入。
测试方面包括:单元测试、 端对端测试、 模拟和自动化测试框架。
具有目录布局和测试脚本的种子应用作为起点。
ngularJS的可爱之处
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。 如同其他的抽象技术一
样,这也会损失一部分灵活性。 换句话说,并不是所有的应用都适合用AngularJS来做。 AngularJS主
要考虑的是构建CRUD应用。 幸运的是,至少90%的WEB应用都是CRUD应用。 但是要了解什么适合用
ngularJS构建,就得了解什么不适合用AngularJS构建。

<!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>
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
it(‘should show of angular binding‘, function() {
expect(binding(‘qty * cost‘)).toEqual(‘$19.95‘);
input(‘qty‘).enter(‘2‘);
input(‘cost‘).enter(‘5.00‘);
expect(binding(‘qty * cost‘)).toEqual(‘$10.00‘);
});
ewline"> 运行效果
Invoice:
Quantity Cost
1 19.95

时间: 2024-08-07 08:49:08

如何学习angular.js的相关文章

学习angular.js的一些笔记想法(上)

1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}"> </div> js代码: $scope.colorChanger=false; 此时的变量colorChanger=false,那么!colorChange

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

angular.js快速入门 hello world

我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务. http://www.bootcdn.cn/ 我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中 http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js 初识 angular.js : 它是一个前端的

angular.js 分页

Angular.js+Bootstrap实现表格分页 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后分页显示. 1.表格是通过ng-repeat来展示的,代码如下: <table class="table table-bordered"> <

初学angular.js

<!doctype  html><html ng-app>   <head>    <meta charset="utf-8" />    <title>angular</title>    <script src="angular.js" /></script>   </head>   <body>     Your name: <inpu

推荐 15 个 Angular.js 应用扩展指令(参考应用)

几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 官方版本库 中. Angular.js   是一个神奇的JS框架,这一点毫无疑问,但是尽管受欢迎度和社团日益增长,但是社团中的很多开发者觉得Angular是另外一种浪费个人时间和效率的形式.在这些最不招人喜欢的问题中你会发现,测试和调试简直就是一个噩梦.你可以从网络上找到一些分散的报告, 这里有一

对angular.js的一点理解

最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几乎纯粹的dom 绑定没有一个架构一样的东西.而angular.js 则有dom 绑定还有mvc 架构的支持.一 angular.js 和以前的js 框架有的区别:    1 传统的前端开发思维:       以jquery 为例,它是以dom 为中心的,是dom 元素的操作,更多的是关注dom 的变

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据