目录
目录结构
app目录
app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。
一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。
app.component.ts：这个文件表示组件，组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html
组件代码详解
/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';
/*用装饰器定义了一个组件以及组件的元数据 所有的组件都必须使用这个装饰器来注解*/
@Component({
/*组件元数据 Angular会通过这里面的属性来渲染组件并执行逻辑
* selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
*templateUrl 组件的模板，定义了组件的布局和内容
*styleUrls 该模板引用那个css样式
* */
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
/*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
title = '学习Angular';
}模块代码详解
/*这个文件是Angular根模块，告诉Angular如何组装应用 */
/*BrowserModule,浏览器解析的模块 */
import { BrowserModule } from '@angular/platform-browser';
/*Angular核心模块 */
import { NgModule } from '@angular/core';
//根目录
import { AppComponent } from './app.component';
//自定义模块（组件）
import { NewsComponent } from './components/news/news.component';
//双向绑定
import { FormsModule } from '@angular/forms';
/*@NgModule装饰器，接受一个元数据对象，告诉Angular如何编译和启动应用 */
@NgModule({
declarations: [ /*配置当前项目运行的组件 */
AppComponent,
NewsComponent
],
imports: [ /*配置当前模块运行依赖的其他模块 */
BrowserModule,
//双向绑定
FormsModule
],
providers: [], /*配置项目所需要的服务 */
bootstrap: [AppComponent] /*指定应用的主视图（称为根组件）通过引导根APPModule来启动应用， */
})
//根目录不需要导出任何东西，因为其他组件不需要导入根模块
export class AppModule { }
插值 {{...}}应用
html页面
<p>我是{{title}}</p>app.component.ts中
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '标题';
}[]单项输出
html页面
<div [title]="student">
张三
</div>app.component.ts中
export class AppComponent {
public student:string='我是一个学生';
}[()]双向绑定
app.module.ts
//双向绑定
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ /*配置当前项目运行的组件 */
AppComponent,
NewsComponent
],
imports: [ /*配置当前模块运行依赖的其他模块 */
BrowserModule,
//双向绑定
FormsModule
],
providers: [], /*配置项目所需要的服务 */
bootstrap: [AppComponent] /*指定应用的主视图（称为根组件）通过引导根APPModule来启动应用， */
})html页面
//双向绑定
<input type="text" [(ngModel)]='keywords'/>
{{keywords}}app.component.ts中
export class AppComponent {
public keywords:string;
}语句
循环语句
html页面
<!--循环数据，显示数据的索引-->
<ul>
<li *ngFor="let item of list;let key=index;">
{{key}}---{{item.ti}}
</li>
</ul>app.conponent.ts
export class AppComponent {
public list:any[]=[
{
"ti":"我是新闻1"
},
{
"ti":"我是新闻2"
},
{
"ti":"我是新闻3"
}
];
}结果：
IF条件判断语句
html页面
<!--条件判断语句-->
<div *ngIf="flag">
正确
</div>
<div *ngIf="!flag">
错误
</div>app.conponent.ts页面
export class AppComponent {
public flag:boolean=true;
}显示结果：
Switch条件判断
html页面
<!--条件判断语句 *ngSwitch-->
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
选择的是1
</p>
<p *ngSwitchCase="2">
选择的是2
</p>
<p *ngSwitchDefault>
除了1和2
</p>
</span>app.conponent.ts
export class AppComponent {
public orderStatus:number=1;
}输出结果：
ngClass和ngStyle属性
html页面
<!--属性[ngClass]、[ngStyle],动态改变样式，尽量不要用dom，就用前面的属性,ture才会显示-->
<div class="blue">
ngClass演示
</div>
<div [ngClass]="{'orange':false,'red':true}">
ngClass演示
</div>
<div [ngClass]="{'orange':flag,'red':!flag}">
ngClass演示
</div>
<p style="color:red">我是一个p标签</p>
<p [ngStyle]="{'color':'blue'}">我是一个p标签</p>
<!--有引号是字符串，没有引号是表达式-->
<p [ngStyle]="{'color':attr}">我是一个p标签</p>app.component.ts
export class AppComponent {
public attr:string='yellow';
}app.component.css
.red{
color:red;
}
.blue{
color:blue;
}
.orange{
color:orange;
}显示结果：
管道
- 每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。 获取数据可能简单到创建一个局部变量就行，也可能复杂到从 WebSocket 中获取数据流
- 管道把数据作为输入，然后转换它，给出期望的输出。 你要把组件的
birthday属性转换成对人类更友好的日期格式（人们喜欢看到的日期格式）。
常用的管道：
- 大小写转换
- 日期格式转换
- 小数位数
- 自定义管道等
事件
html页面
<!--事件-->
<button (click)="run()">执行事件</button>
<br>
<button (click)="getDate()">获得属性里面的值</button>
<br>
<button (click)="setDate()">获得属性里面的值，并改变</button>app.component.ts页面
export class AppComponent {
public title = '我是一个标题';
run(){
alert("这是一个自定义事件")
}
getDate(){
alert(this.title);
}
setDate(){
this.title="已改变了title"
alert(this.title)
}
}路由与导航
在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。
概览
浏览器具有熟悉的导航模式：
- 在地址栏输入 URL，浏览器就会导航到相应的页面。
- 在页面中点击链接，浏览器就会导航到一个新页面。
- 点击浏览器的前进和后退按钮，浏览器就会在你的浏览历史中向前或向后导航。
Angular 的 Router（即“路由器”）借鉴了这个模型。它把浏览器中的 URL 看做一个操作指南， 据此导航到一个由客户端生成的视图，并可以把参数传给支撑视图的相应组件，帮它决定具体该展现哪些内容。 你可以为页面中的链接绑定一个路由，这样，当用户点击链接时，就会导航到应用中相应的视图。 当用户点击按钮、从下拉框中选取，或响应来自任何地方的事件时，你也可以在代码控制下进行导航。 路由器还在浏览器的历史日志中记录下这些活动，这样浏览器的前进和后退按钮也能照常工作
错误：
在保存html页面时，也要保存在app.component.ts中的页面，因为在此页面声明的变量没有保存的话，会影响到html
