Angular 2 架构
Angular 2 应用程序应用主要由以下 8 个部分组成:
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injectio……继续阅读 »
2年前 (2022-06-28) 257浏览 0评论
0个赞
Angular 2 JavaScript 环境配置
本章节我们为大家介绍如何配置 Angular 2 的执行环境。
本章节使用的是 JavaScript 来创建 Angular 的应用,当然你也可以使用 TypeScript 和 Dart 来创建 Angular 应用 。
本章节使用到的文件目录结构如下所示:
创建配置文件
创建目录
$ mkdir angular-quickstart
$ cd angular……继续阅读 »
2年前 (2022-06-20) 305浏览 0评论
0个赞
Angular 2 TypeScript 环境配置
本章节使用的是 TypeScript 来创建 Angular 的应用,这也是官方推荐使用的,本教程的实例也将采用 TypeScript 来编写。
TypeScript 是一种由微软开发的自由和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。
如果你不了解TypeScript,可以查阅以下资料:
TypeScript 入门教程……继续阅读 »
2年前 (2022-06-18) 318浏览 0评论
0个赞
Angular 2 表单
本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。
利用 Angular 模板,我们可以创建各种类型表单,例如:登录表单,联系人表单,商品详情表单等,而且我们也为这些表单的字段添加数据校验。
接下来我们一步步来实现表单的功能。
创建项目
导入初始化项目。
完整的项目创建可以参考:Angular 2 TypeScript 环境配置
或者直接下载源代码:点我下载
解压后,……继续阅读 »
2年前 (2022-06-17) 222浏览 0评论
0个赞
Angular 2 用户输入
用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发 DOM 事件。
本章中,我们将学习如何使用 Angular 事件绑定语法来绑定这些事件。
以下Gif图演示了该实例的操作:
源代码可以在文章末尾下载。
绑定到用户输入事件
我们可以使用 Angular 事件绑定机制来响应任何 DOM 事件 。
以下实例将绑定了点击事件:
<button (click)="onC……继续阅读 »
2年前 (2022-06-16) 177浏览 0评论
0个赞
Angular 2 模板语法
前面几个章节我们已经接触了 Angular 的模板,本文我们将具体介绍 Angular 的语法使用。
模板扮演的是一个视图的角色,简单讲就是展示给用户看的部分。
HTML
插值表达式
模板表达式
模板语句
绑定语法
属性绑定
HTML 属性、 class 和 style 绑定
事件绑定
使用 NgModel 进行双向数据绑定
内置指令
* 与 <templ……继续阅读 »
2年前 (2022-06-10) 234浏览 0评论
0个赞
Angular 2 教程
Angular2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。
Angular2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。
Angular2 发布于2016年9月份,它是基于ES6来开发的。
学习本教程需要的基础知识
学习本教程前,你需要具备基本的前端基础:HTML、CSS、JavaScrip……继续阅读 »
2年前 (2022-06-07) 301浏览 0评论
0个赞
Angular 2 数据显示
本章节我们将为大家介绍如何将数据显示到用户界面上,可以使用以下三种方式:
通过插值表达式显示组件的属性
通过 NgFor 显示数组型属性
通过 NgIf 实现按条件显示
通过插值表达式显示组件的属性
要显示组件的属性,插值是最简单的方式,格式为:{{属性名}}。
以下代码基于 Angular 2 TypeScript 环境配置 来创建,你可以在该章节上下载源码,并修改以下提到……继续阅读 »
3年前 (2022-06-02) 196浏览 0评论
0个赞