最近利用空余时间研究学习了前端“三剑客”之 —— Angular。Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力(好官方~~~)。好了,接下来结合自己做 DEMO 的过程来说说。
github >> https://github.com/Hancoson/ng-zhihuDaily Star Star Star ~~
开始
- 脚手架:本 demo 是使用 Angular CLI 工具来构建的,不熟悉的同学可以去官网看看。
- 技术栈:
运行
安装
全局安装 Angular CLI
1 | npm install -g @angular/cli |
新建项目
1 | ng new {my-app} |
启动
1 | cd my-app |
或者你可直接克隆本实例
1 | git clone https://github.com/Hancoson/ng-zhihuDaily.git |
Angular CLI 使用
添加功能
1 | ng g cl my-new-class #新建 class |
说明:
- g - generate
- cl - class
- c - component
- d - directive
- e - enum
- m - module
- p - pipe
- s - service
备注
不生成单元测试文件
1 | --spec=falses |
设置默认样式
希望自己的项目使用 Scss 或者 Less 的时候怎么办呢?看看下面:
新建项目:
1 | ng new {project-name} --style=scss |
在已有项目中设置:
手动修改angular.json
文件,添加如下内容即可:
1 | "schematics": { |
结构
1 | ├── README.md |
主要技术点
模块
Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它 NgModule 使用。
NgModule 是一个带有 @NgModule 装饰器的类。@NgModule 装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。其中最重要的属性如下。
- declarations(可声明对象表) —— 那些属于本 NgModule 的组件、指令、管道。
- exports(导出表) —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
- imports(导入表) —— 那些导出了本模块中的组件模板所需的类的其它模块。
- providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供商,这通常是首选方式。)
- bootstrap —— 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。
1 | import { NgModule } from '@angular/core'; |
组件
组件控制屏幕上被称为视图的一小片区域。
1 | import { Component, OnInit } from '@angular/core'; |
- selector:是一个 CSS 选择器,它会告诉 Angular,一旦在模板 HTML 中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。
- templateUrl:该组件的 HTML 模板文件相对于这个组件文件的地址。
- providers:是当前组件所需的依赖注入提供商的一个数组。
- styleUrls:组件所需的样式资源。
路由
路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图。
1 | import { Routes, RouterModule } from '@angular/router'; |
典型的 Angular 路由(Route)有两个属性:
- path:一个用于匹配浏览器地址栏中 URL 的字符串。
- component:当导航到此路由时,路由器应该创建哪个组件。
RouterModule.forRoot()
:初始化路由器,并让它开始监听浏览器中的地址变化
管道
切割字符串
新建管道文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25import { Pipe, PipeTransform } from '@angular/core'
({
name: 'SliceStr'
})
export class SliceStrPipe implements PipeTransform {
// start和end及extraStr后面都跟随了一个问好,代表这个为可选参数而不是必选的
// 功能就是给出截图的启示,然后是否拼接你自定义的字符串(...)等
transform(value: string, start?: number, end?: number, extraStr?: string): string {
if (value) {
if (typeof (start) === 'number' && typeof (end) === 'number') {
if (value.length > end && extraStr && typeof (extraStr) === 'string') {
return value.slice(start, end) + extraStr.toString();
} else {
return value.slice(start, end);
}
} else {
return value;
}
} else {
return value;
}
}
}引入
1
2
3
4
5
6
7
8import { SliceStrPipe } from '../pipe/slicestr.pipe'
// ...
({
declarations: [
SliceStrPipe
],
// ...
})使用
1
<p class="title">{{item.title|SliceStr: 0:20:'...'}}</p>
相关项目参考
参考资料: