美文网首页
Angular4-学习笔记-1-迈出第一步

Angular4-学习笔记-1-迈出第一步

作者: 小镭Ra | 来源:发表于2017-04-13 17:22 被阅读4960次

学习资料来自 Angular.cnAngular.io

虽然官方文档很全面,但小镭觉得官方文档写的很杂乱,重复的内容很多。小镭没有到 Github 上细看,估计是很多人分别写不同的部分最后汇总起来的。
该笔记将对官方文档中的教程、指南、烹饪书等诸多内容按照小镭自己的思路和学习路线重新进行整理,分享给每一个希望自学 Angular 的朋友。

Angular 与 AngularJS 的差别非常大,无论是语法还是编写方式。怪不得名字改了,让小镭感觉完全是两个东西。
重新学吧 ! Angular 值得我们这样做,因为它非常好用。

快速起步

Angular 应用由组件(components)组成。

组件包含:

  • HTML 模版(template)
  • 组件类(component class)
    组件类控制视图。

组件样例:src/app/app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

每个组件都以 @Component 装饰器函数(decorator function)开始,它接受一个元数据对象(metadata object)参数。该元数据对象描述了 HTML 模板和组件类是如何一起工作的。

上例说明:

  • @Component({...}) 中的{}为元数据对象参数
  • selector 属性为 Angular 指定了在 index.html 中的自定义 <my-app> 标签里显示该组件
  • template 属性定义了 <h1> 标题里的一条消息
  • {{name}} 为插值绑定表达式(interpolation binding expression)

有关插值绑定表达式的更多知识见 显示数据

页面样例:index.html

<body>
    <my-app>Loading AppComponent content here ...</my-app>
<body>

Angular 使用 TypeScript(基于效率考虑)。也可以使用 JavaScript,见指南

教程: 英雄指南

英雄编辑器

该部分的在线例子

准备工作-本地环境搭建

参看页面 搭建本地开发环境 并按照步骤操作即可。

安装完种子包后,可参考 搭建剖析 了解文件夹内各个文件的用途。

开始

小镭直接利用上述种子包文件开始构建项目。

保持应用不断转译和运行

在命令行窗口中输入:

npm start

该命令用途:

  • 在"监听"模式下运行编译器
  • 启动开发服务器
  • 在浏览器中启动应用
  • 使应用在后续构建过程中能够持续运行

显示英雄

小镭的本地环境无法正常工作,应用未成功加载,<my-app> 内容未更新。

浏览器 Console 报错如下:

Error: (SystemJS) Block-scoped declarations 
(let, const, function, class) not yet supported outside strict mode

看来是 systemjs-angular-loader.js 文件出了问题。

在该文件首行加入如下代码:

"use strict";

OK,问题解决。不过浏览器 Console 又有提示:

Angular is running in the development mode.
Call enableProdMode() to enable the production mode.

说明开发模式和生产模式是通过 enableProdMode() 方法来控制切换的。

那么如何使用这个方法呢?教程中居然没有顺带提一句,唉……

其实我们只需要在 main.ts 中使用它就可以了,代码如下:

import {enableProdMode} from '@angular/core';
enableProdMode();

此处使用该方法前一定要先 import 它,就像 platformBrowserDynamic() 方法一样。

注意,上述代码要放在 platformBrowserDynamic() 方法前使用,否则会报错:

Error: (SystemJS) Cannot enable prod mode after platform setup.

OK,现在已经知道如何切换工作模式了,现阶段还是使用开发模式吧。

Hero 对象

此处需要注意的是代码的位置。

如果 Hero 类插在了 @ComponentAppComponent 的中间,则会报错:

Error: (SystemJS) Unexpected value 'AppComponent' declared by the module 'AppModule'. 
Please add a @Pipe/@Directive/@Component annotation.

@ComponentAppComponent 一定要连起来写。所以应该先读一下 API 手册中的相关内容了解语法规则。

使用多行模板字符串添加更多 HTML

使用反引号``的模板字符串(也称做——模板字面量,Template literals)。

样例 app.component.ts (AppComponent's template)

template: `
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

编辑英雄名字

双向绑定

1. 修改 app.module.ts 文件,导入 FormsModule 包:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
import { AppComponent }  from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

FormsModule 包中包含了 ngModel 指令,它用于双向绑定。

关于 FormsModulengModel 的更多知识,参见 表单模板语法

2. 更新模版

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

该部分的在线例子链接

主从结构

该部分的在线例子

*ngFor 语法

<li *ngFor="let hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

关于 *ngFor 和模板输入变量的更多知识,见显示数据模板语法

事件绑定例句

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
    ...
</li>

关于事件绑定的更多内容,见用户输入模板语法

*ngIf 语法

<div *ngIf="selectedHero">
    ...
</div>

*ngIf*ngFor 被称为“结构型指令”。更多内容见 结构型指令模板语法

属性绑定语法

[class.selected]="hero === selectedHero"

更多信息见模板语法

多个组件

把主从结构的页面重构成多个组件。每个子组件只聚焦在一个特定的任务或工作流上。 最后,AppComponent 将会变成一个简单的壳,用来作为那些子组件的宿主。

该部分重点是理解思想和概念。

该部分的在线例子

遵循单一职责原则Wiki / 百度百科),创建复用组件。

文件名和组件名遵循风格指南中的标准方式。

  • 组件的类名应该是大驼峰形式,并且以 Component 结尾:HeroDetailComponent
  • 组件的文件名应该是小写中线形式,并且以 .component.ts 结尾:hero-detail.component.ts

命名约定:词汇表-中线命名法
也称为烤串命名法(kebab-case)。通常用于指令的选择器和文件名。

Angular风格指南建议每个文件中只有一个类。

输入属性与目标属性,参考属性型指令相关内容。

@Input() 装饰器用来表明输入属性。更多信息参考属性型指令相关内容。

每个组件都必须在一个(且只有一个)Angular 模块中声明。

样例 src/app/app.module.ts

import { HeroDetailComponent } from './hero-detail.component';

更多知识,参见 Angular 模块页。

服务

该部分的在线例子

使用单独的服务可以保持组件精简,使其集中精力为视图提供支持,并且,借助模拟(Mock)服务,可以更容易的对组件进行单元测试。

Injectable 函数

@Injectable() 装饰器。注意不要忘记括号,否则会导致一个很难诊断的错误。

无论是出于提高统一性还是减少变更的目的, 都应该从一开始就加上 @Injectable() 装饰器。

术语:Method stub,方法存根

注入服务

  1. 添加一个构造函数,并定义一个私有属性。
  2. 添加组件的 providers 元数据。

更多信息见依赖注入

注意构造函数的功能,它的作用是简单的初始化工作,不要把复杂的逻辑放在构造函数中。

ngOnInit 生命周期钩子

Angular提供了一些接口,用来介入组件生命周期的几个关键时间点:刚创建时、每次变化时,以及最终被销毁时。

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

export class AppComponent implements OnInit {
  ngOnInit(): void {
  }
}

更多信息见生命周期钩子

异步服务与承诺

样例 src/app/hero.service.ts

getHeroes(): Promise<Hero[]> {
  return Promise.resolve(HEROES);
}

样例 src/app/app.component.ts

getHeroes(): void {
  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

承诺与异步编程

ES2015箭头函数(Lambda 表达式)

模拟慢速连接,可以据此观察应用在网络较差情况下的表现。

getHeroesSlowly(): Promise<Hero[]> {
    return new Promise(resolve => {
        // Simulate server latency with 2 second delay
        setTimeout(() => resolve(this.getHeroes()), 2000);
    });
}

总结

教程就暂时进行到这里。
教程里的路由这一章内容较多,小镭决定先通过官方文档把目前接触到的知识详细地看一遍,深刻理解后再继续。

相关文章

  • Angular4-学习笔记-1-迈出第一步

    学习资料来自 Angular.cn 与 Angular.io。虽然官方文档很全面,但小镭觉得官方文档写的很杂乱,重...

  • #一周一书# 《吉田医生哈佛求学记》3.0

    笔记摘抄: Chapter 03把时间变成助手,集中精力做事 16 先迈出“第一步”,之后见机行事 ✨ 迈出第一步...

  • 2017-09-12

    学习第一步勇敢的迈出宿舍。

  • .net core 500.30错误以及项目发布部署时的注意事项

    前言:准备循序渐进的养成定期写文章的习惯,锻炼文案能力。所以先从整理以往的工作笔记、学习笔记作为开端,迈出第一步。...

  • 组内分享--突发事件

    台上一分钟,台下十年功,成功的迈出了第一步,今后的工作学习中还有很多的第一步需要我们勇于尝试,勇敢迈出。 ...

  • 第一步

    如果不迈出第一步, 你就学不会稳稳地走路。 如果不迈出第一步, 你就看不到路上的鲜花。 如果不迈出第一步, 你不知...

  • 一步

    你若能迈出第一步 余生 我陪你走 (至世间不敢迈出第一步的孤独者)

  • angular4-开发指南

    angular4-开发指南 中英文对比学习。中文网站翻译的不是很好,有些语义不是很明确,需要参考英文学习。 使用a...

  • 2020-04-05

    今天的读书笔记 焦虑的心态不利于学习。不焦虑,不贪多,踏踏实实迈出第一步!走得慢没有关系,关键是不要停。——晚情

  • 纪念

    2018.7.28汕头,迈出第一步,

网友评论

      本文标题:Angular4-学习笔记-1-迈出第一步

      本文链接:https://www.haomeiwen.com/subject/xzoyattx.html