AngularJS2

Angular 2 架构

Angular 2 架构

Angular 2 架构 Angular 2 应用程序应用主要由以下 8 个部分组成: 1、模块 (Modules) 2、组件 (Components) 3、模板 (Templates) 4、元数据 (Metadata) 5、数据绑定 (Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展... »

Angular 2 数据显示

Angular 2 数据显示

Angular 2 数据显示 本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式: 通过插值表达式显示组件的属性 通过 NgFor 显示数组型属性 通过 NgIf 实现按条件显示 通过插值表达式显示组件的属性 要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}。 以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改... »

Angular 2 用户输入

Angular 2 用户输入

Angular 2 用户输入 用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发 DOM 事件。 本章中,我们将学习如何使用 Angular 事件绑定语法来绑定这些事件。 以下Gif图演示了该实例的操作: 源代码可以在文章末尾下载。 绑定到用户输入事件 我们可以使用 Angular 事件绑定机制来响应任何 DOM 事件 。 以下实例将绑定了点击事件: 点我! 等号左边的 (click... »

Angular 2 表单

Angular 2 表单

Angular 2 表单 本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。 利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也为这些表单的字段添加数据校验。 接下来我们一步步来实现表单的功能。 创建项目 导入初始化项目。 完整的项目创建可以参考:Angular 2 TypeScript 环境配置 或者直接下载源代码:... »

Angular 2 模板语法

Angular 2 模板语法 前面几个章节我们已经接触了 Angular 的模板,本文我们将具体介绍 Angular 的语法使用。 模板扮演的是一个视图的角色,简单讲就是展示给用户看的部分。 HTML 插值表达式 模板表达式 模板语句 绑定语法 属性绑定 HTML 属性、 class 和 style 绑定 事件绑定 使用 NgModel 进行双向数据绑定 内置指令 * 与 模板引用变量 输入输出属... »

Angular 2 教程

Angular 2 教程

Angular 2 教程 Angular2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。 Angular2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。 Angular2 发布于2016年9月份,它是基于ES6来开发的。 学习本教程需要的基础知识 学习本教程前,你需要具备基本的前端基础:HTML、CSS、Ja... »

Angular 2 JavaScript 环境配置

Angular 2 JavaScript 环境配置

Angular 2 JavaScript 环境配置 本章节我们为大家介绍如何配置 Angular 2 的执行环境。 本章节使用的是 JavaScript 来创建 Angular 的应用,当然你也可以使用 TypeScript 和 Dart 来创建 Angular 应用 。 本章节使用到的文件目录结构如下所示: 创建配置文件 创建目录 $ mkdir angular-quickstart $ cd ... »

Angular 2 TypeScript 环境配置

Angular 2 TypeScript 环境配置

Angular 2 TypeScript 环境配置 本章节使用的是 TypeScript 来创建 Angular 的应用,这也是官方推荐使用的,本教程的实例也将采用 TypeScript 来编写。 TypeScript 是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。 如果你不了解TypeScript,可以查阅以下资料: TypeScr... »