Angular
一.Angular介绍
1.安装Angular-cli脚手架
1.安装Node
2.安装npm
3.安装Python
4.安装c++编译工具
angular cli在windows上同时依赖c++编译工具,
npm install --global --production windows-build-tools
安装cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.org
安装脚手架Angular cli
Angular cli是Angular官方开发的一个类似于Vue cli的脚手架开发工具,
它帮我们集成了webpack打包,开发服务器,单元测试,自动编译,部署等功能。
cnpm i -g @angular/cli
测试:ng --version
2.使用AngularCli初始化Angular
ng new 项目名(angular-demo)
在命令行中会自动执行装包,因为是用npm安装的,用Ctrl+c打断
进入刚创建的项目名
cd angular-demo
cnpm install
使用脚手架工具初始化项目完成之后,就可以启动开发模式了
在angular -demo目录下执行ng serve
默认占用4200端口,可以使用ng server --port 端口号修改
找到./src/app/app.components.ts文件,将AppComponent 组件类中title 修改
可以看到浏览器中对应的改变。
3.一个Angular应用是如何启动的
项目结构介绍
e2e端到端的测试
src源码
angular-Cli.json angularcli脚手架工具配置文件
editorconfig 针对编辑器的代码风格约束
gitigonre git仓库忽略配置项
tslink.json TypeScript 代码风格校验工具配置文件
二.Typescript介绍和使用
1.核心特性-组件
component 是整个框架的核心,也是终极目标。组件化的意义有两个
第一是分治,因为有了组件,可以把各种逻辑封装在组件内部,避免混在一起
第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用
生成组件 ng genetate component 组件名称
模块
模块是组织业务代码的利器,按照业务场景,把组件,服务,路由打包到模块里面。
服务是针对某个单一或系统功能的封装,例如在http服务
2. typescript
1.typescript数据类型
布尔值
let idDone:boolean = false;
数字
let amount: numbet = 7;
字符串
let foo:string = 'hello';
字符串也支持模板字符串
let user = {
name: 'jack',
age: 18
}
let str:string = `大家好我叫:${user.name}我今年${user.age}岁了`
数组
方法1 let list:number[]=[1,2]
方法2 let list:Array<number>=[1,2]
元组
let x:[string,number] = ['hello',10]
Object
没有类型校验和语法提示(少用)
let foo:Object = {
name: 'jack',
age: 18
}
如下书写,可以校验
let user:{
name: string,
age:number
} ={
name:'jack',
age:18
}
使用接口
interface Person{
name:string,
age: number
}
ler user:Person={
name: 'jake',
age: 12
}
Any
任意类型(尽量少用)
Void(用于函数返回值)
没有任何类型
function add(x:number,y:number):number{
return x+y
}
var ret:number = add(10,20);
function fn():void{
console.log('hello')
}
Null和Undefined
和void相似,它们本身的类型用处不是很大
let u:undefined = undefined
let n:null = null
2.typescript解构赋值
数组解构赋值(数组按照顺序解构)
let arr:number[]= [1,3]
let [num1,num2] = arr
对象解构赋值(对象按照属性名称解构)
let user = {
name:‘jack’,
age:23
}
//在浏览器环境中,window对象本身就有一个成员name
let {name:nickname,age} = user
3.typescript剩余参数
function aa(…args:number[]){
console.log(args);
}
aa(1,2,3,4)
数组展开操作符
let arr1 = [1,2,3]
let arr2 = [3,2,1,...arr1]
对象展开操作符
let obj1 = {
foo:'bar'
}
let obj2 = {
...obj1,//对象的展开操作符,一般用于对象拷贝,混入
name: 'jack'
}
4.typescript类的基本用法
//类就是构造函数的另一种书写方法
//构造函数的写法
function Person(name:string,age:number){
this.name = name;
this.age = age;
}
Person.prototype.sayHey= function():void{
console.log(this.name,this.age)
}
var pp = new Person(‘zhangsan’,‘12’)
pp.sayHey();
//类的写法
class Person {
//typescript要求类的成员应该被定义出来并确定类型
name:string;
age: number
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//实例方法
sayHello(){
console.log(this.name,this,age)
}
}
let pl = new Person(‘lisi’,12);
p1.sayHello();
5.typescript类的继承
class Person{
name:string;
age:number;
construsctor(name:string,age:number){
this.name = name;
this.age = age;
}
sayHey(){
console.log(‘sayHey’)
}
}
class student extends Person{
constructor(name:string,age:number){
super(name,age)//super就是父类的构造函数
}
} new student().sayHey()
new studnet('zh',19).sayHey()
6.typescript类成员访问修饰
//默认都是对外公开的
//private 用来声明私有成员
//私有成员无法被继承
//受保护的成员可以被继承,只能在子类中调用,不能在子类的实例中调用
//readonly只读,不允许修改
class Person{
public readonly name: string = ‘张三’;
public age: number;
//可以在声明成员的同时为其赋值
type:string = ‘人类’;
protected foo:string=‘bar ’
gettype(){
//在类的内部访问私有成员,在外部无法访问
return this.type
}
}
class student extends Person{
getfoo(){
console.log(this.foo)
}
}
new student().getfoo()
类的简写
class Person{
public name: string;
public age: number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
}
等价于
class Person{
constructor(public name: string,public age:number){}
}
7.typescript属性的get和set
class Person{
private _age:number;
get age(){ return this.age}
set age(val){ if(val<0){throw new Error(‘年纪不能为空’)} this._age = val;}
}
let p1 = new Person()
p1.age=-10;//报错
8.typescript类的静态成员
不需要实例化访问的成员称之为静态成员,即只能被类访问的成员
实例成员,只能通过new 出来的实例访问
静态成员,只能通过类本身访问
9.typescript函数
function add(x:number,y:number):number{
rerurn x+y;
}
可选参数
function add(x:number,y?:number):number{
rerurn x+10
}
默认参数
function add(x:number,y:number= 20):number{
rerurn x+y
}
剩余参数
function sum(…args:number[]):number {
}
sum(1,3,3)
箭头函数
let add = (x:number,y:number)=>x+y
10.typescript-for-of循环
let arr:number[] = [1,3,4];
for(let val of arr){
console.log(val)
}
11.typescript模块
模块导出
export default xxx
export const foo:string = ‘bar’,
export const bar:string = ‘’
模块导入
import xxx from ‘模块标识’
import {foo,bar} from ‘模块’
12.typescript总结
13.组件介绍