angular2-ionic2
angular2-ionic2 copied to clipboard
semlinker
Angular & Ionic 资料汇总
一、模板语法简介 插值表达式 Hello {{name}} 等价于 模板表达式 1.属性绑定 1.1输入属性的值为常量 等价于 1.2输入属性的值为实例属性 等价于 2.事件绑定 等价于 模板引用变量 Pause 等价于 双向绑定 等价于 *与template 1.*ngIf 最终转换为 2.*ngFor 最终转换为 常用指令简介 NgIf NgSwitch 有时候需要根据不同的条件，渲染不同的元素，此时我们可以使用多个 ngIf 来实现。 Var...
Angular 2 的指令有以下三种： - 组件(Component directive)：用于构建UI组件，继承于 Directive 类 - 属性指令(Attribute directive): 用于改变组件的外观或行为 - 结构指令(Structural directive): 用于动态添加或删除DOM元素来改变DOM布局 组件 import { Component } from '@angular/core'; @Component({ selector: 'my-app', // 定义组件在HTML代码中匹配的标签 template: `Hello...
IoC 是什么 Ioc - Inversion of Control , 即"控制反转"。在开发中， IoC 意味着你设计好的对象交给容器控制，而不是使用传统的方式，在对象内部直接控制。 如何理解好 IoC 呢？理解好 IoC的关键是要明确"谁控制谁，控制什么，为何是反转(有反转就应该有正转)，哪些方面反转了"，我们来深入分析一下。 - 谁控制谁，控制什么： 在传统的程序设计中，我们直接在对象内部通过 new 的方式创建对象，是程序主动创建依赖对象；而 IoC 是有专门一个容器来创建这些对象，即由 IoC 容器控制对象的创建；谁控制谁？当然是 IoC 容器控制了对象；控制什么？主要是控制外部资源获取。 - 为何是反转了，哪些方面反转了： 有反转就有正转，传统应用程序是由我们自己在对象中主动控制去获取依赖对象，也就是正转；而反转则是由容器来帮忙创建及注入依赖对象；为何是反转？因为由容器帮我们查找及注入依赖对象，对象只是被动的接受依赖对象，所以是反转了；哪些方面反转了？依赖对象的获取被反转了。 IoC...
Angular 2 Decorators(装饰器) - part 1 在我们深入了解 Angular 2 中 @NgModule、@Component、@Injectable 等常见的装饰器之前，我们要先了解 TypeScript 中的装饰器。装饰器是一个非常酷的特性，最早出现在 Google 的 AtScript 中，它出现的目的是为了让开发者，开发出更容易维护、更容易理解的 Angular 代码。令人兴奋的是，在2015年 Angular 团队跟 MicroSoft 的 TypeScript 团队经过数月的的交流，最终决定采用 TypeScript 来重写 Angular 2...
Angular 2 Provider 依赖注入(DI) 是 Angular 2 的核心，在深入了解DI的工作原理之前，我们必须先搞清楚 Provider 的概念。 在 Angular 2 中我们使用 Provider 来描述与 Token 关联的依赖对象的创建方式。Angular 2 中依赖对象的创建方式有四种，它们分别是： - useClass - useValue - useExisting - useFactory useClass @Injectable()...
项目背景 公司的产品是一款2B的在线教育产品，已有的客户大多数都有定制化的需求，主要包括UI主题和二次开发的功能。本文围绕的主要内容是如何基于 Ionic 2 平台提供的工具，实现灵活的多主题方案。 Ionic 2 提供的主题方案 Ionic 2 使用 $color map 的 key 作为组件的输入属性，用于设置组件的样式。$colors map 中的内容如下： // variables.scss 文件（路径: src/theme/variables.scss ） $colors: { primary: #387ef5, secondary: #32db64, danger:...
Angular 2 通过引入 forwardRef 让我们可以在使用构造注入时，可以使用尚未定义的依赖对象类型。下面我们先看一下如果没有使用 forwardRef ，在开发中可能会遇到的问题： @Injectable() class Socket { constructor(private buffer: Buffer) { } } console.log(Buffer); // undefined @Injectable() class Buffer { constructor(@Inject(BUFFER_SIZE) private size: Number) { }...
字符串Token VS Type类型Token 在 Angular 2 中，provider 的 token 的类型可以是字符串或 Type 类型。我们可以根据实际应用场景，选用不同的类型。假设我们有一个服务类 DataService，并且我们想要在组件中注入该类的实例，我们可以这样使用： @Component({ selector: 'my-component', providers: [ { provide: DataService, useClass: DataService } ] }) class MyComponent { constructor(private...
Multi providers 让我们可以使用相同的 Token 去注册多个 Provider ，具体如下： const SOME_TOKEN: OpaqueToken = new OpaqueToken('SomeToken'); var injector = ReflectiveInjector.resolveAndCreate([ provide(SOME_TOKEN, {useValue: 'dependency one', multi: true}), provide(SOME_TOKEN, {useValue: 'dependency two', multi: true}) ]);...
一、typings 中包含 Type Definitions 文件 1.使用 `npm` 安装依赖 ```shell npm install bcryptjs --save ``` 2.添加 `Type Definitions` 文件阻止编译器错误 2.1 安装 `typings` ```shell npm install -g typings ``` 2.2 安装 `bcryptjs...