最近利用空余时间研究学习了前端 "三剑客" 之 -- Angular.Angular 是一个开发平台. 它能帮你更轻松的构建 web 应用. Angular 集声明式模板, 依赖注入, 端到端工具和一些最佳实践于一身, 为你解决开发方面的各种挑战. Angular 为开发者提升构建 Web, 手机或桌面应用的能力(好官方~~~). 好了, 接下来结合自己做 DEMO 的过程来说说.
github>> https://github.com/Hancoson/ng-zhihuDaily Star Star Star ~~
开始
脚手架: 本 demo 是使用 Angular CLI https://cli.angular.io/ 工具来构建的, 不熟悉的同学可以去官网看看.
技术栈:
Angular 6 https://angular.io , 中文版 https://angular.cn/
https://element-angular.faas.ele.me/guide/install
运行
安装
全局安装 Angular CLI
npm install -g @angular/cli
新建项目
ng new {my-app}
启动
- cd my-app
- ng serve --open
或者你可直接克隆本实例
- git clone https://github.com/Hancoson/ng-zhihuDaily.git
- # 1
- npm i
- # 2
- npm start
Angular CLI 使用
添加功能
- ng g cl my-new-class #新建 class
- ng g c my-new-component #新建组件
- ng g d my-new-directive #新建指令
- ng g e my-new-enum #新建枚举
- ng g m my-new-module #新建模块
- ng g p my-new-pipe #新建管道
- ng g s my-new-service #新建服务
- ng g m route --routing #新建 route
说明:
- g - generate
- cl - class
- c - component
- d - directive
- e - enum
- m - module
- p - pipe
- s - service
备注
不生成单元测试文件
--spec=falses
设置默认样式
希望自己的项目使用 SCSS 或者 Less 的时候怎么办呢? 看看下面:
新建项目:
ng new {project-name} --style=scss
在已有项目中设置:
手动修改 angular.json 文件, 添加如下内容即可:
- "schematics": {
- "@schematics/angular:component": {
- "styleext": "scss"
- }
- },
结构
- README.md
- angular.json # Angular CLI 的配置文件.
- dist # 构建目录
- e2e # 在 e2e/ 下是端到端 (end-to-end) 测试
- node_modules # 依赖
- package.json
- src
- app
- app.component.css #根组件样式
- app.component.html #根组件模版
- app.component.spec.ts #根组件单元测试
- app.component.ts # 根组件
- app.module.ts # 定义 AppModule, 根模块为 Angular 描述如何组装应用
- components # 组件集
- home
- home.component.html # 组件模版
- home.component.scss # 组件样式
- home.component.spec.ts # 组件单元测试
- home.component.ts # 组件逻辑
- constants # 项目静态配置
- route # 路由
- assets # 静态资源
- browserslist # 一个配置文件, 用来在不同的前端工具之间共享目标浏览器
- environments # 各环境配置文件
- index.html # 主页面的 HTML 文件
- karma.conf.js # 给 Karma 的单元测试配置
- main.ts # 应用的主要入口点
- pipe # 管道 / 过滤器
- polyfills.ts # 低版本浏览器支持配置
- styles.scss # 这里是你的全局样式
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- tslint.json # 额外的 Linting 配置
- utils # 工具函数
- tsconfig.json # TypeScript 编译器的配置
- tslint.json # 给 TSLint 和 Codelyzer 用的配置信息
主要技术点
模块
Angular 应用是模块化的, 它拥有自己的模块化系统, 称作 NgModule. 一个 NgModule 就是一个容器, 用于存放一些内聚的代码块, 这些代码块专注于某个应用领域, 某个工作流或一组紧密相关的功能. 它可以包含一些组件, 服务提供商或其它代码文件, 其作用域由包含它们的 NgModule 定义. 它还可以导入一些由其它模块中导出的功能, 并导出一些指定的功能供其它 NgModule 使用.
NgModule 是一个带有 @NgModule https://github.com/NgModule 装饰器的类.@NgModule https://github.com/NgModule 装饰器是一个函数, 它接受一个元数据对象, 该对象的属性用来描述这个模块. 其中最重要的属性如下.
declarations(可声明对象表) -- 那些属于本 NgModule 的组件, 指令, 管道.
exports(导出表) -- 那些能在其它模块的组件模板中使用的可声明对象的子集.
imports(导入表) -- 那些导出了本模块中的组件模板所需的类的其它模块.
providers -- 本模块向全局服务中贡献的那些服务的创建器. 这些服务能被本应用中的任何部分使用.(你也可以在组件级别指定服务提供商, 这通常是首选方式.)
bootstrap -- 应用的主视图, 称为根组件. 它是应用中所有其它视图的宿主. 只有根模块才应该设置这个 bootstrap 属性.
- import { NgModule } from '@angular/core';
- import { BrowserModule } from '@angular/platform-browser';
- @NgModule({
- imports: [ BrowserModule ],
- providers: [ Logger ],
- declarations: [ AppComponent ],
- exports: [ AppComponent ],
- bootstrap: [ AppComponent ]
- })
- export class AppModule { }
组件
组件控制屏幕上被称为视图的一小片区域.
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-home',
- templateUrl: './home.component.html',
- styleUrls: ['./home.component.scss']
- })
- export class HomeComponent implements OnInit {
- /*
- ......
- */
- }
selector: 是一个 CSS 选择器, 它会告诉 Angular, 一旦在模板 HTML 中找到了这个选择器对应的标签, 就创建并插入该组件的一个实例.
templateUrl: 该组件的 HTML 模板文件相对于这个组件文件的地址.
providers: 是当前组件所需的依赖注入提供商的一个数组.
styleUrls: 组件所需的样式资源.
路由
路由定义 会告诉路由器, 当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时, 要显示哪个视图.
- import { Routes, RouterModule } from '@angular/router';
- import { HomeComponent } from './../components/home/home.component';
- const myRoute: Routes = [
- { path: '', component: HomeComponent }
- ];
- export const appRoutes = RouterModule.forRoot(
- myRoute,
- { enableTracing: true }
- )
典型的 Angular 路由 (Route) 有两个属性:
path: 一个用于匹配浏览器地址栏中 URL 的字符串.
component: 当导航到此路由时, 路由器应该创建哪个组件.
RouterModule.forRoot()
: 初始化路由器, 并让它开始监听浏览器中的地址变化
管道
切割字符串
新建管道文件
- import { Pipe, PipeTransform } from '@angular/core'
- @Pipe({
- 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;
- }
- }
- }
引入
- import { SliceStrPipe } from '../pipe/slicestr.pipe'
- // ...
- @NgModule({
- declarations: [
- SliceStrPipe
- ],
- // ...
- })
使用
<p class="title">{{item.title|SliceStr: 0:20:'...'}}</p>
相关项目参考
- React-redux(知乎日报) https://github.com/Hancoson/react-redux-demo
- React-mobx(知乎日报) https://github.com/Hancoson/react-mobx-demo
- vue(知乎日报) https://github.com/Hancoson/vue-app
小程序(知乎日报) https://github.com/Hancoson/wechat-app-zhihudaily
参考资料:
- https://angular.io/
- https://cli.angular.io/
来源: https://juejin.im/entry/5b4723a1f265da0f46269df2