Angular
一、Angular简单介绍
-
Google开发的的一款开源的web前端框架
-
基于
TypeScript，与react，vue相比较它更适用于中大型企业级项目。
二、学习Angular必备基础
1. 必备基础
-
HTML，CSS，JavaScript -
Es6 -
Typescript
三、Angular环境搭建
1. 安装前准备工作
1.1 安装前准备工作
-
安装node.js (稳定版本最好)
-
node.js是什么
- node.js 是一个基于 Chrome V8 引擎的 JavaScirpt 运行环境。
-
安装教程
-
问题
-
终端中查看版本
-
node -v npm -v
-
-
-
安装cnpm
-
终端中下载
-
npm install -g cnpm -- registry=https://registry.npm.taobao.org cnpm -v
-
-
-
使用npm/cnpm命令安装 Angular/cli（只需安装一次）
-
终端中下载
-
npm install -g @angular/cli cnpm install -g @angular/cli
-
-
四、 软件设计原则与方法
（1） 原则
面试题： 可维护性，可修改性，可拓展性
- YAGNI
- You Arenot Gonna Need It，不写不需要的代码，写最重要的
- DRY
- Don’t Repeat Yourself，不要重复代码
- OCP
- Open Close Principle，开闭原则，开放拓展，封闭修改
- LCHC
- Low Coupling，High Cohesion，高聚合，低耦合原则，
- 迪米特法则（最少知识法则）
（ 2） 方法
1. MVVM框架的组成
数据绑定，指令系统，组件式编程，路由和导航，
状态保持，第三方组件库
2. Angular框架
五、 创建项目
-
打开命令行工具找到要创建项目的目录
-
创建项目
-
ng new +项目名称 -
ng serve --open运行项目 -
注意
-
右键终端，以管理员模式打开
-
ng v npm uninstall -g @angular/cli npm install -g @angular-cli cd angular ng new project1 ng serve --open -
在过程中有不断地改变文件，目录的权限
-
在
ng new project1过程其实是npm i过程，不断给项目添加依赖,过程较慢，用ctrl+c中止，用cnpm install较快- 或者直接跳过npm过程：
- ·ng new 项目名 --skip-install·
-
-
-
结果，成功运行
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PXfrPiZk-1658480088036)(img/image-20220719150446550.png)]
六、 Angular开发工具介绍
（1）Webstorm
（2）Visual Studio Code
-
将所创建的Angular程序拖拽到VScode里
- 加载扩展时出错,XHR failed
未解决问题
- 加载扩展时出错,XHR failed
-
转为用
离线安装.vsix插件的方式- 进入官网
- 在
VScode选项下搜索插件 - 将下载的插件放在
VScode的bin目录下 shift+鼠标右键选择在此处打开Powershell窗口- 输入
.\code --install-extension 插件名，successfully即成功
七、 目录结构分析
（1）e2e
- 端对端的测试点
（2）node——modules
- 项目中所需要的各种依赖
- 将
package.json定义的模块通过npm/cnpm install下载到该目录下
（3）src （组件，app，module.ts定义模块）
-
作用
- 写代码场所
- 定义组件，定义服务场所
-
app-
存放组件，根模块
-
根模块
-
app.module.ts根组件 -
app.component.html
-
app.component.scss
-
app.component.ts
-
-
-
-
assets静态资源文件 -
browserlist
- 支持该项目的浏览器列表
-
favicon.ico- 选择网页标题前的图标
-
index.html- HTML入口文件
-
main.ts- 整个项目的入口文件
-
polyfills.ts- 配置填充库可避免一些问题
- 加载angular之前会首先加载该文件
-
styles.scss全局的CSS文件- 在
ng new project1选择的预编译方式作为后缀的文件
- 在
-
test.ts- 测试的入口文件
（4）.editorconfig
- 一个编辑器配置文件
（5）package.json
- 一个项目配置文件
- 定义项目的名称，版本，项目所需的各种依赖
（6）README.md
- 说明如何运行，编译项目
其他的基本上是配置文件
八、 使用Angular
（1）在Angular中如何创建组件
-
创建组件/服务 ：
-
ng g
-
-
http://cli.angular.io/
-
创建组件
-
ng g component components/news
-
-
使用组件
- 先将该组件引入到
app.modules.ts中- 当用命令时，自动引入
import { NewsComponent } from './components/news/news.component';NewsComponent- 当没有直接引入时，手动添加
- 以APP为当前目录
- 在其他组件里用该组件，直接输入名称
- 当作标签使用，拓展html标签
<组件名称></组件名称>- 中间夹内容好像无显示
- 当只改变改变一个组件时，
ctrl+s就可直接刷新页面 - 添加新组件时，就得
ng serve --open
- 当用命令时，自动引入
- 先将该组件引入到
-
（2）在Angular中如何实现数据？
-
在.ts文件中public定义数据 （默认也是public）
-
public title="我是前端" msg="我是msg" username:string='张三' number:any=123456 //推荐使用 public student:string='王麻子'
-
-
在.html文件中绑定数据
-
<h1>{ {title}}</h1> <h2>{ {msg}}</h2>
-
-
声明属性的几种方式
- public（公有，默认）
- 可在当前类，也可在类外使用
- protected（保护）
- 只在当前类和子类里能访问
- private（私有）
- 只在当前类能访问该属性
-
声明对象
- .ts文件中定义
public userinfo：object={，，}
- .html文件中绑定
error TS2339: Property 'age' does not exist on type 'object'问题- 改为
public userinfo：any={，，}
- 改为
- 或者在.ts文件中定义属性，但是不赋值，在构造函数里赋值
this.msg='';
- 或已经赋值，但可以在构造函数中改变值
- 获取值
console.log(this.msg)
- 重新赋值
this.msg="改变值"
- 获取值
- .ts文件中定义
（3）如何在Angular模板里绑定数据
-
静态属性
-
<div title="我是一个div"> 鼠标瞄上去会显示“我是一个div” </div>
-
-
动态属性
-
<!--student属性已在.ts文件中定义为“这是一个学生”--> <div [title]="student"> 李华（鼠标瞄上去会显示“这是一个学生”） </div>
-
（4）如何在Angular里绑定HTML
-
<div>{ {content}}</div> <div>解析前-->解析后</div> <span [innerHTML]="content" class="red"></span>
（5）在Angular中简单运算
-
1+2={ {1+2}}
（6）在Angular中数据循环
-
简单数组
-
in .ts public arr=['1','2','3'] in .html <ul> <li *ngFor="let item of arr"> { {item}} </li> </ul>
-
-
Property ‘item’ does not exist on type ‘HomeComponent’.
问题未解决 -
对象数组
-
in .ts public userlist:any[]=[{ name:'zara', time:1 },{ name:'marry', time:4 }]; in .html <h2>复杂数组</h2> <ul> <li *ngFor="let item of userlist"> { {item.name}}--{ {item.time}} </li> 为什么这个复杂的可以输出 </ul>
-
-
嵌套数组
-
in .ts public car:any[]=[{ p:'宝马', list:[{ price:100, n:'w' }]},{ p:'奥迪', list:[{ price:200, n:'a' }] }] in .html <ul> <li *ngFor="let m of car"> <h2>{ {m.p}}</h2> <ol> <li *ngFor="let i of m.list"> { {i.price}}--{ {i.n}} </li> </ol> </li> 为什么可以得到嵌套数据 </ul>
-
（7）在Angular中引入图片
-
引入本地图片
-
属于静态资源，存入assets
-
在src中存放路径
-
<img src="assets/picture/1.png" alt="我的图片">
-
-
-
引入网上图片
- 复制图片地址
- 定义图片数据
- 渲染到html中，给属性赋值，需加
[ ]
（8）在Angular数组循环中显示数据索引
-
定义数组
-
在循环中加入
let key=idex-
<h1>循环数据 显示数据索引索引</h1> <ul> <li *ngFor="let item of piclist;let key=index "> { {key}}---->{ {item.title}} </li> </ul>
-
（9） 条件判断 *ngif
-
<ul> <li *ngFor="let item of piclist;let key=index "> <span *ngIf="key==1" class="red">{ {key}}---->{ {item.title}}</span> <span *ngIf="key!=1">{ {key}}---->{ {item.title}}</span> </li> </ul>
(10) 开关语句 *ngSwitch
-
<h1>开关*ngSwitch</h1> <div [ngSwitch]="num"> <div *ngSwitchCase="1">正确输入</div> <div *ngSwitchCase="2">重新输入</div> <div *ngSwitchDefault>错误输入</div> </div>
(11) 动态改变class—*ngClass
-
<div [ngClass]="{ 'orange': flag,'blue':!flag}"> 动态变化class </div>
(12) --ngStyle
-
<p [ngStyle]="{ 'color':'blue' }">ngStyle,固定值＋单引号</p>
(13) --管道
-
Angular内置方法
-
http://bbs.itying.com/topic/5bf519657e9f5911d4f2a34
-
日期格式化
-
<h1>管道时间格式化,注意＋单引号</h1> { {today | date: 'YYYY-MM-dd HH:mm:ss'}}
-
-
-
自定义方法
(14) 执行事件 （click）=“getData（）”
-
在.HTML中显示效果
-
<h1>事件</h1> { {num}} <button (click)="run()">执行事件</button> <button (click)="getData()">获取数据</button> <button (click)="setData()">改变数据</button>
-
-
在 .ts中写执行方法
-
run(){ alert("执行事件"); } getData(){ alert(this.flag); } setData(){ this.num='改变后数据'; }
-
（15） 表单事件 事件对象
-
通过事件对象监听文本输入，得到文本响应次数，文本数据…
-
<button (click)="runevent($e)">
-
最低0.47元/天 解锁文章
1928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
