简洁

谷歌开发、开源web前端框架
和react、vue相比，更适合中大型企业级项目
需要html、css、js、es6基础

环境搭建

安装node.js 10.13.0 LTS稳定版本
- node -v 查看安装号node.js后就将npm也安装好了
通过npm 安装angular脚手架只需安装一次
- npm install -g @angular/cli
- ng v

创建项目

进入文件夹cmd里
- ng new angulardemo
- 是否增加routing？一般需要
- 使用什么预处理器？选
- 正在安装依赖执行的操作就是npm i
- 可以ctrl c结束，然后cd进入angulardemo 通过cnpm install会快一点
- 通过ng serve --open运行项目
- 用vscode导入项目文件夹
- 并在vscode的拓展商店里安装angular插件
- 只创建项目不安装依赖：ng new angulardemo --skip-install

目录结构分析

e2e：端到端(End-to-End)测试
node_modules：安装的第三方模块都放在这里面
src：我们的项目文件都得放在src里面
	app：组件以及app.module.ts 定义模块
	assets：静态资源
	environments：这个文件夹中包括为各个目标环境装备的文件
	favicon.ico
	index.html：主页面
	main.ts：应用的主要入口点
	polyfills.ts：填充库能帮我们把这些不同点进行标准化
	styles.css：全局样式
	test.ts：单元测试的主要入口点
	tsconfig.app.json：typescript编译器的配置文件
	tsconfig.spec.json：typescript编译器的配置文件
	typings.d.ts：官方文档没有写，暂时不用管
	.angular-cli.json：angular CLI的配置文件
	.editorconfig：给你的编辑器看的简单配置文件
	.gitignore：Git配置文件
	.karma.cong.js：给Karma的单元测试配置
	package.json：npm配置文件
	protractor.conf.js：给Protractor使用的端到端测试配置文件
	README.md项目的基础文档 说明文档
	tsconfig.json：typescript编辑器的配置
	tslint.json

要了解的

package.json：要安装的依赖以及版本等信息
src：
- app
  - app.modules.ts 根模块，告诉angular如何组装应用
    - 导入浏览器解析模块
    - 核心模块
    - 根组件
    - 装饰器，告诉angular如何编译和启动应用
      - 配置当前项目运行的组件
      - 配置当前模块运行依赖的其它模块
      - 配置项目所需要的服务
      - 启动默认加载的
      - 暴露根组件
  - app.components.ts
    - 引入核心模块里面的component
      - 使用组件的名称
      - html
      - css
    - 暴露这个组件
- assets
- environment

开发模式

在angular里就是一个模块儿化组件化开发模式
有一个根组件，其它组件挂载到根组件下。其它组件也可以挂载到其它组件下
可以通过angular CLI(command line interface)创建组件
cd到项目里然后 ng g 然后有提示
ng g component components/news 新建news组件
需要在app/app.modules.ts里引入。命令行创建就已经引用好了
app的html里调用新闻组件
ts文件中可以创建变量。html中通过{{}}来引用

组件以及组件里的模板

vscode左下角点击可以打开控制台
ts里写逻辑
- publisc title=‘我是新闻组件’;
- msg=‘我是一个新闻组件的msg’;
- username:string=‘张三’;
- public student:any = 任何类型
news.component.html
-<h1> {{title}}</h1>

声明属性的几种方式：
public 公有 可以在类里面使用，也可以在类外使用
protected 保护类型 只有在当前类和它的子类里面访问
private 私有 只有在当前类才可以访问

模板属于当前类

public userinfo:object={
	username:"";
	age:"";
	}

<h6>{{userinfo.username}}</h6>

public message:any;
constructor(){
	this.message='这是给属性复制--（改变属性的值）';
	//获取属性的值
	console.log(this.msg)
	//改变属性的值
	this.msg='我是改变后的msg值'
	}
<div>
	{{message}}
</div>

模板里绑定属性

#静态数据
<div title=‘我是一个div’>
	鼠标描上去
</div>
#动态数据
<div [title]="student">
	张三
</div>

绑定html

public content="<h2>我是一个html标签</h2>"

<div>
	{{content}}
</div>
<span [innerHTML]='content' class="red"></span>
# .scss
.red{
	color='red'
}

模板里允许做简单运算

1+2={{1+2}}

数据循环

# 定义数组
public arr=['111','222','333'];

<ol>
	<li *ngFor="let item of arr">
		{{item}}
	</li>
</ol>

public list:any[]=['我是第一个新闻',2222,'我是第三个新闻']
<ul>
	<li *ngFor="let item for list">
		{{item}}
	</li>
</ul>

public items:Array<any>=['我是第一个新闻',2222,'我是第三个新闻']
# any就不限制类型

public userlist:any[]=[{
	username:'张三',
	ange:20},{
		username:'李四',
		age:21
	}];

<ul>
	<li *ngfor="let item of userlist">
		{{item.username}}---{item.age}}
	</li>
</ul>

#可以嵌套循环
<ul>
	<li *ngFor="let item of cars">
		<h2>{{item.cate}}</h2>
		<ol>
			<li *ngFor="let car of item.list">
				{{car.title}}---{{car.price}}
			</li>
		</ol>
	</li>
</ul>