标签:serve css 重定向 test conf AC -- 解决问题 spec
cnpm install -g @angular/cli
最新版本
cnpm uninstall -g @angular/cli
卸载全局版本
npm install -g @angular/cli@1.2.1
指定版本
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",
ng new 项目名称
创建项目
cd 项目名
cnpm install
// cnpm install --by=npm
ng serve --open
//直接打开 npm sr
npm install rimraf -g
rimraf node_modules
rm -rf node_modules
.angular-cli.json
Angular CLI 的配置文件
.editorconfig
给你的编辑器看的一个简单配置文件
.gitignore
一个Git的配置文件
karma.conf.js
给Karma的单元测试配置
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
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"; //组件的数据,或者函数
}
Component(组件)是整个框架的核心,也是终极目标,"组件化"的意义有2个:
npm install -g typescript
全局配置
tsc -version
查看安装的版本
tsc 文件路径 编译成js
变量声明
基本数据类型
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
*ngIf
ng-template与[ngIf]
直接给大盒子进行数据绑定
<li *ngFor="let todo of todos"> {{todo.title}}</li> const todos=[{id:1,title:‘小明‘,done:true}] <footer class="footer" *ngIf="todos.length"></footer> <ng-template [ngIf]="todos.length"></ng-template>
ngClass="{类名:true}"
//可以跟双向双向绑定一起进行绑定class
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">
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渲染出来
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/
标签:serve css 重定向 test conf AC -- 解决问题 spec
原文地址:https://www.cnblogs.com/fangdongdemao/p/8972616.html