史上最简单Angular2教程,大叔都学会了

作者:王芃 wpcfan@gmail.com

第一节:Angular 2.0 从0到1 (一)
第二节:Angular 2.0 从0到1 (二)
第三节:Angular 2.0 从0到1 (三)
第四节:Angular 2.0 从0到1 (四)
第五节:Angular 2.0 从0到1 (五)
第六节:Angular 2.0 从0到1 (六)
第七节:Angular 2.0 从0到1 (七)
第八节:Angular 2.0 从0到1 (八)
番外:Angular 2.0 从0到1 (八)
番外:Angular 2.0 从0到1 Rx—Redux你的Angular 2应用

第一节:认识Angular 2.0

前言

Angular 2 是Google推出的一个跨平台全终端的框架,和目前比较火的React和Vue.js相比,有如下优点:

  1. 由于Google的目的是推出一个完整解决方案,所以官方默认提供的类库(比如routing,http,依赖性注入(DI)等)非常完整,无需自己选择。React的一大痛点就是选择太多导致在配置寻找组件和类库的过程中消耗太多精力,当然从另一方面看这也是其优势,选择众多且自由。
  2. 官方支持TypeScript(微软出品,是JavaScript的超集,是 JavaScript 的强类型版本)作为首选编程语言,使得开发脚本语言的一些问题可以更早更方便的找到。
  3. RxJS友好使得响应式编程在Augular2中变得极为容易(Google开发的框架依赖这么多的微软的产品,可见微软的转型还是很成功的)
  4. 支持NativeScript甚至ReactNative等进行原生Android/iOS应用开发(React支持React Native)
  5. 支持服务器端渲染(React也支持)

但总体来讲,个人认为Angular2更适合从原生App开发或后端Java/.Net等转型过来开发前端的程序员,因为它的开发模型更接近于传统强类型语言的模式,加上官方内建的组件和类库比较完整,有官方中文站点,学习曲线要低一些。有过Angular 1.x 开发经验的同学要注意了,虽然只有一个版本号的差距,但2.x和1.x是完全不同的,不要奢望1.x的应用会平滑迁移到2.x。

环境配置要求

Angular2需要node.js和npm,我们下面的例子需要node.js 6.x.x和npm 3.x.x,请使用 node -vnpm -v 来检查。由于众所周知的原因,http://npmjs.org 的站点访问经常不是很顺畅,这里给出一个由淘宝团队维护的国内镜像 http://npm.taobao.org/ 。安装好node后,请输入npm config set registry https://registry.npm.taobao.org

官方快速起步文档给出的例子不同,我们下面要使用Angular团队目前正在开发中的一个工具—Angular CLI 。这是一个类似于React CLI和Ember CLI的命令行工具,用于快速构建Angular2的应用。它的优点是进一步屏蔽了很多配置的步骤、自动按官方推荐的模式进行代码组织、自动生成组件/服务等模板以及更方便的发布和测试代码。由于目前这个工具还在beta阶段,安装时请使用 npm install -g angular-cli@latest 命令。

IDE的选择也比较多,免费的Visual Studio CodeAtom,收费的有WebStorm。我们这里推荐采用 Visual Studio Code,可以到 https://code.visualstudio.com/ 下载 Windows/Linux/MacOS 版本。

安装完以上这些工具,开发环境就部署好了,下面我们将开始Angular2的探险之旅。

第一个小应用 Hello Angular

那么现在开启一个terminal(命令行窗口),键入 ng new hello-angular
如上图所示,这个命令为我们新建了一个名为“hello-angular”的工程,进入该工程目录,键入 code . 可以打开IDE看到如下目录

|— .editorconfig //通用的编辑器配置文件,以后换IDE时可以保持一些设置的平滑迁移
|— .gitignore //需要Git忽略的文件列表
|— angular-cli.json //Angular-CLI配置文件
|— karma.conf.js //Karma单元测试配置文件
|— package.json //node打包文件
|— protractor.conf.js //端到端测试配置文件(集成测试)
|— README.md
|— tslint.json //代码Lint静态检查的配置
|— e2e //端到端测试代码目录
| |— app.e2e-spec.ts
| |— app.po.ts
| |— tsconfig.json
|— src //源码
|— favicon.ico //站点收藏图标
|— index.html //入口页面
|— main.ts //入口ts文件
|— polyfills.ts //针对浏览器能力增强的polyfills引用文件
|— styles.css //全局样式文件
|— test.ts //测试入口文件
|— tsconfig.json //TypeScript配置文件
|— typings.d.ts //项目中使用的TypeScript类型定义引用文件
|— app //应用目录
| |— app.component.css //引导性组件的样式文件
| |— app.component.html //引导性组件的HTML模板
| |— app.component.spec.ts //引导性组件测试文件
| |— app.component.ts //系统引导性组件
| |— app.module.ts //应用根模块
| |— index.ts //应用入口
|— assets //站点资源文件夹
| |— .gitkeep
|— environments
|— environment.prod.ts //生产环境配置文件
|— environment.ts //环境配置
大概了解了文件目录结构后,我们重新回到命令行,在应用根目录键入 ng serve 可以看到应用编译打包后server运行在4200端口。

打开浏览器输入 http://localhost:4200 即可看到程序运行成功啦!

自动生成的太没有成就感了是不是,那么我们动手改一下吧。保持运行服务的命令窗口,然后进入VSCode,打开 src/app/app.component.ts 修改title,比如: title = 'This is a hello-angular app';,保存后返回浏览器看一下吧,结果已经更新了,这种热装载的特性使得开发变得很方便。

第一个组件

那么我们来为我们的app增加一个Component吧,在命令行窗口输入 ng generate component login --inline-template --inline-style 。 顾名思义,参数generate是用来生成文件的,参数component是说明我们要生成一个组件,login呢是我们的组件名称,你可以自己想个其他有意思的名字。后面的两个参数是告诉angular-cli:生成组件时,请把组件的HTML模板和CSS样式和组件放在同一个文件中(其实分开文件更清晰,但第一个例子我们还是采用inline方式了)。是不是感觉这个命令行太长了?幸运的是Angular团队也这么想,所以你可以把上面的命令改写成 ng g c login -it -is ,也就是说可以用generate的首字母g来代替generate,用component的首字母c来代替component,类似的--inline-template的两个词分别取首字母变成-it

angular-cli为我们在\src\app目录下生成了一个新文件夹login,在login目录下生成了2个文件,其中 login.component.spec.ts 是测试文件,我们这里暂时不提。另一个是 login.component.ts 这个就是我们新建的Component了。Angular提倡的文件命名方式是这样的:组件名称.component.ts ,组件的HTML模板命名为: 组件名称.component.html,组件的样式文件命名为: 组件名称.component.css,大家在编码中尽量遵循Google的官方建议。

我们新生成的Login组件源码如下

import { Component, OnInit } from '@angular/core';

//@Component是Angular提供的装饰器函数,用来描述Compoent的元数据
//其中selector是指这个组件的在HTML模板中的标签是什么
//template是嵌入(inline)的HTML模板,如果使用单独文件可用templateUrl
//styles是嵌入(inline)的CSS样式,如果使用单独文件可用styleUrls
@Component({
selector: 'app-login',
template: `
<p>
login Works!
</p>
`,
styles: []
})
export class LoginComponent implements OnInit { constructor() { } ngOnInit() {
} }

那么这个组件建成后,我们怎么使用呢?注意上面的代码中@Component修饰配置中的 selector: 'app-login',这意味着我们可以在其他组件的template中使用 <app-login></app-login> 来引用我们的这个组件。

现在我们打开 hello-angular\src\app\app.component.html 加入我们的组件引用

<h1>
{{title}}
</h1>
<app-login></app-login>

保存后返回浏览器,可以看到我们的第一个组件也显示出来了。

一些基础概念

这里我们粗略介绍一些Angular的基础概念,这些基础概念在后面的章节中会更详细的讲解。

什么是模块?

简单来说模块就是提供相对独立功能的功能块,每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的,比如FormsModule封装了表单处理,HttpModule封装了Http的处理等等。每个Angular应用至少有一个模块类 —— 根模块,我们将通过引导根模块来启动应用。按照约定,根模块的类名叫做AppModule,被放在 app.module.ts 文件中。我们这个例子中的根模块位于 hello-angular\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component'; @NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule装饰器用来为模块定义元数据。declarations列出了应用中的顶层组件,包括引导性组件AppComponent和我们刚刚创建的LoginComponent。在module里面声明的组件在module范围内都可以直接使用,也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件,就想我们在AppComponent的模板末尾加上 <app-login></app-login> 一样。

imports引入了3个辅助模块:

  • BrowserModule提供了运行在浏览器中的应用所需要的关键服务(Service)和指令(Directive),这个模块所有需要在浏览器中跑的应用都必须引用;
  • FormsModule提供了表单处理和双向绑定等服务和指令
  • HttpModule提供Http请求和响应的服务

providers列出会在此模块中“注入”的服务(Service),关于依赖性注入会在后面章节中详细解释。
bootstrap指明哪个组件为引导性组件(本案例中的AppComponent)。当Angular引导应用时,它会在DOM中渲染这个引导性组件,并把结果放进index.html的该组件的元素标签中(本案例中的app-root)。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HelloAngular</title>
<base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

引导过程

Angular2通过在main.ts中引导AppModule来启动应用。针对不同的平台,Angular提供了很多引导选项。下面的代码是通过即时(JiT)编译器动态引导,一般在进行开发调试时,默认采用这种方式。

//main.ts
import './polyfills.ts'; // 连同Angular编译器一起发布到浏览器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/'; if (environment.production) {
enableProdMode();
}
//Angular编译器在浏览器中编译并引导该应用
platformBrowserDynamic().bootstrapModule(AppModule);

另一种方式是使用预编译器(AoT - Ahead-Of-Time)进行静态引导,静态方案可以生成更小、启动更快的应用,建议优先使用它,特别是在移动设备或高延迟网络下。使用static选项,Angular编译器作为构建流程的一部分提前运行,生成一组类工厂。它们的核心就是AppModuleNgFactory。引导预编译的AppModuleNgFactory的语法和动态引导AppModule类的方式很相似。

// 不把编译器发布到浏览器
import { platformBrowser } from '@angular/platform-browser'; // 静态编译器会生成一个AppModule的工厂AppModuleNgFactory
import { AppModuleNgFactory } from './app.module.ngfactory'; // 引导AppModuleNgFactory
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

本节代码:https://github.com/wpcfan/awesome-tutorials/tree/chap01/angular2/ng2-tut

下一节我们再继续,记住大叔能学会的你也能。

第一节:Angular 2.0 从0到1 (一)
第二节:Angular 2.0 从0到1 (二)
第三节:Angular 2.0 从0到1 (三)
第四节:Angular 2.0 从0到1 (四)
第五节:Angular 2.0 从0到1 (五)
第六节:Angular 2.0 从0到1 (六)
第七节:Angular 2.0 从0到1 (七)
第八节:Angular 2.0 从0到1 (八)
番外:Angular 2.0 从0到1 (八)
番外:Angular 2.0 从0到1 Rx—Redux你的Angular 2应用

Angular2 从0到1 (一)的更多相关文章

  1. Angular2 从0到1 (二)

    第一节:Angular2 从0到1 (一)第三节:Angular2 从0到1 (三)第四节:Angular2 从0到1 (四) 作者:王芃 wpcfan@gmail.com 第二节:用Form表单做一 ...

  2. Angular2 Hello World 之 2.0.0-beta.14

    公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记 ...

  3. angularjs 2.0 快速开始

    前言 angularjs2.0 如果发布,公司的项目会基于2.0开发,在1.0的时候就踩了好多坑,趁这2.0还没正式发布,赶紧踩下坑. 这篇文章是参考angularjs2.0 官方文档写的,开发环境需 ...

  4. 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目

    一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...

  5. Karma 5:集成 Karma 和 Angular2

    集成 Karma 和 Angular2 我们需要做很多工作,由于需要使用 TypeScript 进行开发,首先需要正确配置 Typescript ,然后正确配置对 Angular2 的引用.还要创建 ...

  6. [转]玩转Angular2(4)--制作左侧自动定位菜单

    本文转自:https://godbasin.github.io/2017/06/02/angular2-free-4-create-sidebar/ 因为项目原因又玩上了Angular2(v4.0+) ...

  7. Angular2 入门详解

    AngularJS 2 快速入门 npm是什么?   npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js ...

  8. angularjs 2.0 简单入门1

    一:首先要写json文件,并下载所有的包 1,在任意目录下新建文件夹 命名为angular2Dome,也可以使用命令  mkdir angular2Dome 回车. 2,在angular2Dome文件 ...

  9. angular2 启动步骤

    以下内容转自网络 1. 创建项目文件夹 创建一个新的文件夹来保存你的项目,比如一开始有个self就好了 2.安装基础库 首先确保已经安装了node.js 我们使用 npm package manage ...

随机推荐

  1. codeforces 630C Lucky Numbers

    C. Lucky Numbers time limit per test 0.5 seconds memory limit per test 64 megabytes input standard i ...

  2. Nginx 禁止IP访问

    我们在使用的时候会遇到很多的恶意IP攻击,这个时候就要用到Nginx 禁止IP访问了.下面我们就先看看Nginx的默认虚拟主机在用户通过IP访问,或者通过未设置的域名访问(比如有人把他自己的域名指向了 ...

  3. JS escape、encodeURI 、encodeURIComponent 编码与解码[转]

    转至:http://jc-dreaming.iteye.com/blog/1702407 本文讨论如何对传递参数用JS编码与解码 1:编码与解码方法的对应关系 escape ------------- ...

  4. Django 使用原生SQL

    def dictfetchall(cursor): "将游标返回的结果保存到一个字典对象中" desc = cursor.description return [ dict(zip ...

  5. SQl函数的写法

    USE [ChangHong_612]GO/****** Object: UserDefinedFunction [dbo].[FN_GetProdQty] Script Date: 10/08/20 ...

  6. nginx安装-源码编译

    官方文档:http://nginx.org/en/docs/configure.html 参考:http://jingyan.baidu.com/article/e2284b2b45f693e2e61 ...

  7. C语言中用宏来作注释

    看了PostgreSQL的代码后,我觉得有不理解的地方,比如: 例如这样的: /* Options that may appear after CATALOG (on the same line) * ...

  8. CUDA从入门到精通

    http://blog.csdn.net/augusdi/article/details/12833235 CUDA从入门到精通(零):写在前面 在老板的要求下.本博主从2012年上高性能计算课程開始 ...

  9. [Javascript] IO Functor

    IO functor doesn't like Maybe(), Either() functors. Instead of get a value, it takes a function. API ...

  10. 模板方法模式(Template Method)

    @@@模式定义: 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. 模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. @@@练习示例:  登录控制 @@@示例代码: \s ...