Angular 4 学习笔记1
文章目录
- 一张图说明Angular程序架构
- Angular开发环境搭建
- 项目文件夹和各部分关系
- 引入npm命令安装的外部模板
- 使用指令生成组件
- 启动项目指令
- 数据绑定
- 将css类绑定到html标签上
- 父组件向子组件传数据
- 使用Angular Route导航
- 根路由、子路由的配置
- 路由的在html文件中的使用
- 在TS文件中用代码导航
- 在路由时传递参数
- 在查询参数中传递数据
- 在.component.ts文件中接收该参数
- 在路由(url)路径中传递数据
- 在.component.ts文件中接收该参数
- 在路由配置中传递数据
- 路由对象中的```snapshop```（参数快照）与```subscribe```(参数订阅)
- 路由重定向
- 辅助路由
- 结语
一张图说明Angular程序架构
Angular开发环境搭建
1.安装nodeJs，安装完成后即可使用npm命令
2.全局安装Angular-cli
install -g @angular/cli
安装完成后可以使用ng -v指令查看安装成不成功
3.使用命令行创建项目
ng new aution // aution是要创建项目的项目名称
项目文件夹和各部分关系
引入npm命令安装的外部模板
当使用npm命令安装完模板后，在angular.json文件中引入，如下图中引入已经安装好的jquery和bootstrap
但此时仍然不能在.ts后缀的模板文件中使用jquery，因为jquery是js写的，TypeScript是不能直接使用，所以还需要安装jquery和boostrap的TS类型描述文件，使用以下指令
npm install @types/jquery
npm install @types/bootstrap
使用指令生成组件
ng g component product // 其中的product是要生成的组件名
启动项目指令
npm run start
数据绑定
将数据绑定在html属性中用[属性]="变量"的方式绑定，而在vue中用:属性=变量的方式，注意区分
/* .component.ts文件中 */
export class ProductComponent implements OnInit {private imgUrl = "http://placehold.it/320x150" // 声明一个私有变量constructor() { }ngOnInit() {}}/* .component.html文件中 */
<img [src]="imgUrl" alt="" srcset="" class="img"> //将imgUrl绑定到src属性中
将css类绑定到html标签上
/* 下面的span标签中，已经有了一个class，再将"bindClass"绑定到该标签上，
注意在前面加上“class.” */
/* flag是在.component.ts文件中声明的标志变量（boolean类型），
若flag为true，则绑定“bindClass” 在该标签上*/
<span class="default" [class.bindClass]="flag"></span>
父组件向子组件传数据
/* 父组件中的.component.ts中 */
export class FatherComponent implements OnInit {private fatherData:number = 15; // 父组件要传递给子组件的数据constructor() { }ngOnInit() {}
/* 父组件中的.html文件 */
<div>/* 将父组件中的数据“fatherData”传给子组件的变量“childrenData” */<children-component [fatherData]="childrenData"></children-component> //子组件占位符
<div>/* 子组件中的.component.ts中 */
export class ChildrenComponent implements OnInit {@Input() // 必须要有这个@Input()修饰器才能接收父组件的数据private childrenData:number = 0; // 默认为0，若父组件传递过来数组，则会相应改变constructor() { }ngOnInit() {}
使用Angular Route导航
各个路由对象与Angular各板块间的关系：
在app-routing.moudule.ts文件中配置组件的路由路径：
router的占位符（路由插座）
根路由、子路由的配置
在app-routing.module.ts文件中可以设置路由，这个文件就像vue项目中router文件夹下的index.js文件，作用都是配置路由。而在给文件的下面配置中，所有没有声明children属性的都是根路由，根路由的显示组件位置是文件app.component.html中的占位符位置（<router-outlet></router-outlet>），子路由显示组件的位置在该父路由组件中的html文件中的（<router-outlet></router-outlet>）
/* 引入组件 */
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';/* 设置路由 */
const routes: Routes = [{ path: '', component: HomeComponent }, // 没有children字段，是跟路由{ path: 'product', component: ProductComponent}, // 没有children字段，是跟路由{ // 这还是跟路由path:'/test', component: HomeComponent,children:[ { // 这里才是子路由path: '/childrenTest',component: ProductComponent}]}
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }路由的在html文件中的使用
使用routerLink属性将页面导航到所需组件
路由配置文件app-routing.module.ts根据上一段代码
/* 在app.component.html中 */
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">主页</a>
<router-outlet></router-outlet> /* 根路由中组件显示的位置 *//* 在home.component.html中 */
<router-outlet></router-outlet> /* 子路由组件显示的位置 */
在TS文件中用代码导航
1.先在.component.ts文件中的构造器constructor中声明路由对象
2.在需要导航的方法中调用路由对象的naigate方法
constructor(private router:Router) {}
routerFunction() {this.router.navigate(['/product']) // 导航到‘/product’路由模块
}
在路由时传递参数
在查询参数中传递数据
<a [routerLink]="['/product']" ['queryParams']="{id: 1}">主页</a>
/* 当点击该链接时就会传递一个id=1的参数到‘/product’ 页面，链接的url显示为"...(前缀)/product?id=1"*/
在.component.ts文件中接收该参数
1.先在构造器中初始化ActivatedRouter对象
2.在方法中使用ActivatedRouter对象的snapshop（参数快照）
private productId:number;
constructor(private routeInfo:ActivatedRouter){}
getRouterParams() {this.productId = this.routerInfo.snapshot.queryParams["id"]
}
在路由(url)路径中传递数据
1.在路由配置文件app-routing.module.ts中修改路由路径配置，让其可以接受参数
const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'product/:id', component: ProductComponent} // 修改配置使其可以接收参数
]
2.在组件路由路径中的数据，使其携带参数
<a [routerLink]="['/product', 1]">主页</a>
/* 传递了一个参数1过去，自动会将"product/:id" 中的id填充为1 */
/* url会变为“...(前缀)/product/1” */
在.component.ts文件中接收该参数
private productId:number;
constructor(private routeInfo:ActivatedRouter){}
getRouterParams() {this.productId = this.routerInfo.snapshot.params["id"] // 与上一种传参方式的取参方法区别只是将“queryParams”改为“params”/* 页面的url显示为"...(前缀)/product/1"*/
}
在路由配置中传递数据
路由对象中的snapshop（参数快照）与subscribe(参数订阅)
当在不同的链接给同一个组件传递不同的参数，而且该参数都是在组件中的ngOnInit()方法中取用时，因为在组件初始化时，ngOnInit()方法只会调用一次(假设该组件与链接在同一个页面展示)，这会导致后一次点击链接到该组件的链接中传递的参数取不到。例如：
/* 在a.html页面中，链接到product组件，传递参数1过去 */
<a [routerLink]="['/product', 1]">第一次点击</a>
/* 在b.html页面中，链接到product组件，传递参数2过去 */
<a [routerLink]="['/product', 2]">第二次点击</a>
在product组件中的product.component.ts文件中
private productId:number;
constructor(private routeInfo:ActivatedRouter){}
ngOnInit() {this.productId = this.routerInfo.snapshot.params["id"] /* 页面的url显示为"...(前缀)/product/1" */
}
当点击上面链接中的“第一次点击”时，组件product被初始化，ngOnInit()方法被调用一次，productId被赋值为1，此时的页面url为...(前缀)/product/1,当再点击“第二次点击”时，组件已经被初始化，不会再调用ngOnInit()方法,所以productId仍旧是1，但页面的url变为...(前缀)/product/2
解决办法：使用参数订阅subscribe
ngOnInit() {this.routeInfo.params.subscribe((params: Params) => this.productId = params["id"])/* 页面的url显示为"...(前缀)/product/1" *//* Params类在router包中，注意使用 import { Params } from '@angular/router' 引入*/
}
路由重定向
路由重定向情景：
在路由的配置中没有配置浏览器输入的URL时，将链接地址改为已配置好的路由链接中，如：
const routes: Routes = [{path: 'home', component: Home}{path："product/:id", componnent: ProductComponent}
]
当希望用户在地址栏输入地址，如localhost时，希望导航到项目的home页面。因为没有配置path为空的路由（{path: '', component: Home}）,项目会识别为页面不存在，此时就要使用重定向
const routes: Routes = [{path: '', redirectTo: '/home', pathMatch: 'full'}, // 当路由为空时，重定向到“/home”路由{path: 'home', component: Home},{path："product/:id", componnent: ProductComponent}
]
辅助路由
使用情景：当主路由的插座（<router-outlet></router-outlet>）被占用时，还希望多一个插座被其他组件使用，而且不管主路由的插座是否被占用，辅助路由都可以使用
<router-outlet name="aux"></router-outlet> // 辅助路由的插座
const routes: Routes = [{ path: 'chat', component: ChatComponent, outlet: 'aux' }, // outlet字段说明使用的是辅助路由的插座
]
使用辅助插座的链接书写方式
<a [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a> /* 点击则会连接到辅助插座中的‘chat’路由 */<a [routerLink]="[{outlets: {aux: null }}]" class="left">结束聊天</a> /* 点击则会辅助插座中的‘null’路由 */
结语
为避免过长，学习笔记1结束，感谢 up主 梅花清幽独立春寒 在哔哩哔哩提供的学习视频
Angular 4 学习笔记1相关推荐
- Angular入门学习笔记
Angualr入门扫盲必备 声明:这篇是我学习angualr的笔记,可以转载,但必须注明来源作者 kone 并附上本文链接 A:环境,工具 1:先确保安装了nodejs和npm Nodejs npm ...
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明 运行ng -v @ ...
- 为什么选择angular？-学习笔记
使用angular的原因: Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中. 它有一下的特性: 良好的应用程序结构: 双向数据绑定: 指令: HTML模版: 可嵌入,注入 ...
- 3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器 在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
- 4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令 注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
- Angular Universal 学习笔记
如果配置得当,我们可以将所有的内容都在服务器端渲染,避免在浏览器端再次调用 API. 首先命令行安装 Angular Universal: ng add @nguniversal/express-en ...
- Angular library 学习笔记
原文 Use cases for Angular libraries Angular 库有 2 个常见用例: 构建可重用的组件库以在应用程序之间共享. 构建共享服务层功能 - 例如. 用于处理外部数据 ...
- Angular Schematics 学习笔记
网址:https://angular.io/guide/schematics A schematic is a template-based code generator that supports ...
- Angular Universal 学习笔记 - 客户端渲染和服务器端渲染的区别
https://github.com/angular/universal Universal 的命名由来: We believe that using the word "universal ...
最新文章
- oracle dbms lob,如何使用DBMS_LOB从文件中加载CLOB数据
- mysql一张表两个索引字段是建两颗独立索引树吗？
- 16薪，六险一金，深尚科技招聘视觉/图像算法工程师 ，包含社招和校招
- 一文搞懂浏览器同源策略
- Banner字符可以通过类似以下网站生成
- Python基于Django在线音乐播放网站设计
- php配置 验证码无法显示,PHP验证码无法显示的原因及解决办法
- CSP-201609-3-炉石传说
- Python turtle库的应用实例——画大白（情人节表白神器）
- 杰里之AD140录音编码接口【篇】
- 字符串算法：从入门到劝退
- html地球转动效果,使用纯 CSS3 动画实现地球转动
- ts数据包33位pts
- 三个最好的免费短信发送服务
- 两种方法 Find inorder succ of BST
- PySide2中使用QLabel的setPixmap方法显示图片，部分图片无法显示
- 计算机专业的教学内容落后实例,中职《Flash动画制作》课程教学改革
- 声纹验证和声纹识别中的AS-norm、Z-norm、T-norm、ZT-norm、 S-norm操作
- Java蘑菇钉云签到管理系统源码
- python信号处理教程_python玩转信号处理与机器学习入门