Angular的CLI安装

npm install -g @angular/cli

创建工作区和初始应用

ng new my-app

运行应用或者看pakcage.json的配置(npm run start)

cd my-appng serve --open

实际开发只需要对src目录下的文件进行代码编写

自定义组件

在src/app文件夹下创建my01文件夹 新建ponents.ts文件和ponents.css文件和ponents.html文件

ponent.html中使用自定义组件 以及ng g c 组件名称 快速生成组件

<app-my03></app-my03><h1>1</h1><app-my01></app-my01><app-my02></app-my02><app-my01></app-my01><!-- 组件制作方式是固定的 官方为了程序员可以更快制作出组件所以提供了快捷命令全程:ng generate component 组件名称简写:ng g c 组件名称-->

ponents.ts

//组件的逻辑文件//需要安装一款插件,才能快速写出默认的结构代码!!//插件快捷提示:ng-component//组件制作完成,必须要注册到全局中 才能使用!//在app.modules.ts文件中!import { Component, OnInit } from '@angular/core';@Component({//代表组件名 使用时<app-my01></app-my01>selector: 'app-my01',//当前组件关联的html地址templateUrl: './ponent.html',//当前组件关联的css地址styleUrls: ['./ponent.css']})// 组件的类型:命名规范-大驼峰命名法export class My01Component implements OnInit {constructor() { }ngOnInit(): void { }}

app.modules.ts文件中引入自定义组件,双向数据绑定也需要引入模块

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';//引入Forms模块才能支持双向数据绑定import {FormsModule} from '@angular/forms'import { AppComponent } from './ponent';// 引入自定义组件import { My01Component } from './my01/ponent';import { My02Componemt } from './my02/ponent';import { My03Component } from './my03/ponent';// 项目的全局配置文件://*全局引入各种模块://*组件的全局注册..//angular的组件是MVC结构://vue中:.vue文件中书写js css html代码//ng中:认为3中代码书写在一起导致内容过多,所以拆分成三个文件@NgModule({//组件的注入declarations: [AppComponent,My01Component,My02Componemt, My03Component],// 注入模块imports: [BrowserModule,FormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

数据,属性,事件

ponents.ts

//组件的逻辑文件//需要安装一款插件,才能快速写出默认的结构代码!!//插件快捷提示:ng-component//组件制作完成,必须要注册到全局中 才能使用!//在app.modules.ts文件中!import { Component, OnInit } from '@angular/core';@Component({//代表组件名 使用时<app-my01></app-my01>selector: 'app-my01',//当前组件关联的html地址templateUrl: './ponent.html',//当前组件关联的css地址styleUrls: ['./ponent.css']})// 组件的类型:命名规范-大驼峰命名法export class My01Component implements OnInit {// 类中书写一些属性；显示到html中,注意;结束!!name = '诚';age = 24;married = true;// obj类型boss={name:'容',age:24};// 对象方法showName(){return '我是诚'};showClick(){console.log('我被点击了') };// html代码html = '<div>我是div</div>';//动态样式size = 18;constructor() { }ngOnInit(): void { }}

ponents.html

<h3>我是myo1的名字:{{ name }}</h3><h3>我是myo1的名字:{{ age }}</h3><!-- ng中boolean类型的值在html中转换成true和false --><h3>结婚了吗:{{ married }}</h3><h3>obj类型:{{ boss }}</h3><h3>boss.name:{{ boss.name }}</h3><!-- 三目运算符 --><span>{{ age > 20 ? "大于20" : "没有大于20" }}</span><!--逻辑或 --><span>{{ true || false }}</span><!-- 逻辑与 --><span>{{ true && false }}</span><!-- 逻辑非 --><span>{{ !true }}</span><!-- 类中的方法 --><div>{{ showName() }}</div><!-- 点击事件vue:@click="showClick"ng中:(click)="showClick()"--><ul><li><button (click)="showClick()">点击事件</button></li></ul><!-- 属性的绑定 --><!-- vue中::title='name' --><!-- ng中:[title]='name' --><h1 title="刘锦容">我的名字</h1><h1 [title]="name">我的名字</h1><!-- 特殊的实行:用于显示html --><ul><!-- vue中:v-html --><!-- ng中:[innerHTML] --><div [innerHTML]="html"></div></ul><!-- 双向数据绑定 --><!-- 快捷键提示:ng-model --><!-- ng默认不开启双向数据绑定,需要手动开启 --><!-- 配置文件修改 需要重启服务器 --><input type="text" [(ngModel)]="name" /><div>{{ name }}</div><!-- 动态变化的样式 必须要是对象类型的值 --><!-- 对象类型的属性名 不能含有中划线 使用小驼峰,或者字符串 --><div [ngStyle]="{ color: 'red', fontSize: size + 'px' }">{{ size }}</div><button(click)="size = size + 1"[ngClass]="{ danger: size > 20, success: size < 20 }">变大</button>

ponents.css

h3{color: red;}.danger{color: red;font-weight: bold;border: 1px solid red;padding: 10px;}.success{color: white;background-color: green;padding: 10px;}

指令

条件指令

<div>1</div><h3>成绩:{{score}}</h3><!-- if写法 --><div *ngIf="score>=90">优秀</div><div *ngIf="score>=60 && score <90">良好</div><div *ngIf="score<60">不合格</div><button (click)="changeScore()">成绩降低</button><!-- if-else --><ng-container *ngIf="score>60; else bjg"><b>及格</b></ng-container><!-- ng提供的快递标记方式,类似于id='唯一标识',简化成#唯一标识 --><ng-template #bjg><b>不及格</b></ng-template>

<div>{{ type }}</div><button (click)="type = type + 1">升级会员</button><!-- 1.黄金会员,2.白金会员,3.铂金会员,4.钻石会员 --><span [ngSwitch]="type"><p *ngSwitchCase="1">欢迎黄金会员</p><p *ngSwitchCase="2">白金会员</p><p *ngSwitchCase="3">铂金</p><p *ngSwitchCase="4">钻石</p><p *ngSwitchDefault>未知的会员</p></span>

循环指令

<ul><!-- 普通for循环 --><li *ngFor="let item of names">{{ item }}</li><!-- 带有序号的for循环 --><ul><li *ngFor="let item of names; let i = index">{{ names }},{{ i }}</li></ul></ul>

自定义指令(自定义生成Focus指令和Upper)

在html中使用自定义指令

<p>my05 works!</p><!-- 自定义指令 --><div><!-- 自定义指令:ng generate directive 指令名 --><!-- 简化写法:ng g d 指令名 --><!-- appFouchs指令,可以让输入框自动获取焦点 --><!-- 指令设置好以后,需要重启服务器 --><input type="text" appFocus value="123" /></div><p appFocus></p><div><input type="text" /></div><div><input type="text" value="abc" appUpper /></div>

生成的Focus指令文件

// Focus 中的ts文件import { Directive, ElementRef } from '@angular/core';@Directive({selector: '[appFocus]'})export class FocusDirective {// 构造方法,累实例化自动触发的方法// 指令书写在哪个标签上,对应的元素就会作为参数传递到指令的构造方法中constructor(e:ElementRef) {console.log(e)let input = e.nativeElementinput.focus()}//ts:ts语言最为重要的特性--静态分析// 参数名:参数类型 声明类型给vscode看,这样可以给出对应的代码提示,对程序员很友好show(abc:string){//abc.}}

生成的Upper指令

import { Directive, ElementRef } from '@angular/core';@Directive({selector: '[appUpper]'})export class UpperDirective {constructor(e:ElementRef) {// 新增指令必须要重启命令行e.nativeElement.value = e.nativeElement.value.toUpperCase()}}

管道

angular中的管道:{{变量|管道}}和vue中的过滤器:{{变量|过滤器}}类似

ponent.html

<p>guandao works!</p><ul><li>大写:{{ "hello" | uppercase }}</li><li>小写:{{ "WORD" | lowercase }}</li><li>首字母大写:{{ "my name is taocheng" | titlecase }}</li><li>百分数:{{ 0.33 | percent }}</li><!-- 参数2:2.2 代表整数位2位,小数位2位 --><li>百分数小数位:{{ 0.363333 | percent: "2.3" }}</li><!-- 不足的要求,会用0补全 --><li>百分数小数位:{{ 0.055 | percent: "2.2" }}</li><!-- 千进位数字表达方式 --><li>钱:{{ 123456.789 | currency }}</li><li>钱:{{ 123456.789 | currency: "¥" }}</li><!-- 日期格式 --><!-- 时间戳:当前事件距离1970年1月1日的秒数 --><li>时间戳:{{ time }}</li><li>日期格式:{{ time | date }}</li><!-- 可以通过参数来指定日期格式year 年 ymonth 月 Mday 日 dhour 小时 hminute 分钟 mseconds 秒 s--><li>日期格式:{{ time | date: "yyyy-MM-dd HH:mm:ss" }}</li><li>日期格式:{{ time | date: "yyyy-MM-d hh:mm:ss" }}</li><li></li></ul>

ponent.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-guandao',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class GuandaoComponent implements OnInit {time = new Date().getTime()constructor() { }ngOnInit(): void {}}

Angular学习笔记01(脚手架的搭建 项目的创建 自定义组件 数据 属性 事件 指令以及管道的使用)