Angular2越来约火，以至于很多js开发者都想用它写一些例子。当然，你可能更希望有一些Angular2令人兴奋的新特性的文章出来。好，那这篇文章我就展示给大家如何使用Angular2来创建一个Todo应用。在这篇文章中，你将会学习如何使用组件、模板、数据绑定等一些重要的东东。让我们现在就开始吧。
Angular2当前还处在α版本，被不停的修改着。查看应用可以看到最新的修改记录。
这里有个，可以下来。如果你有啥问题可以提交到去参与讨论。
获得种子应用
Angular团队已经把开发Angular2应用所需要的依赖都放到qiuckstart app中。你可以直接在上下载到你的机器上。
现在你可以使用你最喜欢的文本编辑器打开这个app，开始编码了。我们注意到，当前的根目录是quickstart，我们把它重命名为todaoapp。
Angular 1.x中有指令的概念，而在Angular2中我们可以直接创建组件。每个组件都有两部分：试图和控制器。试图是你的组件中得HTML模板，而控制器则提供js的行为。你可能听说Angular2不再有控制器了，但是我要告诉你，确切的说应该是控制器作为组件的一部分了。那一个组件到底长啥样呢，让我们创建一个todo应用来揭开它的面纱。
找到根目录创建TodoApp.es6文件。.es6后缀意味着我们将要遵循ES6的语法，当然你也可以使用普通的.js作为后缀。现在我们把如下内容贴到该文件中去。
import {Component, Template, bootstrap,Foreach} from 'angular2/angular2';
import {TodoStore} from 'services/TodoStore';
@Component({
selector: 'todo-app',
componentServices: [
@Template({
url: 'templates/todo.html',
directives: [Foreach]
class TodoApp {
todoStore : TodoS
constructor(todoStore: TodoStore) {
this.todoStore = todoS
add($event,newtodo){
if($event.which === 13){
this.todoStore.add(newtodo.value);
newtodo.value = '';
toggleTodoState(todo){
todo.done = !todo.
bootstrap(TodoApp);
前两行代码用于引入ES6模板。第一行代码是从angular2/angular2下引入组件、模板、bootstrap和forEach。第二行代码从模块services/TodoStore中引入了我们的TodoStore服务。不要为Angular能否找到这些模块而担心，后面我们会解释。
现在，我们需要创建我们组件的控制器：名称为TodoApp:
class TodoApp{
在上面的ES6类代码中，有几个注解引起我们的兴趣：
@Component: 这标识TodoApp是一个组件。而参数是一个对象，包含一个选择器属性，用来表示这个组件应该使用啥HTML选择器；同时这个对象还包含componentServices用来标示我们的组件依赖的服务。在我们的例子中，只依赖了TodoStore，后面我们会创建它的。
@Template: 这个注解标识它将是我们组件中使用的模板。在我们的例子中是templates/todo.html。因此我们的url属性指向了模板位置。类似的，指令属性表示我们模板中用到的指令。我们将会使用一个简单的指令ForEach到我们的模板中，通过制定指令属性就可以了，很简单。
现在我们将增加一个构造函数到我们的TodoApp类中：
constructor(todoStore: TodoStore) {
this.todoStore = todoS
参数todoStore:TodoStore告诉Angular的DI系统要在初始化阶段注入TodoStore服务的实例到我们组件中。这就是IoC,我们不需要自己去获得依赖，而是让Angular自动的实例化依赖，然后注入到我们组件中。所以我们拿到了TodoStore的实例化，并存到变量totoStore中。
我们先把add和toggleTodoState方法放在一边，现在我们来看下我们的TodoStore服务。
首先在services目录下创建一个名为TodoStore.js的文件，同时把下面的代码复制进去：
export class TodoStore {
constructor(){
this.todoList = [];
add(item){
this.todoList.unshift({text:item,done:false});
TodoStore是一个简单的js类，它有一个构造函数和一个add方法。构造函数创建了一个简单的数组todoList用于存放我们的todo对象。我们在模板中使用这个数组去渲染todo数据。每当一个新的toto对象被创建时候都会调用add方法。add方法接收文本参数后包装成一个对象放入到todoList数组中。注意下，done属性用来表示todo对象是否被完成了。最后我们使用export关键字来导出这个class。
现在回到TodoApp.es6，来看下我们如何导入上面的类的。
在templates目录下创建todo.html文件，内容如下：
@import url(/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(/css?family=Open+Sans);
.container{
font-family: 'Open Sans', sans-
margin-top: 200
text-decoration: line-
color : #999999;
.bottom-offset{
margin-bottom: 20
&div class="container"&
&div class="row"&
&div class="col-xs-4 col-xs-offset-4"&
&div class="bottom-offset"&
&input type="text" class="form-control" placeholder="Write something here" autofocus #newtodo (keyup)="add($event,newtodo)"/&
&div *foreach="#todo in todoStore.todoList"&
&input type="checkbox" [checked]="todo.done" (click)="toggleTodoState(todo)"/& &span [class.done]="todo.done"&{{todo.text}}&/span&
&div class="col-xs-4"&&/div&
每个模板都有自己的样式。你可以先创建一个样式表，然后使用@import来引入到模板来。我们使用@import引入了Bootstrap得样式和google的字体样式。另外还有一些定制的css样式，当然你也可以写到另一个css文件中然后引入进来。
模板中又如下两部分：
供用户输入的输入框
显示todo对象的区域
来看下如何创建text输入框：
&input type="text" class="form-control" placeholder="Write something here" autofocus #newtodo (keyup)="add($event,newtodo)"/&
现在我们创建魔法般的双向数据绑定。不像Angular1.x，这里通过加入#modelname就可以实现数据绑定了。在这个例子中我们把模型newtodo绑定在了Input输入框中，输入框会和模型newtodo的数据自动同步的。同时我们想在按enter键的时候创建一个todo对象，因此我们在keyup事件上写了TodoApp#add()方法。
(keyup)="add($event,newtodo)"
现在我们来创建一个展示todo列表的div，看下面的代码：
&div *foreach="#todo in todoStore.todoList"&
&input type="checkbox" [checked]="todo.done" (click)="toggleTodoState(todo)"/&
&span [class.done]="todo.done"&{{todo.text}}&/span&
我们使用*foreach来循环todo列表，通过#todo对象来取出todoStore.todoList中每个对象。
针对每个对象，我们有一个checkbox和一个todo内容文本。内容文本通过{{todo.text}}来展示，如果该todo已经完成，则加上一个class,看下代码：[class.done]=”todo.done”。当你看到[]包围着一个属性的时候，则说明这个属性值是数据绑定表达式。因此当todo.done变化的时候，done属性会被新增和移除。类似的，我们使用[]来包围着checkbox的checked属性。下一步我们要做的就是当checkbox被点击的时候要触发TodoApp#toggleTodoState()方法。
再来看TodoApp.es6文件
现在我们看下TodoApp中得两个方法：
add($event,newtodo){
if($event.which === 13){
this.todoStore.add(newtodo.value);
newtodo.value = '';
add方法有两个参数：$event和newtodo。该方法会每当keyup事件被触发的时候执行。在方法内部，我们做了一个是否是enter键的判断，如果是，则调用this.todoStore.add(newtodo.value)。注意，虽然我们在模板中引入的是模型newtodo，但是实际的值是存在newtodo.value中得。下一步是清除掉newtodo.value，这样输入框中得取值也会被清掉（因为双向数据绑定），我们就可以新增新的todo项了。
toggleTodoState()
toggleTodoState(todo){
todo.done = !todo.
这个方法会在checkbox被点击的时候触发，我们只是简单的toggle了todo.done属性的值。这样，因为有数据绑定，我们会看到已经完成的todo会有删除线效果（还记得.done的class样式么）。
创建index.html
最后一步是在跟目录下创建index.html来加载我们的主模块，内容如下：
&title&Angular 2 Todo App&/title&
&script src="/dist/es6-shim.js"&&/script&
&todo-app&Warming up...&/todo-app&
System.paths = {
'angular2/*':'/angular2/*.js',
'rtts_assert/*': '/rtts_assert/*.js',
'services/*' : '/services/*.js',
'todoApp': 'TodoApp.es6'
System.import('todoApp');
这里有一些注意点：
/dist/es6-shim.js应该包含在head标签里面，该文件包含了Traceur, ES6模块加载器, System, Zone以及Traceur的注解选项。
我们的TodoApp组件的选择器指向的是 &todo-app&Warming up...&/todo-app&，Warming up...会在组件加载完成之前一直显示着。
System.paths告诉Angular到哪里去寻找模块。我们指定了属性’services/’ : ’/services/.js’，这就是为什么Angular能够找到TodoApp.es6中TodoStore得原因。类似，我们还制定了todoApp的路径和一些其他必须得模块。
最后，System.import(’todoApp’)加载了todoApp模块，这样就可以完成整个应用了。如果你仔细研究TodoApp.es6，你会发现最后一行bootstrap(TodoApp)，它是用来帮助bootstrap来初始化模块的。
到根目录下，输入http-server。你就可以通过来访问了。
注意：如果你没有http-server,你可以通过如下命令安装下：
sudo npm install -g http-server
我希望你已经很愉快的阅读了这篇文章。我对Angular2.0充满兴奋。如果你有啥想法可以直接留言或者参与上得讨论。
参考文档：
本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接()，本站和作者保留随时要求删除文章的权利！
添加了一枚【评注】:视图
赞了此文章！
WRITTEN BY
PUBLISHED IN
本专栏其他文章
浏览:4611赞:1
浏览:20989赞:6
浏览:8085赞:3本文由&– 小峰原创，转载请看清文末的转载要求，欢迎参与我们的！
AngularJS现在非常热门，是Google推出的一款非常优秀的前端JS框架。AngularJS最核心的概念是MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。目前AngularJS扩展还比较少，本文就向各位分享6个实用强大的AngularJS扩展应用。
1、AngularJS 认证模块 Satellizer
Satellizer是一个端到端的基于 token 的AngularJS认证模块，Satellizer支持Google、Facebook、LinkedIn 和 Twitter 认证体系，并且也提供邮箱和密码的登录方式，另外Satellizer支持 OAuth 1.0 和 2.0 规范，所以你可以更加灵活地扩展认证方法。
下面是Satellizer的使用代码示例：
angular.module('MyApp', ['satellizer'])
.config(function($authProvider) {
$authProvider.facebook({
clientId: '642',
$authProvider.google({
clientId: '-v5hm2amv4pvico3asfi97f54sc51ji4o.'
$authProvider.github({
clientId: '0ba2600b1dbdb756688b'
$authProvider.linkedin({
clientId: '77cw786yignpzj'
$authProvider.twitter({
url: '/auth/twitter'
$authProvider.oauth2({
name: 'foursquare',
url: '/auth/foursquare',
redirectUri: window.location.origin,
clientId: 'MTCEJ3NGW2PNNB31WOSBFDSAD4MTHYVAZ1UKIULXZ2CVFC2K',
authorizationEndpoint: '/oauth2/authenticate',
官方地址：/sahat/satellizer
2、AngularJS UI 扩展 AngularUI
AngularUI为AngularJS提供了很多UI增强效果，并且提供了IE、jQuery 兼容，以及一些常用 UI 组件。
AngularUI包含以下模块：
UI-Modules
IDE Plugins
官方主页：http://angular-ui.github.io/
3、Bootstrap 集成 AngularJS 模块 AngularStrap
AngularStrap可以非常完美地将Bootstrap集成到AngularJS中，AngularStrap包含大部分支持AngularJS指令，所以并不需要依赖其他的样式和脚本。
下面是一个示例：
angular.module(‘myApp’)
.controller(‘DemoCtrl’, function($scope, $modal) {
// Show a basic modal from a controller
var myModal = $modal({title: ‘My Title’, content: ‘My Content’, show: true});
// Pre-fetch an external template populated with a custom scope
var myOtherModal = $modal({scope: $scope, template: ‘modal/docs/modal.tpl.demo.html’, show: false});
// Show when some event occurs (use $promise property to ensure the template has been loaded)
$scope.showModal = function() {
myOtherModal.$promise.then(myOtherModal.show);
官方主页：http://mgcrea.github.io/angular-strap/
4、AngularStrap 实时、多用户应用 GoAngular
GoAngular 可让你轻松使用 AngularJS 和 GoInstant 构建实时、多用户的应用程序。
下面是config.js文件：
window.CONFIG = {
connectUrl: 'https://goinstant.net/YOUR_ACCOUNT/YOUR_APP'
打开一个示例页面：
$ open examples/index.html
5、AngularJS UI 组件 adapt-strap
adapt-strap 是 AngularJS UI 组件和实用工具，是基于 AngularJS 1.2+ 和 bootstrap 3 的。
Table Lite - 简单的列表 UI
Table AJAX - 高级的列表 UI
Tree Browser - 简单的树形 UI
Loading Indicators - 简单的指令
Global configuration - 所有组件都是全局配置使用
Customizable - 所有组件都是支持高度自定义的
官方主页：/Adaptv/adapt-strap
6、AngularJS 的国际化模块 angular-translate
angular-translate 是一个 AngularJS 的模块，用于简化 i18n 和 l10n 应用的便携，实现了延迟加载和多元化。
DEMO示例：
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
$translateProvider.preferredLanguage('en');
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
官方主页：http://angular-translate.github.io/
随着AngularJS的不断流行，会有更多的扩展应用，并大部分都是开源的项目，AngularJS真的非常方便，你不妨也可以试试。
本文链接：
本文作者：&– 小峰
[&原创作品，转载必须在正文中标注并保留原文链接和作者等信息。]
在文章中找不到问题答案？您还可以
热门栏目订阅使用 AngularJS 开发一个大规模的单页应用（SPA） - 技术翻译 - 开源中国社区
当前访客身份：游客 [
已有文章 2419 篇
当前位置：
使用 AngularJS 开发一个大规模的单页应用（SPA）
英文原文：
0人收藏此文章,
推荐于 2年前 (共 46 段, 翻译完成于 09-07) ()
参与翻译(6人)：
自定义服务 - AngularJS 服务
AngularJS 服务是可替换的对象，这些对象使用依赖注入连接在一起。 在程序里，你可以使用服务来组织和共享你的代码。 AngularJS 服务是延迟初始化的 – 只有当应用程序组件依赖它时，AngularJS 才会初始化一个服务。
AngularJS 服务是单例类型 – 依赖服务的每个组件都会引用AngularJS 服务工厂类产生的一个实例。 虽然AngularJS 提供一些常用的服务（如$http），但是对于大多数应用来说，你可能想要创建自己的服务。
&翻译的不错哦!
顾客维护控制器依赖于&CustomerService. 这个顾客服务组件被应用程序用于组织所有访问和向应用程序服务器传递顾客相关数据所需要的Web API路由. 为了保持示例应用程序所有控制器中路由的清晰, 我为每一个部分（包括顾客、订单、产品）都创建了服务层. AngularJS 服务能帮助你组织好你的JavaScript，以获得更好的重用性和可维护性.
顾客服务引用了由控制器设置的回调函数. 这个回调函数会在服务器调用完成时执行. 如你所能看见的，顾客服务没有执行向服务器发起HTTP调用的实际工作。在定义语句中，则会有对将会被动态加载进来的ajaxService的依赖.
//&customerService.js
define([&application-configuration&,&&ajaxService&],&function&(app)&{
&&&&app.register.service(&customersService&,&[&ajaxService&,&function&(ajaxService)&{
&&&&&&&&this.importCustomers&=&function&(successFunction,&errorFunction)&{
&&&&&&&&&&&&ajaxService.AjaxGet("/api/customers/ImportCustomers",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&};
&&&&&&&&this.getCustomers&=&function&(customer,&successFunction,&errorFunction)&{&&&&&&&&&&
&&&&&&&&&&&&ajaxService.AjaxGetWithData(customer,&"/api/customers/GetCustomers",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&};
&&&&&&&&this.createCustomer&=&function&(customer,&successFunction,&errorFunction)&{
&&&&&&&&&&&&ajaxService.AjaxPost(customer,&"/api/customers/CreateCustomer",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&};
&&&&&&&&this.updateCustomer&=&function&(customer,&successFunction,&errorFunction)&{
&&&&&&&&&&&&ajaxService.AjaxPost(customer,&"/api/customers/UpdateCustomer",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&};
&&&&&&&&this.getCustomer&=&function&(customerID,&successFunction,&errorFunction)&{
&&&&&&&&&&&&ajaxService.AjaxGetWithData(customerID,&"/api/customers/GetCustomer",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&};
&翻译的不错哦!
为本应用程序所创建的AJAX服务将会被所有的HTTP请求重用。AJAX 服务使用了AngularJS 的&$http 服务&， 该服务会实际执行面向服务器的 HTTP GET 和 POST 调用. 服务器调用的则是 RESTful 服务，返回的是简单的 JSON 对象. & & & & AJAX 服务还使用了blockUI在HTTP请求进行时使用UI来阻塞用户的交互. 此外你还可以应用安全功能来检查用户是否已经被认证. 此应用程序使用了Forms Authentication，它会在每一个请求时附带向服务器发送一个认证的token. 我已经添加了一行代码，通过检查来自服务器的响应消息中一个普通的IsAuthenicated&属性，来看看用户是否仍然是通过认证的.
&翻译的不错哦!
如果session已经超时，则对IsAuthenicated的检查会将用户路由到登陆页面. 让一个AJAX服务成为管理你所有的AJAX调用的中心，可以使得对整个应用程序的AJAX调用功能的实现和修改变得容易起来.
//&ajaxService.js
define([&application-configuration&],&function&(app)&
&&&&app.register.service(&ajaxService&,&[&$http&,&&blockUI&,&function&($http,&blockUI)&{
&&&&&&&&this.AjaxPost&=&function&(data,&route,&successFunction,&errorFunction)&{
&&&&&&&&&&&&blockUI.start();
&&&&&&&&&&&&setTimeout(function&()&{
&&&&&&&&&&&&&&&&$http.post(route,&data).success(function&
&&&&&&&&&&&&&&&&&&&&&&&&&&(response,&status,&headers,&config)&
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&successFunction(response,&status);
&&&&&&&&&&&&&&&&}).error(function&(response)&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&if&(response.IsAuthenicated&==&false)&
&&&&&&&&&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&&&&&&&&&window.location&=&"/index.html";&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&errorFunction(response);
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&},&1000);
&&&&&&&&this.AjaxGet&=&function&(route,&successFunction,&errorFunction)&{
&&&&&&&&&&&&blockUI.start();
&&&&&&&&&&&&setTimeout(function&()&{
&&&&&&&&&&&&&&&&$http({&method:&&GET&,&url:&route&}).success(
&&&&&&&&&&&&&&&&function&(response,&status,&headers,&config)&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&successFunction(response,&status);
&&&&&&&&&&&&&&&&}).error(function&(response)&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&if&(response.IsAuthenicated&==&false)&
&&&&&&&&&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&&&&&&&&&window.location&=&"/index.html";&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&errorFunction(response);
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&},&1000);
&&&&&&&&this.AjaxGetWithData&=&function&(data,&route,&successFunction,&errorFunction)&{
&&&&&&&&&&&&blockUI.start();
&&&&&&&&&&&&setTimeout(function&()&{
&&&&&&&&&&&&&&&&$http({&method:&&GET&,&url:&route,&params:&data&}).success(
&&&&&&&&&&&&&&&&function&(response,&status,&headers,&config)&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&successFunction(response,&status);
&&&&&&&&&&&&&&&&}).error(function&(response)&{
&&&&&&&&&&&&&&&&&&&&blockUI.stop();
&&&&&&&&&&&&&&&&&&&&if&(response.IsAuthenicated&==&false)&
&&&&&&&&&&&&&&&&&&&&{&
&&&&&&&&&&&&&&&&&&&&&&&&window.location&=&"/index.html";&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&errorFunction(response);
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&},&1000);
用于AJAX服务的额外配置
在application-configuration.js文件中，加入了用于AJAX服务器请求的额外配置. 为了配置AngularJS 跟随每次请求传递Forms Authentication的 cookie 信息, $httpProvider 会需要一个用于让&withCredentials 属性被设置为true的值.
&翻译的不错哦!
在http连接中，AngularJS 不默认返回一个XMLHttpRequest对象，但是你可以在$httpProvider服务里配置。 当浏览器请求中含有一些阻塞UI展示的配置项时，你可以使用blockUI组件，实现在前台展示自定义的消息。
//&application-configuration.js
app.config(function&($httpProvider)&{
&&&&$httpProvider.mon[&X-Requested-With&]&=&&XMLHttpRequest&;
&&&&$httpProvider.defaults.withCredentials&=&
app.config(function&(blockUIConfigProvider)&{
&&&&//&修改默认的提示信息
&&&&blockUIConfigProvider.message("executing...");
&&&&//&修改UI不可见时默认的延迟时间为100ms
&&&&blockUIConfigProvider.delay(1);
&&&&//&禁用自动阻塞页面展示配置项
&&&&blockUIConfigProvider.autoBlock(false);
在每个页面请求中进行身份验证
在示例中，indexController控制前台页面的展示。 基于这一点，加载配置项时，我在application-configuration.js中定义indexController。这样，在应用程序运行之前，indexController和AngularJS一起被加载、注册。 大型的网页应用中，对于每个页面的请求，通常优先进行身份验证、授权。 为了解决这个问题，indexController包含一个函数，实现在每个页面请求前，对用户身份进行验证。
&翻译的不错哦!
AngularJS 可以配置、监听客户端页面上用户触发的事件。 其中一个事件是$routeChangeStart。 每次请求路由定位时，都会触发这个事件。 为了使监听器工作，你只需使用$scope.$on指令配置下这个事件。
由于indexController 控制页面的跳转，因此可以在indexController 里配置$routeChangeStart 事件。在下面的示例中，为了判断用户是否被授权，浏览器在页面请求前优先执行了一个http get请求。 如果返回的isAuthenicated值为false，浏览器会跳转到登陆页面。 另外，你可以进行额外的安全性检查来判断用户是否有权限访问请求的页面。
//&indexController.js
var&indexController&=&function&($scope,&$rootScope,&$http,&$location,&blockUI)&{
&&&&&&&&&&&&&
&&&&$scope.$on(&$routeChangeStart&,&function&(scope,&next,&current)&{&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&$scope.authenicateUser($location.path(),
&&&&&&&&&&&&&&&&$scope.authenicateUserComplete,&$scope.authenicateUserError);&&&&&&&&&&&&&&&&&
&&&&$scope.authenicateUser&=&function&(route,&successFunction,&errorFunction)&{
&&&&&&&&var&authenication&=&new&Object();
&&&&&&&&authenication.route&=&
&&&&&&&&$scope.AjaxGet(authenication,&"/api/main/AuthenicateUser",&
&&&&&&&&&&&&&&&&successFunction,&errorFunction);
&&&&&&&&&&&
&&&&$scope.authenicateUserComplete&=&function&(response)&{&&&&&&&&&
&&&&&&&&if&(response.IsAuthenicated==false)&&&&
&&&&&&&&{&&&&&&&&&&&
&&&&&&&&&&&&window.location&=&"/index.html";
&翻译的不错哦!
AngularJS $rootScope
在AngularJS里面,每个应用程序都有一个单独的root scope. 所有其他scope都是root scope的衍生物.&Scope隔离了模型和视图. 你可以将属性设置在$rootScope之下,这些属性在外壳页面(shell page)的生存周期内一直保留其属性值. 只要用户刷新了浏览器,$rootScope的值就会消失,必须要重新设置. & & & & 当示例应用程序初始化加载的时候,它使用$rootScope保存从服务器返回的菜单选项.在用户登录后,拓展后的菜单选项列表将会从服务器返回,它允许用户访问应用程序的其它部分.$rootScope是一个很好的用来保存菜单选项等会话级别信息的地方.
$rootScope.MenuItems&=&response.MenuI
在外壳页面(shell page), 菜单项是数据绑定到无序列表的,在每个页面请求时保持设定的状态.
&div&class="navbar-collapse&collapse"&id="MainMenu"&
&ul&class="nav&navbar-nav"&ng-repeat="menuItem&in&MenuItems"&
&&&&&li&&&a&href="{{menuItem.Route}}"&{{menuItem.Description}}&&/a&&&/li&
&翻译的不错哦!
下面的示例中使用了AngularUI的各种UI组件。AngularUI 是AngularJS 框架的一个辅助套件。示例中使用的主要组件大部分来在AngularUI 的一个子集UI Bootstrap。UI Bootstrap是从Twitter Bootstrap派生出来的，它使用AngularJS编码实现。 UI Bootstrap库包含了一套使用Bootstrap标识和样式的AngularJS 指令。 这使得它不依赖jQuery.js和Bootstrap.js。
Alert (ui.bootstrap.alert)
AngularJS Alert 是由Bootstrap alert 派生过来的。 使用ng-repeat指令，可以实现使用动态模型里的数据弹窗提示。
&div&style="padding-top:20px"&
&alert&ng-repeat="alert&in&alerts"&type="{{alert.type}}"&close="closeAlert($index)"&
&&&&&&&&&div&ng-bind-html="MessageBox"&&/div&
Alert指令支持展示红色的错误信息，绿色的提示信息和黄色的警告信息。 在示例的修改用户信息页面，当用户没有输入必填字段用户名时，页面会弹出一个错误提示。 我扩展了alert的功能：当发生错误时，alert可以高亮显示待输入的文本框。
&翻译的不错哦!
为了更深入的拓展警告指令, 这个示例应用程序包含了一个自定义的指令服务(custom alerts service).它可以在整个应用程序中使用,以渲染警告信息.信息的内容设置在$rootScope里面,它来自于服务器的业务层的验证过程,并在AJAX请求完成后渲染到客户端.
//&alertsService.js
define([&application-configuration&],&function&(app)&
&&&&app.register.service(&alertsService&,&[&$rootScope&,&function&($rootScope)&{
&&&&&&&&$rootScope.alerts&=&[];
&&&&&&&&$rootScope.MessageBox&=&"";
&&&&&&&&this.SetValidationErrors&=&function&(scope,&validationErrors)&{
&&&&&&&&&&&&for&(var&prop&in&validationErrors)&{
&&&&&&&&&&&&&&&&var&property&=&prop&+&"InputError";
&&&&&&&&&&&&&&&&scope[property]&=&
&&&&&&&&&&&&}&&&&&&&
&&&&&&&&this.RenderErrorMessage&=&function&(message)&{
&&&&&&&&&&&&var&messageBox&=&formatMessage(message);
&&&&&&&&&&&&$rootScope.alerts&=&[];
&&&&&&&&&&&&$rootScope.MessageBox&=&messageB
&&&&&&&&&&&&$rootScope.alerts.push({&&type&:&&danger&,&&msg&:&&&&});
&&&&&&&&};
&&&&&&&&this.RenderSuccessMessage&=&function&(message)&{
&&&&&&&&&&&&var&messageBox&=&formatMessage(message);
&&&&&&&&&&&&$rootScope.alerts&=&[];
&&&&&&&&&&&&$rootScope.MessageBox&=&messageB
&&&&&&&&&&&&$rootScope.alerts.push({&&type&:&&success&,&&msg&:&&&&});
&&&&&&&&};
&&&&&&&&this.RenderWarningMessage&=&function&(message)&{
&&&&&&&&&&&&var&messageBox&=&formatMessage(message);
&&&&&&&&&&&&$rootScope.alerts&=&[];
&&&&&&&&&&&&$rootScope.MessageBox&=&messageB
&&&&&&&&&&&&$rootScope.alerts.push({&&type&:&&warning&,&&msg&:&&&&});
&&&&&&&&};
&&&&&&&&this.RenderInformationalMessage&=&function&(message)&{
&&&&&&&&&&&&var&messageBox&=&formatMessage(message);
&&&&&&&&&&&&$rootScope.alerts&=&[];
&&&&&&&&&&&&$rootScope.MessageBox&=&messageB
&&&&&&&&&&&&$rootScope.alerts.push({&&type&:&&info&,&&msg&:&&&&});
&&&&&&&&};
&&&&&&&&this.closeAlert&=&function&(index)&{
&&&&&&&&&&&&$rootScope.alerts.splice(index,&1);
&&&&&&&&};
&&&&&&&&function&formatMessage(message)&{
&&&&&&&&&&&&var&messageBox&=&"";
&&&&&&&&&&&&if&(angular.isArray(message)&==&true)&{
&&&&&&&&&&&&&&&&for&(var&i&=&0;&i&&&message.&i++)&{
&&&&&&&&&&&&&&&&&&&&messageBox&=&messageBox&+&message[i];
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&else&{
&&&&&&&&&&&&&&&&messageBox&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&return&messageB
当创建一个客户记录出错时,下面的代码被执行,同时验证警告服务的调用过程.
$scope.createCustomerError&=&function&(response)&{
&&&&alertsService.RenderErrorMessage(response.ReturnMessage);
&&&&$scope.clearValidationErrors();
&&&&alertsService.SetValidationErrors($scope,&response.ValidationErrors);
&翻译的不错哦!
Datepicker控件 (ui.bootstrap.datepicker)
UI Bootstrap Datepicker控件&是一种清洁、灵活和完全可定制的日期选择器。用户可以浏览数月乃至数年。
把Datepicker输入框（input box）标签里,只需把Datepicker相关的参数添加到输入框,然后添加一个按钮,用户可以通过单击日历图标显示Datepicker。
&td&class="input-label"&align="right"&&label&class="required"&Required&Ship&Date:&/label&&/td&
&td&class="input-box"&style="height:50px"&
&div&ng-bind="RequiredDate"&ng-show="DisplayMode"&&/div&
&div&ng-show="EditMode"&
&div&class="row"&
&div&class="col-md-6"&
&p&class="input-group"&
&input&ng-class="{&validation-error&:&RequiredDateInputError}"&type="text"&style="width:100px"
&&&&&&&&&&&&&&&datepicker-popup="MM/dd/yyyy"
&&&&&&&&&&&&&&&ng-model="RequiredDate"
&&&&&&&&&&&&&&&is-open="opened"
&&&&&&&&&&&&&&&datepicker-options="dateOptions"
&&&&&&&&&&&&&&&date-disabled="disabled(date,&mode)"
&&&&&&&&&&&&&&&ng-required="true"
&&&&&&&&&&&&&&&close-text="Close"&/&
&button&type="button"&ng-click="open($event)"&&i&style="height:10px"
&&&&&&&&&&&&&&class="glyphicon&glyphicon-calendar"&&/i&&/button&
&翻译的不错哦!
真的要学吗。为什么我不喜欢它，是我太懒吗？