一、配置安装
1、需要知识
html+css+js+es6+Typescript
2、安装配置
下载nodejs
下载npm
下载cnpm
建议如下代码,换成淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、下载
输入cnpm install -g @angular/cli
后开始下载
下载完成后输入 ng v
,出现如下安装成功
4、创建新的项目
ng new angular01
(如果出现如下错误)
建议,回到C盘,卸载angular
用下面的命令
npm uninstall -g @angular/cli
然后重新用npm安装
npm insatll -g @angular/cli
安装后重新执行命令(下面是跳过安装以来)
ng new angular02 --skip-install
npm有点慢,可以用cnpm
创建好如下依赖库
打开项目
ng serve --open
结果如下:
5、项目导入VS code
用vs code 打开刚刚创建的项目
下载Angular相关插件
然后就可以进行相关开发了
二、目录结构分析
e2e
端对端
node_modules
各种依赖
src
写代码,定义各种组件
package.json
项目配置文件,名称,版本,所需依赖等
tsconfig
是ts的配置文件
package.json与src最重要
app
assets
静态文件
app--app,modules.ts
三、初步操作
Angular 组件
你所看到的这个页面就是应用的外壳。 这个外壳是被一个名叫 AppComponent
的 Angular 组件控制的。
The page you see is the application shell. The shell is controlled by an Angular component named AppComponent
.
组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据,监听用户输入,并且根据这些输入执行相应的动作。
修改应用标题
用你最喜欢的编辑器或 IDE 打开这个项目,并访问 src/app
目录,来对这个起始应用做一些修改。
你会在这里看到 AppComponent
壳的三个实现文件:
app.component.ts
— 组件的类代码,这是用 TypeScript 写的。app.component.html
— 组件的模板,这是用 HTML 写的。app.component.css
— 组件的私有 CSS 样式。
<h1>{{title}}</h1>
双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title
属性的值绑定到 HTML 中的 h1
标记中。
浏览器自动刷新,并且显示出了新的应用标题。
以上
- 你使用 Angular CLI 创建了初始的应用结构。
- 你学会了使用 Angular 组件来显示数据。
- 你使用双花括号插值显示了应用标题。
2、创建自己的组件
ng generate component heroes
这样会生成相应的文件
你要从 Angular 核心库中导入 Component
符号,并为组件类加上 @Component
装饰器。
@Component
是个装饰器函数,用于为该组件指定 Angular 所需的元数据。
CLI 自动生成了三个元数据属性:
selector
— 组件的选择器(CSS 元素选择器)templateUrl
— 组件模板文件的位置。styleUrls
— 组件私有 CSS 样式表文件的位置。
可以定义属性
在.html中调用
然后做的就是显示视图就可以了,在根组件中写入heroes
<h1>{{title}}</h1>
<app-heroes></app-heroes>
3、创建Hero类
在app目录下创建文件hero.ts,定义类
export interface Hero {
id: number;
name: string;
}
导入,并创建对象
页面显示
通过管道来使输出大写
**[(ngModel)]**是Angular的双向数据绑定语法。
这里把
hero.name
属性绑定到了HTML的textbox元素上,刹车数据流可以双向流动:从hero.name
属性流动到textbox,并且从textbox流回到hero.name
。
<label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
它属于一个可选模块FormsModule
,您必须自行添加此模块才能使用该指令。
它属于可选FormsModule
,您必须选择使用它。
会报错
应用模块
这些信息被称为元数据(元数据)。
有些元数据位于装饰器中,你会把它加到组件类上。@Component
@NgModule
最重要的装饰器位于顶部类AppModule上。@NgModule
Angular CLI在创建项目的时候就在src/app/app.module.ts
中生成了一个AppModule
类。这里也就是你要添加FormsModule
的地方。
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
imports: [
BrowserModule,
FormsModule
],
加入到app.modules.ts中就可以了
小节
- 您使用CLI创建了第二个组件
HeroesComponent
。 - 你把
HeroesComponent
添加到了壳组件AppComponent
中,刹车显示它。 - 你使用
UppercasePipe
来格式化英雄的名字。 - 你用
ngModel
指令实现了双向数据绑定。 - 你知道了
AppModule
。 - 您把它
FormsModule
引入了AppModule
,煞Angular能识别并应用ngModel
指令。 - 你知道了把组件声明到
AppModule
是很重要的,并认识到CLI会自动帮你声明它。
4、最终改动
app.commponent.html
<h1>{{title}}</h1>
<p>{{date}}</p>
<!-- <input type="text"> -->
<app-heroes></app-heroes>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { from } from 'rxjs';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent
]
})
export class AppModule { }
heroes.component.html
<h2>{{task.name}} details</h2>
<div>
<label>输入你要查询的项目
<input [(ngModel)]="task.name" placeholder="name"/>
</label>
<div>项目名称: {{task.name|uppercase}}</div>
<div>项目id:{{task.id}}</div>
<div>等待人数:{{task.wait_number}}人</div>
<div>等到时间:{{task.wait_time}}分</div>
</div>
heroses.component.ts
import { Component, OnInit } from '@angular/core';
import { wait_info} from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
task:wait_info={
name:'Roller coaster',
id:20,
wait_number:10,
wait_time:10,
wait_pre:10,
}
constructor() { }
ngOnInit(): void {
}
}
hero.ts
export interface wait_info {
name:string;
id:number;
wait_number:number;
wait_time:number;
wait_pre:number;
}