angular与其他的差别
angular cli安装
cnpm install -g @angular/cli 最新版本
cnpm uninstall -g @angular/cli 卸载全局版本
npm install -g @angular/cli@1.2.1 指定版本
ionic的安装
cnpm install -g cordova ionc
如果报错
npm install @ionic/app-scripts@latest --save-dev
项目解决问题
npm i --save-dev @angular-devkit/core 报错解决
"@angular/flex-layout": "^5.0.0-beta.13",
安装@angular/cli之后报错
- 在 Windows 平台上安装 @angular/cli 会报很多 error，那是因为 @angular/cli 在 Windows 平台上面依赖 Python 和 Visual Studio 环境，而很多开发者的机器上并没有安装这些东西
- Windows 64位：https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi
- npm install --global --production windows-build-tools
创建项目
ng new 项目名称 创建项目
cd 项目名
cnpm install // cnpm install --by=npm
ng serve --open //直接打开 npm sr npm stast
快速删除node_modules
npm install rimraf -g
rimraf node_modules
rm -rf node_modules
清楚缓存
npm cache clean
生命周期
ngOnInit 初始化状态
ngDoCheck 事件发生改变的状态
项目结构分析
.angular-cli.json Angular CLI 的配置文件
.editorconfig 给你的编辑器看的一个简单配置文件
.gitignore 一个Git的配置文件
karma.conf.js 给Karma的单元测试配置
src目录结构
app/app.component.{ts,html.css,spec,ts} 组件使用HTML模块,css样式和单元测试定义AppComponent组件,他是根组件
app/app.module.ts 定义AppModule,这个跟模块会告诉Angular如何申明组件
assets/* 静态文件
environments/* 这个文件夹中包括为各个环境准备的文件
favicon.ico 请把他换成你自己的图标
mian.ts 这是应用的主要入口点
jQuery和Bootstrap
安装jQuery和Bootstrap
npm install jquery --save
npm install bootstrap --save
cnpm i -S bootstrap@3.3.7 指定版本
让Typescript类型识别jquery和Bootstrap类型的描述文件
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
在.angular-cli.josn 文件中的apps下scripts里分别写入
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
在全局引入css找到style.css文件.写入全局样式
@import "~bootstrap/dist/css/bootstrap.min.css";
生成组件
在根目录运行ng g component component/navbar 生成导航条组件(在component下创建navbar组件)并会app.module.ts 里面添加这个组件并且声明组件
| 组件名 | 用途 |
|---|---|
| app | 项目自带的默认component |
| navbar | 网页/APP导航条 |
| search | 搜索区域 |
| product | 商品详情 |
| stars | 星级评分 |
| foot | 底部信息 |
打开我们的app.component.html把单页面应用的基本骨架搭建起来
组件
app.conponents.ts这个组件
@Component组件的装饰器
selector 用来定义组件渲染的标签名称,说白了就是组件的名字
templateUrl 用来指定组件的模板文件
styleUrls 一个数组,用来存放组件相关的样式文件
import {Components.ts} from "@angular/core"
@Component({
selector:"app-root",
templateUrl:"./app.component.html"
styleUrls:["./app.component.css"]
})
export class AppComponent{
title="app"; //组件的数据,或者函数
}
Angular的指令
- 组件:用于构建UI组件,继承与Directive类
- 属性指令:用于改变组件的外观或行为
- 结构指令: 用于动态添加或者DOM元素来改变DOM布局
Component(组件)是整个框架的核心,也是终极目标,"组件化"的意义有2个:
- 第一是分治,因为有了组件之后,我们可以把各种逻辑封装在组件内部,避免混在一起
- 第二是复用,封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用
typescript
npm install -g typescript 全局配置
tsc -version 查看安装的版本
tsc 文件路径 编译成js
总结
变量声明
- let
- const
基本数据类型
-
boolean 布尔值
-
number 数字
-
string 字符串
-
数组 number[]或者Array
-
元祖[number,string]
let arr3:[number,string]=[10,"jack"]
-
对象object
-
接口
interface-
interface Person{ name:string, age:number } let user:Person={ name:"jack", age:18 }
-
-
任意类型
any在不确定类型的情况下可以使用any但是尽量少用 -
函数空返回值
void -
null和undefined -
*ngFor*ngIfng-template与[ngIf]直接给大盒子进行数据绑定 -
<li *ngFor="let todo of todos"> {{todo.title}}</li>
const todos=[{id:1,title:'小明',done:true}]
<footer class="footer" *ngIf="todos.length">
<ng-template [ngIf]="todos.length">
* `ngClass="{类名:true}"` //可以跟双向双向绑定一起进行绑定class
### 基础项目: TodoMVC
### 修改端口
`ng serve --port 4201`
### 声明属性的几种方式
public 默认 可以再这个类中使用,也可以再累外面使用
protected 保护类里 他只有在当前类和他的子类里面可以访问
private 已有 只有在当前类才可以访问这个属性
`<div id="{{msg}}">ffff</div>`
`<div [title]="msg">鼠标喵上去</div>`
`<div [innerHTML]="h"></div>` //可以识别 `constructor` 里面`this.h`的标签内容
` <li *ngFor="let item of list3;let key=index"> {{item.titlte}}---{{key}} </li>`
### 双向数据绑定
在app.module.ts里面添加
import { FormsModule } from "@angular/forms";
imports: [
FormsModule //添加这个
],
在表单中双向绑定某个数据需要具有`name`属性
在html上添加双向绑定的数据
<input class="toggle" type="checkbox" [(ngModel)]="todo.done">
### `set` `get` 方法
```
访问
get toggleAll() {
return this.todos.every(t => t.done);
}
赋值
set toggleAll(val) {
this.todos.forEach(t => t.done = val);
}
```
### 路由的基本处理
`ng generate module app-routing --flat --module=app`
在`app-routing.module.ts`
import { RouterModule, Routes } from '@angular/router';
import { FooComponent } from './foo/foo.component'
import { BarComponent } from './bar/bar.component'
const routes: Routes = [
{
path: '',
redirectTo: '/contacts', // 当请求根路径的时候,跳转到contacts联系人组件
pathMatch: 'full' // 必须完全匹配到路径的时候才做重定向
},
// 路由嵌套导航
{
// 当我们访问contacts的时候,会先把LayoutComponent渲染出来
// 然后把children 中path为空的路由渲染到LayoutComponent组件的路由出口上
path: 'contacts',
component: LayoutComponent,
children: [
{
path: '',
component: ContactListComponent
},
{
path: 'new', // 这里的new的请求路径是 /contacts/new
component: ContactNewComponent
},
{
path: 'edit',
component: ContactEditComponent
}
]
},
{
path: 'foo',
component: FooComponent
},
{
path: 'bar',
component: BarComponent
}
]
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
[]()
### 打包发布
`ng build --prod --aot`
假设我想打包成`www.w3cways.com/test/index.html`则执行
`ng build --base-href /test/`
会生成dist文件夹,将dist文件夹中的文件,直接上传到服务器便可访问
### 压缩打包
ng build --prod --no-extract-license
倒置所有脚本资源的加载URL指向根目录。Angular Cli 提供一个参数改变该值。
`````
ng build --prod --bh /v2/
`````
### 封版本
`package.json`
`~` 会匹配最近的小版本 比如`~1.2.3` 会匹配所有`1.2.x`版本
`^` 会匹配最新的大版本 比如 `^1.2.3` 会匹配所有`1.x.x`
在`package.json` 文件将`^`改为`~`, 把`node_modules`文件夹全部删除,重新`cnpm i`
### 组件传值
* `@Input` 定义子组件传入的变量
* `@Output` 定义输出变量
```
//父组件html
<li *ngFor="let item of dataSet;let i = index">
<span>{{item.name}}</span>----{{i+1}}--{{item.id}}
<app-child [names]="item" (foo)="bar($event)"></app-child>
</li>
//父组件ts文件
dataSet = [
{"id":0,"name":"张三"},
{"id":1,"name":"李四"},
{"id":2,"name":"王五"},
]
bar(event:any){
console.log(event);
}
//子组件html代码
<input type="button" value="{{names.name}}" (click)="todo($event)"/>
//子组件ts文件
export class ChildComponent implements OnInit {
@Input() names:any = {}
//定义一个输出的 (记得把Output. Input EventEmitter 需要在标题声明)
@Output() foo = new EventEmitter<string>()
todo(event:any){
this.foo.emit('你好');
}
```
* 在angular中使用局部模板变量可以获取到子组件的实例引用
`<app-child [names]="item" (click)="father.childFn()" #father></app-child>`
`在子组件中定义父组件传入的变量 @Input() names:any={}; children(){}`
* 使用@ViewChild获取子组件的引用
在父组件中` @ViewChild(子组件名称) 随便命名:子组件名称`
```
@ViewChild(ChildrenComponent) children: ChildrenComponent;
```
子组件的变量可以再app-module里面看,调用子组件的方法需要把子组件放在父组件里面
* 中间人模式
中间人模式相当于就是同时利用输入输出将信息通过两个组件共同的父组件进行组件间的通讯,这个共同的父组件就是中间人