一.安装
1.安装node.js
下载地址:https://nodejs.org/en/
2.查看版本,修改npm镜像地址
node -v # v12.13.0
npm -v # 6.12.0
# 查看并修改npm镜像地址
npm congfig get registry # http://registry.npmjs.org
npm config set registry http://registry.npm.taobao.org
# 安装cnpm
npm install -g cnpm --registry==https://registry.npm.taobao.org
# 安装angular,-g代表全局安装
cnpm install -g @angular/cli
# 检验是否安装成功
ng version
3.安装vscode插件
二.启动项目
ng new my-app --skip-install # 新建项目,但取消依赖库的安装(npm安装依赖时可能出错)
cd my-app
cnpm install # 使用cnpm安装依赖
ng serve --port=4200 --host 0.0.0.0 # 启动服务:http://0.0.0.0:4200/ ,4200为默认端口
项目结构
三.常用语法
1.创建组件
# 在src/app目录中创建组件,组件目录中已自动生成html,css和ts文件
ng g component components/news
news.component.ts
import { Component, OnInit } from '@angular/core'; /*引入angular 核心*/
@Component({
selector: 'app-header', /*使用这个组件的名称*/
templateUrl: './header.component.html', /*html 模板*/
styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
// 可在此处定义属性数据和对象
constructor() { /*构造函数*/
}
ngOnInit() { /*初始化加载的生命周期函数*/
}
}
2.数据绑定
1.组件的ts文件中定义属性和对象
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
// 在组件种定义属性(数据),默认为public,所有类均能访问
title="this is news title";
public msg="news component msg";
// ts中建议在定义属性时写上属性类型
username:string="kzzf";
// any表示任意类型,protected 只能在此类和此类的子类中使用
protected age:any='23';
// 定义一个私有的对象,只能在这个类中使用
private userinfo:object={
username: "skkk",
age: 18,
}
// 仅定义一个属性,不赋值,在构造方法或初始化方法中再赋值
message:any;
// 定义一个html片段
htmlContent:string="<h2>这是一个html标签</h2>"
// 定义一个数组
public arr:any=[111,222,"333"];
// 数组的第二种定义方式
list:Array<number>=[123,456,789]
userlist:any=[
{
username: '张三',
age: 22,
},
{
username: '李四',
age: 28,
},
]
constructor() {
this.message="属性赋值或改变属性值";
this.msg="改变msg属性的值";
}
ngOnInit() {
}
}
2.组件的html文件中进行引用
<h1>angular模板中绑定数据</h1>
<h2>绑定变量{{title}}</h2>
<h2>username={{username}}, age={{age}}</h2>
<h4>{{userinfo.username}}-{{userinfo.age}}</h4>
<h1>angular模板中绑定html属性</h1>
<!-- 给div的title绑定动态属性值 -->
<div [title]="msg">
张三
</div>
<h1>angular模板中绑定html片段</h1>
<div [innerHTML]="htmlContent"></div>
{{htmlContent}} <!-- 这样写的话html标签不会被浏览器解析 -->
<h1>angular模板中允许简单的运算</h1>
<h2>1+1={{1+1}}</h2>
<h1>angular中的数据循环</h1>
<ol>
<li *ngFor="let item of arr">
{{item}}
</li>
</ol>
<ul>
<li *ngFor="let item of userlist">
{{item.username}} -
{{item.age}}
</li>
</ul>
3.图片的引入,判断循环和动态属性
1.组件的ts文件中定义属性和对象
export class HomeComponent implements OnInit {
public picUrl = "https://www.baidu.com/img/bd_logo1.png?where=super";
public list:any[]=[
{"title": "新闻1"},
{"title": "新闻2"},
{"title": "新闻3"},
];
public attr:string="orange";
public orderStatus:number=0;
2.组件的html文件中进行引用
<h1>引入图片</h1>
<!-- 将图片放入assets目录中 -->
<img src="assets/images/123.jpg" alt="">
<!-- 网络图片,直接绑定picUrl属性 -->
<img [src]="picUrl" alt="">
<h1>循环数据,获取列表索引</h1>
<ul>
<!-- 循环遍历的过程中,把索引赋值给变量key -->
<li *ngFor="let item of list;let key=index">
<!-- 条件判断if,angular中没有else -->
<span *ngIf="key==1" class="red">{{key+1}}--{{item.title}}</span>
<span *ngIf="key!=1">{{key+1}}--{{item.title}}</span>
</li>
</ul>
<h1>条件判断 ngswitch</h1>
<!-- 根据orderStatus的值,动态选择显示的内容 -->
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">已付款</p>
<p *ngSwitchCase="2">已发货</p>
<p *ngSwitchCase="3">已完成</p>
<p *ngSwitchDefault>无效订单</p>
</span>
4.管道
<!-- today为ts中定义的一个日期对象 -->
{{today | date:"yyyy-MM-dd HH:mm:ss"}}
5.事件
<h1>事件</h1>
<!-- 监听click事件,触发run方法并传入参数 -->
<button (click)="run(1)">按钮</button>
<h1>表单元素的事件对象</h1>
<!-- $event 传入当前的事件 -->
<input type="text" (keydown)="keyDown($event)">
<button (click)="runEvent($event)">执行方法获取事件对象</button>
keyDown(e:any){
// 若输入回车,则弹出input框当前的value
if(e.keyCode==13){
alert(e.target.value);
}else{
console.log(e.target); // 获取当前事件的dom节点
console.log(e.key); // 获取输入的值
console.log(e.keyCode); // 获取字符对应的编码
}
}
runEvent(e:any) {
var dom:any=e.target; // 获取当前的事件对象
dom.style.color="red"; // 改变事件对象的css属性
}
6.双向数据绑定
先在app.module.ts中引入FormsModule并引用
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule // 引用
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在组件中使用
<h1>双向数据绑定 MVVM(模型和视图相互影响) 仅针对表单元素</h1>
<!-- ngModel 将input框的value和keyword属性进行动态绑定 -->
<input type="text" [(ngModel)]="keyword">
{{keyword}}
<!-- 调用方法改变keyword属性值 -->
<button (click)="getKeyword()">获取keyword</button>
<button (click)="changeKeyword()">改变keyword</button>
changeKeyword() {
this.keyword="改变后的值";
}
getKeyword() {
alert(this.keyword);
}
四、模板语法
1.ng-if
if和else的用法
<!-- else后面跟的是模板名 -->
<span class="indicator" *ngIf="i==selectIndex else elseContent"></span>
<!-- 定义一个模板,模板名为:elseContent -->
<ng-template #elseContent>
<span>123</span>
</ng-template>
2.ng-for
<li *ngFor="let menu of menus; let i=index">
<a
[class.active]="i==selectIndex" <!-- 应用单个class的常用技巧 -->
(click)="handleSelected(i)"
href="#">{{ menu.title }}</a>
</li>
常用的循环变量
# 判断是否为第一个或最后一个元素,布尔值
let f = first
let l = last
# 布尔值,索引是否为奇数或偶数
let odd = odd;
let even = even;
3.样式绑定
class.className,ngClass和ngStyle
[class.active]="i==selectIndex" <!-- 应用单个class的常用技巧 -->
<h1>ngStyle</h1>
<!-- 加引号则为字符串,不加时对应了一个属性变量,属性变量可以在ts中定义或由父组件传入 -->
<p [ngStyle]="{'color': 'red'}">这是一个p标签</p>
<p [ngStyle]="{'color': attr}">这是一个p标签</p>
<a [ngStyle]="{'color': i==selectIndex ? titleActiveColor : titleColor}"></a>
<h1>ngClass,根据bool值动态选择class样式,这里的even和odd对应了css中的类样式</h1>
<li
*ngFor="let menu of menus; let i = index; let even = even; let odd = odd"
[ngClass]="{ 'even': even, odd: odd }"
>