《Angular4从入门到实战》学习笔记（图文）

《Angular4从入门到实战》学习笔记
腾讯课堂：米斯特吴 视频讲座
二〇一九年二月十三日星期三14时14分
What Is Angular?（简介）
前端最流行的主流JavaScript框架；
由谷歌倾情打造并维护；
致力于构建单页面应用(SPA);
是主流MEAN综合框架中的一部分；
打破HTML静态，创建动态的WEB应用。
不是一个服务端的框架或技术；不是JS的一个库，例如jQuery,React等；不是用于设计；不是一个平台或一门语言；不是一个插件。（非常好）
Why Use Angular?（优点）
可以快速开发及代码迭代；（相对于瀑布模型，就是开发过程用户可见，先开发一个雏形，再迭代开发）
所有代码都通过组件实现（模块化）
动态获取数据内容；
跨平台

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。
TypeScript:
是JavaScript的超集；微软创建及维护；拥有具体的类型；面向对象；与JavaC#相似
Components(组件)：
在Angular4中都是以组件式开发；在组件中包含选择器,模板等；当前的类用户处理逻辑。
安装：AngularCLI(脚手架)或从github中拉取并使用
依赖的环境：NPM&NODE：也就是安装node
从官网安装并测试安装成功否：node -v
由于Angular CLI的一些资源被墙掉了，所以，要使用淘宝镜像下载安装，否则，慢且会主线问题。淘宝镜像：https://npm.taobao.org/。
命令行输入：npm install -g cnpm
再输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装Angular Cli,命令行输入：cnpm install -g @angular/cli@latest
检验是否安装成功：ng help
Angular CLI的命令关键字为：ng
创建项目：第一步ng new Test 出现绿色字体Ctrl+C终止批处理，因为很卡或出错
第二步在项目文件夹输入 cnpm install 从淘宝镜像中安装
然后用VScode（Visual Studio Code）打开项目或别的软件打开。
官方网站指示:>npm install -g @angular/cli 换成cnpm install -g @angular/cli@latest
>ng new my-dream-app
>cd my-dream-app
>ng serve --open
持久使用：npm config set registry https://registry.npm.taobao.org
验证是否成功：npm config get registry 或npm info express
使用：npm install -g cnpm --registry=https://registry.npm.taobao.org
二〇一九年二月十三日星期三23时37分
Angular项目的目录结构：（网上摘录）




¬组件相关的概念：
1.组件元数据装饰器（@Component）
简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
2.模板（Template）
我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
3.控制器（controller）
控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。
装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：
输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据 。提供器（providers）：这个是用来做依赖注入的 。生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期 。样式表：组件可以关联一些样式表 。动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等 。输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据
下面我们来看看模块文件
app.module.ts：这个文件表示模块
与AppComponent类似，模块也需要装饰器来装饰。

二〇一九年二月十四日星期四0时3分
腾讯课堂：米斯特吴 《Angular4从入门到实战》之第三讲《Angular4创建组件及设置属性》
运行刚刚创建的Angular项目，命令行进入到Angular\a4app项目目录，输入ng serve --open
或推送出要显示的网页，或者在浏览器地址栏输入：http://localhost:4200/
感觉就是一个web网站在运行，更改index.html等相关文件内容，只要按保存都会自动触发浏览器更新。
项目执行的第一个文件就是项目目录a4app下src目录里面的index.html文件。
在index.html中是无法直接引入自定义的或其他的CSS文件的，必须把CSS文件引入到src目录中的styles.css文件中，此文件本身还可以定义样式（此文件一开始除了一行注释以外是空的）。如：@charset “UTF-8”;@import “test.css”;
感觉src目录下的app目录里面的这五个文件都挺重要的，尤其是这个app.component.ts,里面的title内容一变，网页上的标题立即跟着改变。
app.component.ts文件的内容：
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’, /表示该组件将展示在index.html中的标签中/
templateUrl: ‘./app.component.html’, /声明该组件所应用的模板/
styleUrls: [’./app.component.css’] /声明模板所应用的渲染/
})
export class AppComponent {
title = ‘Hello 世界!’;
}
只要是组件，都会在app目录下创建！
引用组件：先打开a4app中的readme.md，拷贝第11行的ng generate component component-name
再开起来一个终端（因为原来的终端正在运行WEB服务），目录切换到项目目录a4app下,输入刚刚拷贝的命令行：ng generate component 组件名； 也可以用简写的模式ng g c 组件名。
比如新建一个存放组件的文件夹及新建组件：ng g c components/user
于是：在app文件夹下新建了一个components目录，components目录又建了一个user目录，
user目录下面新建了四个文件，分别是组件css、html、ts、spec.ts其spec.ts用于测试的，没用
我们在根组件app的html文件中加入
(因为user的ts文件指定的选择器就是app-user,这与index中设置标签< app-root >如出一辙)
然后，就可以修改user下的html文件的内容和设置ts文件的对应的属性了。
user目录下的app.component.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-user’,
templateUrl: ‘./user.component.html’,
styleUrls: [’./user.component.css’]
})
export class UserComponent implements OnInit {
name = “hemiah”; /添加属性/
constructor() { } /自动创建了两个空的方法/
ngOnInit() { }
}
比如添加了一个name属性。然后，我们就可以在html中用{ {name}}来调用这个name属性的值。
user目录下的app.component.ts还可以这样写：

二〇一九年二月十四日星期四2时33分53秒
腾讯课堂：米斯特吴 《Angular4从入门到实战》之第四讲《Angular4操作数据(增删改查)》
user