waylau / angular-enterprise-application-development-samples Goto Github PK

Angular Enterprise Application Development Samples. 《Angular企业级应用开发实战》源码

angular-enterprise-application-development-samples's Introduction

《Angular企业级应用开发实战》示例源码

前端组件化开发是目前主流的开发方式，不管是 Angular、React 还是 Vue.js 都如此。相比较而言，Angular 不管是其开发功能，还是编程**，在所有前端框架中都是首屈一指的，特别适合企业级应用的开发。笔者从 2014 年开始关注 Angular 的技术发展，并用 Angular 1.x 开发实际的企业级应用。那时，Angular 还只是实现数据双向绑定的 JS 小框架（所以被叫作 AngularJS）。如今，Angular 已经是 8.0 版本，形成了从开发到部署、从 PC 端到移动端完整流程全覆盖的开放平台。因此，当 Angular 发布 7.0 版本时，笔者便迫不及待地想把这项技术介绍给读者，希望读者能够掌握 Angular 的使用，以简化企业级应用的开发。

本书涉及的相关技术及版本如下。

VSCodeUserSetup-x64-1.26.1
Angular 7.1.0
Angular CLI 7.0.7
Node.js 10.9.0
npm 6.2.0

内容介绍

本书分为 5 篇。

“第 1 篇准备”（第1-2章）介绍 Angular 的基础概念，并带领读者快速创建一个 Angular 应用，使读者对 Angular 有一个初步的印象。
“第 2 篇入门”（第3-4章）介绍 TypeScript 基础，并带领读者快速实现一个简易版本的“用户管理”应用。通过对这部分内容的学习，读者可以了解到 Angular 常用的知识点。
“第 3 篇进阶”（第5-10章）深入讲解了 Angular 的常用知识点。
“第 4 篇高阶”（第11-20章）深入讲解了 Angular 的高级知识点。
“第 5 篇商业实战”（第21-24章）带领读者从零开始实现一个完整的企业级新闻头条客户端应用，使读者具备 Angular 企业级应用开发的完整能力。

源码

书中所有示例源码，移步至https://github.com/waylau/angular-enterprise-application-development-samples samples 目录下

内容如下：

ch02/hello-world：第一个Angular应用
ch03/typescript-demos：TypeScript基础案例
ch04/user-management：用户管理的例子
ch05/basic-component：数据展示的例子
ch05/lifecycle：生命周期钩子的例子
ch05/component-interaction：组件交互方式
ch05/component-style：使用组件样式的例子
ch05/dynamic-component：动态加载组件的例子
ch05/custom-elements：使用自定义元素的例子
ch07/attribute-directives：使用属性型指令的例子
ch07/structural-directives：自定义结构型指令
ch08/pipes：使用管道的例子
ch09/animations：使用动画的例子
ch10/forms：使用表单的例子
ch10/user-input：获取用户输入的例子
ch10/form-validation：表单验证的例子
ch10/reactive-forms：响应式表单的例子
ch12/customer-app：惰性加载特性模块的例子
ch13/dependency-injection：依赖注入的例子
ch14/http-client：HttpClient的例子
ch15/router：路由器的例子
ch16/testing：测试的例子
ch17/i18n：通过i18n工具来实现国际化
ch17/ngx-translate：通过ngx-translate插件来实现国际化
ch19/universal：Universal使用的例子
ch20/service-worker：使用ServiceWorker的例子
ch21/news-headlines：News Headlines应用骨架
ch22/news-headlines：News Headlines首页原型
ch23/news-headlines：News Headlines导航栏
ch24/news-headlines：News Headlines新闻详情

配套书籍《Angular企业级应用开发实战》

与该源码配套的书籍《Angular企业级应用开发实战》已经出版，内容详见全书目录。

本书如有勘误，会在https://github.com/waylau/angular-enterprise-application-development-samples/issues>上进行发布。由于笔者能力有限，时间仓促，难免错漏，欢迎读者批评指正。

您也可以上豆瓣给老卫打Call。

如何获取本书

实体店及各大网店有售。据我所知有如下网站供应：

想低于市价得到本书？来二手书集市试试看。

也可以直接关注我博客（https://waylau.com/）或者我的开源书（https://waylau.com/books/）了解更多免费咨询。

联系作者

您也可以直接联系我：

其他书籍

若您对本书不感冒，笔者还写了其他方面的超过一打的书籍（可见https://waylau.com/books/），多是开源电子书。

本人也维护了一个books-collection项目，里面提供了优质的专门给程序员的开源、免费图书集合。

开源捐赠

捐赠所得所有款项将用于开源事业！见捐赠列表。

angular-enterprise-application-development-samples's People

Contributors

Stargazers

Watchers

angular-enterprise-application-development-samples's Issues

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-72_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-72_binding.node": HTTP error 404 Not Found

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.3/win32-x64-72_binding.node":

HTTP error 404 Not Found

package.json

{
  "name": "hello-world",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.4",
    "@angular/common": "^7.0.4",
    "@angular/compiler": "^7.0.4",
    "@angular/core": "^7.0.4",
    "@angular/forms": "^7.0.4",
    "@angular/http": "^7.0.4",
    "@angular/platform-browser": "^7.0.4",
    "@angular/platform-browser-dynamic": "^7.0.4",
    "@angular/router": "^7.0.4",
    "core-js": "^2.5.4",
    "rxjs": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.6",
    "@angular/cli": "~7.0.6",
    "@angular/compiler-cli": "^7.0.4",
    "@angular/language-service": "^7.0.4",
    "@types/jasmine": "~3.3.0",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~10.12.10",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.4",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

什么时候出第九版

chapter 24 的代码执行顺序问题

https://github.com/waylau/angular-enterprise-application-development-samples/blob/master/samples/ch24/news-headlines/src/app/news-detail/news-detail.component.ts#L28

  // 展示新闻详情数据
  showNewsDetailData() {
    this.route.queryParams.subscribe(p => this.newsUrl = p.newsUrl);// 获取参数

    this.newsDetailService.getNewsData(this.newsUrl).subscribe(
      (newsApiData) => this.newsDetailData =
        this.domSanitizer.bypassSecurityTrustHtml(newsApiData.toString()) //HTML过滤
    );
  }

是否应该修改为：

  showNewsDetailData() {
    this.route.queryParams.subscribe(p => {
      this.newsUrl = p.newsUrl;

      this.newsDetailService.getNewsData(this.newsUrl).subscribe(
        (newsApiData) => this.newsDetailData =
          this.domSanitizer.bypassSecurityTrustHtml(newsApiData.toString()) //HTML过滤
      );
    }  
  );// 获取参数

因为不能保证二个subscribe里面函数的执行顺序？

2019年6月第1版2019年6月第1次印刷勘误、改进项

封面

封面设计建议带勒口，这样书角不容易折皱。

前言IV

“75个”应为“74个”

98页

“1.从路由参数中提取” 小节中。
原文“修改user.service.ts文件，在ngOnInit()生命周期钩子中调用getUsers()，代码如下：”

需要修改为：

“修改user-detail.component.ts文件，在ngOnInit()生命周期钩子中调用getUser()，代码如下：”

146页

“component-interaction”应为“component-styles”

390页

倒数第二行的“（3）0”应为“（3）”

第69页，把该组件的user属性改名为“selectedUser”

当时组件中不存在user属性，而是存在users。也不应该改users属性，而是添加selectedUser

`import { Component, OnInit } from '@angular/core';
import {User} from '../user';
import {USERS} from '../mock-users';

@component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users = USERS;
selectedUser: User;
onSelect(user: User): void {
this.selectedUser = user;
}
constructor() { }

ngOnInit(): void {
}

}
`

第98页，修改 user.service.ts 文件

应为“修改 user-detail.component.ts 文件”

第24页代码3-1处，编译时报错内容不太对。

在本地编译报错如下：
constant-scope.ts:5:1 - error TS2588: Cannot assign to 'x' because it is a constant.

5 x = 2; //错误
~

Found 1 error.