Angular入门
注：以下内容都是基于Windows环境讲解说明的。
一、了解
二、环境配置以及工具
a.Nodejs安装
b.npm包管理器
c.cnpm（淘宝镜像）
a.chrome debugger插件安装
b.VSCode快捷键
c.VSCode调试Angular代码
d.其他插件推荐
四、Angular项目说明
=================分 ==================界 ==================线 =================
一、了解
Angular是一个基于TypeScript的开源Web应用程序框架，一个用HTML，CSS和JavaScript / TypeScript构建客户端应用程序的框架。Angular是由构建AngularJS的团队重写的。
二、环境配置以及工具
a.Nodejs安装
确保开发环境中包含Node.js和npm包管理器。
去官网下载NodeJs，找到环境合适稳定的版本进行下载安装，安装会自动配置全局变量
https://nodejs.org/en/
安装后打开终端/控制台窗口允许命令查看是否安装成功
node -v
b.npm包管理器
Angular、Angular CLI和Angular应用都依赖于npm包中提供的特性和功能。想要下载npm包，就必须要拥有一个npm包管理器。
好在安装Nodejs的时候已经默认安装了，所以只需要在安装完NodeJs后验证是否安装npm即可。
在终端/控制台窗口输入命令进行验证
npm -v
c.cnpm（淘宝镜像）
一般的项目会通过 npm install 安装应用等等，但是时间会比较长，或者不知道什么原因出现错误，这时候推荐使用cnpm，下面使用命令安装cnpm并指定淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
a.chrome debugger插件安装
直接在VSCode扩展（ctrl+shitf+x）搜索 Debugger for Chrome，点击安装即可。这个插件以便于开发阶段前台进行debug。
b.VSCode快捷键
网上搜索一大堆，就不介绍了。https://code.visualstudio.com/docs/getstarted/keybindings
c.VSCode调试Angular代码
安装完Debugger for Chrome后，按F5配置Debug参数，默认即可。保存后再次按F5进入debug模式。提前打好测试断点。
F8进入下一步，F5直接走完。
d.其他插件推荐
TSLint：Typescript语法检查 Prettier：代码格式化 IntelliJ IDEA
三、项目创建
四、Angular项目说明
webapp ├── app - Your application（你的应用）app根模块 │ ├── account - User account management UI(用户账号管理界面) │ ├── admin - Administration UI(管理员界面) │ ├── blocks - Common building blocks like configuration and interceptors(公共构建模块和拦截器) │ ├── components - Common components like alerting and form validation(常用组件，比如警告组件和验证组件) │ ├── entities - Generated entities (more information below)(生成的实体，下面会有介绍) │ ├── home - Home page(主页) │ ├── layouts - Common page layouts like navigation bar and error pages(通用页面布局，类似导航条和错误页) │ ├── services - Common services like authentication and user management(通用服务，类似身份验证和管理) │ ├── app.constants.js - Application constants(应用常量) │ ├── app.module.js - Application modules configuration(应用modules配置)根模块，之后添加的组件都会在这里面进行引用 │ ├── app.state.js - Main application router(应用路由--单页应用业务通过js控制，无法简单通过url控制，故而使用应用路由，详情请百度) ├── bower_components - Dependencies installed by Bower(通过Bower安装的依赖) ├── content - Static content(静态内容) │ ├── images - Images(图片) │ ├── styles - CSS stylesheets(css样式表) │ ├── fonts - Font files will be copied here(字体库) ├── i18n - Translation files(国际化语言文件) ├── scss - Sass style sheet files will be here if you choose the option(如果创建应用选择了LibSass，则其文件会在这生成) ├── swagger-ui - Swagger UI front-end(SwaggerAPI文档前段页面) ├── 404.html - 404 page(404错误页) ├── favicon.ico - Fav icon(网站图标) ├── index.html - Index page(索引页)入口 ├── robots.txt - Configuration for bots and Web crawlers(针对搜索引擎爬虫的配置文件) ├── package.json - 配置文件，包括依赖 ├── robots.txt - Configuration for bots and Web crawlers(针对搜索引擎爬虫的配置文件)
a.*ngFor
ts: let colors = [ 'red', 'blue', 'yellow', 'green' ]; html: <div *ngFor="let color of colors let i=index let odd=odd"> {{odd}} {{i}} {{color}} </div>
效果如下：
b.*ngIf
<div *ngIf="showInfo">{{message}}</div>
c.ngClass,ngStyle
<span class="badge" [ngClass]="getBadgeClass(health.status)" jhiTranslate="{{'health.status.' + health.status}}"> {{health.status}} </span>
<span class="badge" [ngStyle]="{'color': 'red'}" jhiTranslate="{{'health.status.' + health.status}}">
{{health.status}}
</span>
d.*ngSwitch
<ul [ngSwitch]="score"> <li *ngSwitchCase="1">已支付</li> <li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li> <li *ngSwitchDefault>无效</li> </ul>
e.click执行事件
<button class="button" (click)="getData()"> 点击按钮触发事件 </button>
g.表单事件
<input type="text" (keyup)="keyUpFn($event)"/> keyUpFn(e){ console.log(e) }
h.管道
时常我们需要把数字显示成金额、大小写转换、日期等等。 Angular管道对于象这样小型的转换来说是个很方便的选择。管道是一个简单的函数，它接受一个输入值，并返回转换结果。
<p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
i.双向数据绑定
1.首先在app.module.ts里面引入并声明;
2.再在input里使用[(ngModel)]="inputVal"双向绑定数据
3.home.component.ts里面的方法为了测试通过model来改变视图
j.路由
RouterModule.forRoot(
[
...LAYOUT_ROUTES,
{
path: 'admin',
loadChildren: './admin/admin.module#FccAdminModule' // 告诉路由从另一个模块中获取子路由:需要导入模块的相对路径、# 分隔符、导出模块类的名称
},
生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。
每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，比如OnInit接口的钩子方法叫做ngOnInit.
a.生命周期钩子分类
基于指令与组件的区别来分类
指令与组件共有的钩子
ngOnChanges 当数据绑定输入属性的值发生变化时调用 // 调用顺序1
ngOnInit 在第一次 ngOnChanges 后调用 // 调用顺序2
ngDoCheck 自定义的方法，用于检测和处理值的改变 // 调用顺序3
ngOnDestroy 指令销毁前调用 // 调用顺序8
组件特有的钩子
ngAfterContentInit 在组件内容初始化之后调用 // 调用顺序4
ngAfterContentChecked 组件每次检查内容时调用 // 调用顺序5
ngAfterViewInit 组件相应的视图初始化之后调用 // 调用顺序6
ngAfterViewChecked 组件每次检查视图时调用 // 调用顺序7
首次加载生命周期顺序
export class LifecircleComponent { constructor() { console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做') } ngOnChanges() { console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)'); } ngOnInit() { console.log('02ngOnInit执行了--- 请求数据一般放在这个里面'); } ngDoCheck() { console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应'); } ngAfterContentInit() { console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用'); } ngAfterContentChecked() { console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用'); } ngAfterViewInit() : void { console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）'); } ngAfterViewChecked() { console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用'); } ngOnDestroy() { console.log('08ngOnDestroy执行了····'); } //自定义方法 changeMsg() { this.msg = "数据改变了"; } }
浙公网安备 33010602011771号