目录
目录结构
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