相较于angularjs中的ng-translate, angular2也有适合自己的国际化模块，就是ngx-translate。 项目地址：https://github.com/ngx-translate/core 使用angular-cli初始化项目： ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-transl

语言包结构设计 1.目录结构设计 common lang server side lang - 与后台共用的部分 front end side lang - 前端通用的部分 feature lang found found.zh-cn.json - 发现模块 - 简体中文语言包 found.zh-tw.json - 发现模块 - 繁体中文(台湾)语言包 found.zh-hk.json - 发现模

Angular 2 的口号是 - "一套框架，多种平台。同时适用手机与桌面(One framework.Mobile & desktop.)"，即 Angular 2 是支持开发跨平台的应用，比如：Web应用、移动Web应用、原生移动应用和原生桌面应用等。 为了能够支持跨平台，Angular 2 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer 、抽象类 Ro

Hello, Angular 2 After couples of Betas and 7 RCs, Angular 2 GA is finally available for production. Angular 2 is a compoenent based frontend framework, and it is completely refactored from Angular 1.

Getting Started In the first post, we used Angular CLI to generate the project skeleton, and used ng serve to run this application on Angular CLI built-in webpack dev server. Now we wil add more compo

#Create a new post Since Angular2 RC2 introduced a complete new form modules(search @angular/forms in https://npmjs.com), it allow you use template driven form like Angular 1.x, it also support the pr

Authenticiaton We follow the steps in Angular 1.x sample. I will create some facilities. A Signin and Signup components. A AuthService to wrap HTTP authentiction service. A AppShowAuthed directive to

TemplateRef 在介绍 TemplateRef 前，我们先来了解一下 HTML 模板元素 - <template> 。模板元素是一种机制，允许包含加载页面时不渲染，但又可以随后通过 JavaScript 进行实例化的客户端内容。我们可以将模板视作为存储在页面上稍后使用的一小段内容。 在 HTML5 标准引入 template 模板元素之前，我们都是使用 <script> 标签进行客户端模板

在介绍 Angular 2 ViewEncapsulation 之前，我们先来介绍一下 Web Components 标准。 Web Components 近年来，web 开发者们通过插件或者模块的形式在网上分享自己的代码，便于其他开发者们复用这些优秀的代码。同样的故事不断发生，人们不断的复用 JavaScript 文件，然后是 CSS 文件，当然还有 HTML 片段。但是你又必须祈祷这些引入的代

angular-cli自身支持Scss预处理器，Scss比css更加方便灵活，而且层次清晰，代码整洁。关于Scss:http://www.ruanyifeng.com/blog/2012/06/sass.html 如果想设置项目默认使用Scss可以使用如下命令新建项目： ng new My_New_Project --style=scss 这样整个项目的默认样式文件就是scss文件格式的了。 参考

ViewChild ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，才能正确获取查询的元素。 @ViewChild 使用模板变量名 import { Component, ElementRef, ViewChild, AfterViewInit } from '@a

在 Angular 2 学习过程中，相信很多初学者对 constructor 和 ngOnInit 的应用场景和区别会存在困惑，本文我们会通过实际的例子，为读者一步步解开困惑。 constructor 在 ES6 中就引入了类，constructor(构造函数) 是类中的特殊方法，主要用来做初始化操作，在进行类实例化操作时，会被自动调用。马上来个例子： class AppComponent {

前面的文章我们已经介绍过了 Angular 2 的 ViewChild & ViewChildren 属性装饰器，现在我们就来介绍一下它们的兄弟 ContentChild 和 ContentChildren 属性装饰器。我想通过一个简单的需求，来引入我们今天的主题。具体需求如下： 熟悉 Angular 1.x 的用户，应该都知道 ng-transclude 指令，通过该指令我们可以非常容易实现上述

在介绍 Angular 2 Directive Lifecycle (生命周期) 之前，我们先来介绍一下 Angular 2 中 Directive (指令) 与 Component (组件) 的关系。 我们再来看一下 Angular 2 中定义的指令和组件接口： // angular2/packages/core/src/metadata/directives.ts export interf

在 Angular 应用程序中，包含了我们通过 Angular 提供的 API 实现的自定义指令。这些自定义指令对浏览器来说，都是无法识别的，因此每个 Angular 应用程序在运行前，都需要经历一个编译的阶段。 在 Angular 2 中有两种编译模式： JIT - Just-In-Time AOT - Ahead-Of-Time JIT - Just-In-Time Just-in-Time

前言 接上篇，虽然一下子从创建项目就到了http通信，看上去是有点猴急，但没办法，走到哪里就算哪里吧。在这里，我描述三个场景，即系统的注册与登录，及登录后的操作。 1、注册场景，前端页面传入用户名密码，通过一个api接口传到后台，在后台对这用户及密码进行保存； 2、登录场景，前端用户传入用户名及密码，通过api接口传到后台，在后台进行配对，如果配对成功，则在后台派发（返回）一个令牌（id_toke

Change Detection (变化检测) 是 Angular 2 中最重要的一个特性。当组件中的数据发生变化的时候，Angular 2 能检测到数据变化并自动刷新视图反映出相应的变化。 在介绍变化检测之前，我们要先介绍一下浏览器中渲染的概念，渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其他数据对象。然而视图可以是页面中的段落、表单、按钮等

更新时间 - 2017-03-20 16：15； 更新内容 - 我有话说模块 在 Angular 2 Change Detection - 1 文章中，我们介绍了浏览器渲染、Zone、NgZone 的概念，本文将详细介绍 Angular 2 组件中的变化检测器。 组件和变化检测器 如你所知，Angular 2 应用程序是一颗组件树，而每个组件都有自己的变化检测器，这意味着应用程序也是一颗变化检测器

1.创建package.json文件 cd xhhAngular npm init package.json: { "name": "xhhangular", "version": "1.0.0", "description": "", "scripts": { "start": "webpack-dev-server --inline --hot --colors --

1、 安装模块 npm install angular2-image-upload --save 2、配置app.module.ts @NgModule({ imports: [ ..., ImageUploadModule.forRoot(), ... ] }) 3、模板中使用 <image-upload></image-uploa