AngularJS基本特性介绍
- - ITeye博客使用AngularJS非常简单，如下：. 以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用. HTML执行表达式（Expressions）. AngularJS允许在HTML直接执行表达式，如下：.
AngularJS基本特性介绍
标签：
angularjs
本特
| 发表时间：2014-01-07 20:19 | 作者：
出处：http://www.iteye.com
Hello World
使用AngularJS非常简单，如下：
以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用。
HTML执行表达式（Expressions）
AngularJS允许在HTML直接执行表达式，如下：
一样的简单，同样的无用，因为在HTML直接写表达式会让代码一团糟，这样的功能最好不要用。
Directives（指令）
这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令，下面来看一个例子，使用了内置的ng-repeat
上例中，首先通过ng-init指令创建了一个students的对象数组， 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值，只显示boy：
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding）
在AngularJS中，只需要简单的使用ng-model就可以实现model和view的双向绑定，任何在view上的修改马上反应到Model，任何在Model数据上的修改马上反应到View的展示上。如下：
过滤器（Filters）
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据，实现形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示为大写：
和Directive一样，Filter同样支持定制：http://docs.angularjs.org/guide/filter。
模块化（Modules）
在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
然后在javascript中，可以非常简单的获取到这个Module，
之后，你可以为这个Module了添加你想要得东西了，比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
AngularJS中提供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
路由（Routes）
AngularJS中，可以直接用javascript定义可用的路由，页面的跳转再也不用到服务器去走一圈了
控制器（Controllers）
上面的例子中，使用了一个studentController， AngularJS中在module上使用controller操作可以为module定义一个Controller，Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作，然后通过$scope服把view需要的数据传递过去。为保证隔离性，在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下：
Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据，View都可以访问到。
小结
AngularJS自己定义一整套完整的逻辑，其对前端代码的规范性很有帮助，另外，内置的各种Directive会极大的减少开发人员的代码量；未来AngularJS + Restful Service可能会大行其道。
对AngualarJS的槽点有2个，第一，所有逻辑知识都暴露在JavaScript中，是否会导致一些安全问题，第二，官方的文档可用性极差啊。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
使用AngularJS非常简单，如下：
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用。
HTML执行表达式（Expressions）
AngularJS允许在HTML直接执行表达式，如下：
1+2 = {{1+2}}! #页面会显示 1+2 = 3！
一样的简单，同样的无用，因为在HTML直接写表达式会让代码一团糟，这样的功能最好不要用。
Directives（指令）
这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令，下面来看一个例子，使用了内置的ng-repeat
<div ng-init="students = [
{name:'John', age:25, gender:'boy'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Sebastian', age:10, gender:'boy'},
{name:'Samantha', age:16, gender:'girl'}
]">
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
</div>
上例中，首先通过ng-init指令创建了一个students的对象数组， 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值，只显示boy：
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'">
<h3>{{student.name}}:{{student.age}}</h3>
</div>
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
<div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
data-ng-switch="student.age >18">
<h3>{{student.name}}:{{student.age}}</h3>
<p data-ng-switch-when="true">ADULT</p>
</div>
这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding）
在AngularJS中，只需要简单的使用ng-model就可以实现model和view的双向绑定，任何在view上的修改马上反应到Model，任何在Model数据上的修改马上反应到View的展示上。如下：
<div data-ng-repeat="student in students">
<h3>{{student.name}}:{{student.age}}</h3>
Edit Name: <input type="text" data-ng-model="student.name">
</div>
过滤器（Filters）
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据，实现形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示为大写：
<div data-ng-repeat="student in students">
<h3>{{student.name|uppercase}}:{{student.age}}</h3>
</div>
和Directive一样，Filter同样支持定制：http://docs.angularjs.org/guide/filter。
模块化（Modules）
在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
<html ng-app=“AngularJSSample”>
然后在javascript中，可以非常简单的获取到这个Module，
var AngularJSSample = angular.module('AngularJSSample', []);
之后，你可以为这个Module了添加你想要得东西了，比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
AngularJS中提供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
AngularJSSample.config(['$routeProvider', function($routeProvider){
}]) ;
路由（Routes）
AngularJS中，可以直接用javascript定义可用的路由，页面的跳转再也不用到服务器去走一圈了
AngularJSSample.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/students', {
templateUrl: 'views/students.html',
controller: 'studentsController'
}).otherwise(
{
templateUrl: 'views/greeting.html'
})
}]);
控制器（Controllers）
上面的例子中，使用了一个studentController， AngularJS中在module上使用controller操作可以为module定义一个Controller，Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作，然后通过$scope服把view需要的数据传递过去。为保证隔离性，在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下：
AngularJSSample.controller(['studentController', function ($scope) {
}]);
Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据，View都可以访问到。
AngularJSSample.controller(['studentController', function ($scope) {
$scope.students = [
{name: 'John', age: 25, gender: 'boy'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Sebastian', age: 10, gender: 'boy'},
{name: 'Samantha', age: 16, gender: 'girl'}
];
}]);
小结
AngularJS自己定义一整套完整的逻辑，其对前端代码的规范性很有帮助，另外，内置的各种Directive会极大的减少开发人员的代码量；未来AngularJS + Restful Service可能会大行其道。
对AngualarJS的槽点有2个，第一，所有逻辑知识都暴露在JavaScript中，是否会导致一些安全问题，第二，官方的文档可用性极差啊。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [angularjs 本特] 推荐：
学习AngularJS实例
- - Web前端 - ITeye博客怎么样快速学习AngularJS. 相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引.
AngularJS表单验证
- - JavaScript - Web前端 - ITeye博客 通过AngularJS我们不仅可以隐藏/显示错误提示消息，高亮输入框，还可以通过编写指令来随心所欲的控制表单验证方式. $scope.reset=function(){ //表单重置. 表单验证 .
表单验证
. angularjs与服务器交互
- - CSDN博客Web前端推荐文章真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互. 为了实现这一点，Angular提供了一个叫做$http的服务. 它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易.
AngularJS与服务器交互
- - JavaScript - Web前端 - ITeye博客 对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应. }else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码.
使用AngularJS构建大型Web应用
- - InfoQ cnAngularJS是由Google创建的一种JS框架，使用它可以扩展应用程序中的HTML词汇，从而在web应用程序中使用HTML声明动态内容. 在该团队工作的软件工程师 Brian Ford近日撰写了一篇 blog，分享了如何使用AngularJS构建大型Web应用的经验. 这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义.
使用angularJS的三个重要原因
- - Web前端 - ITeye博客如果你不熟悉什么是Angular.js的话，小编我强烈推荐你阅读 Javascript教程：AngularJS的五个超酷特性. 简单来说Angular.js是google开发者设计和开发的一套前端开发框架，帮助你简化前端开发的负担. 当然，这里有很多其它的前端开发框架，但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了.
AngularJS的IE浏览器兼容性
- - JavaScript - Web前端 - ITeye博客 如果你要让你的AngularJS应用兼容IE8和IE8以下的版本的话，你需要做一些特殊处理. 要让你的AngularJS应用在IE中正常运行你必须：. a.确保JSON字符串能被正常解析（IE7需要），你可以使用JSON2或者JSON3来实现. b.不能使用自定义的元素标签，如（你只能使用属性的形式，如
）.
借助AngularJS写优雅的代码
- - 四火的唠叨接触 AngularJS还真有点碰巧，在用JQuery写数据绑定的时候，我被数据对象和DOM之间的同步整烦了，要写一大堆方法绑定和取值/设值的代码逻辑，丑得要死. 数据对象发生变更以后，要及时更新DOM树；. 用户操作改变DOM树以后，要回头更新数据对象. 这个问题还是举例来说清楚一些，比如我定义了这样一个queryObj：.
AngularJS 最常用的八种功能
- - Web前端 - ITeye博客本文地址： http://zhaoyanblog.com/archives/99.html. 第一 迭代输出之ng-repeat标签. ng-repeat让table ul ol等标签和js里的数组完美结合. 你甚至可以指定输出的顺序：. 第二 动态绑定之ng-model标签. 任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量，.