angular(一)

简洁

• 谷歌开发、开源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>