Hello World
使用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中,是否会导致一些安全问题,第二,官方的文档可用性极差啊。
分享到:
相关推荐
angularjs是javascript的一个框架,通过script标签添加到网页中。这篇文章主要介绍了AngularJs基本特性解析(一)的相关资料,需要的朋友可以参考下
本书系统讲解AngularJS的基本概念与背后的原理,包括完整的开发框架与最佳实践。不仅抽丝剥茧地展现了AngularJS的诸多特性与技巧,还讲解了工程实践中容易陷入的“坑”,是从AngularJS的小工走向专家的必备参考。...
angularjs, 面向AccioCode的AngularJS教程 Accio代码教程: AngularJS#更新:2 -10-16本系列针对 AccioCode插件的教程将展示如何使用AngularJS的基本特性。 你将学习如何制作简单的网页和简单的web应用程序。什么是 ...
通过该教程你会学习到AngularJS的一些基本特性,例如指令、表达式、过滤器、模块和控制器等。以及其它所有你需要知道的有关AngularJS的东西,如事件、DOM节点、表单、用户输入、数据验证、Http对象等。
它基本上是分成两件事情。把你的模块拆分成小块,并实施一些机制,允许按需加载这些块。听起来似乎有很多工作量,不是吗?如果你使用 Webpack 的话,就不会这样。它支持开箱即用的代码分割特性。在这篇文章中我假定...
特征身份验证:用于存储登录名/密码的用户数据库安全性:Passport JWT策略REST API: 登录端点:登录用户注销端点:注销用户记录端点:记录来自前端应用程序的消息刷新端点:刷新JWT访问令牌错误处理:ApiError和...
AngularJS Nereid 服务 这个 angular 模块是对 nereid 服务的抽象。 如果您正在编写与 Nereid 对话的 Angular Web 应用程序,则可以使用此模块执行基本身份验证。 可以使用支持功能构建附加服务。 本模块要求 ...
使用的基本应用程序模板。 该模板使用AngularJS作为MVC框架,并与Angular Material结合使用以提供UI设计。 它可以用作开发您自己的应用程序的起点和基础。 请注意,Angular Material仍在开发中,尚未正式发布。 请...
伍迪 猜字谜游戏 播放演示 ...50个基本词:颜色、数字、动物等 可通过 RESTFul API 扩展,现在使用 parse.com 背景颜色动画 通过凉亭使用 AngularJS 1.x 和 Bootstrap 通过 Grunt 进行丑陋的构建
您应该会看到演示消息应用程序特征实体注册表(还没有文档)服务工厂(还没有文档)布局管理器(还没有文档) 组件工厂注册组件,基本上就是AngularJs 指令。 组件是封装逻辑的基本构建块。 所有用户定义的组件都应...
弹性和可扩展的AngularJS CRUD样板(TypeScript) 特征: 仅通过传递源,行和标题模板即可生成CRUD 完全可扩展和静态类型 不只是定义,Elastic Crud是TypeScript的某种库 由致力于现代单页应用程序的团队维护 工作...
角度图像裁剪我正在尝试制定一个独立的AngularJS指令,该指令可让您在将图像上传到服务器之前对其进行裁剪。特征触摸支持,滑动以移动并拖动手柄进行缩放-查看已知问题从您的设备/机器添加任何图像文件输出为以base...
角度特征标志AngularJS模块,可让您通过在功能标记/开关后面放置新功能来控制何时发布应用程序中的新功能。 该模块仅支持Angular v1.2及更高版本。这个主意将您的应用程序功能抽象为小块并将其实现为松散耦合的指令...
基于node-webkit、angularjs、bootstrap,谁知道未来还会抛出什么其他的库/框架。 更新 (12.09.14) 一些基本功能已添加到应用程序中。 现在是被认为有点有用的好时机。 特征 能够添加IP 地址和标签(别名)来识别...
对angular的很多基本特性进行了讲解,并有示例代码。全英文版带目录,如果仔细读可以很快上手angularjs
特征 Netty 引导程序配置 支持 HTTP 从 Spring Context 配置的路由 Slf4j + Log4j 用于日志记录 mvn 包将所有依赖项打包到一个 jar 中 积压 支持 SSL 支持路由的正则表达式 添加基本业务逻辑:{word:出现次数...
Awesome-rating是一个jQuery插件,可让您使用简单但...所需的依赖项: jQuery的* AngularJS(使用AngularJS时) * KnockoutJS(使用KnockoutJS时) * FontAwesome(使用标准配置时)特征: 开箱即用允许指定您想要的任
AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 本文是接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,...