写点什么

1 分钟带你解锁 Angular

用户头像
Leo
关注
发布于: 2020 年 11 月 06 日
1分钟带你解锁Angular

前言:本文将带你快速了解Angular,如果你有这方面的需求的话;首先,这里假设你是一个现代前端开发者(接触过Vue或React),那么就比较好懂了。



快速开始

作为前端开发者的你,如果你想要快速上手angular你会关注什么?

也许你会问自己这些问题:

  • angular怎么跑起来?

  • 组件怎么写?

  • 组件之间如何通讯?



一般快速开始三步就好搭建本地开发环境和工作空间

# step one
npm install -g @angular/cli
# step two
ng new my-app
# step three
cd my-app
ng serve --open



拥抱代码·组件怎么写

首先先抛弃那些烦人的概念,用你的直觉去盘它,或者说是Vue和React的经验去试试Angular



模板语法

我们首先来看看大家最常见的 插值,条件分支,循环是怎么玩的

<!-- xxxx.html -->
<h3>Current customer: {{ currentCustomer }}</h3>
<ul *ngIf="customers.length">
<li *ngFor="let customer of customers" (click)='onClick($event)'>{{customer.name}}</li>
</ul>

看着好像跟Vue有些相似

  • v-if 变成了 *ngIf

  • v-for 变成了*ngFor

  • @click 变成了 (click)

  • 然后data绑定的数据和method里的方法变成了, 分别变成了class 的属性 和 方法,如下所示:

/** xxxx.component.ts **/
@xxx(...)
class XXX implements XXX {
currentCustomer: string = '' // 可以设置初始值
customers: XXX[] = []
onClick(e: KeyBoradEvent) {
console.log(e)
...
}
...
}



拥抱代码·组件怎么通信



我们再看看组件是怎么玩的吧

你可用angular-cli工具 快速创建 对应的组件 https://angular.cn/cli/generate#component

ng g component todo-input
  • 然后把组件写入html模板当中去

<!-- 这个是父组件的模板 todo-list.xxxx.html -->
...
<section class="container">
<!-- 这个就是我刚刚创建的组件 它的tag标签你猜猜为啥有app开头-->
<app-todo-input (addItem)="onAddItem($event)" [title]="ToDoList"></app-todo-input>
...
</section>
/** todo-input.component.ts 组件 **/
import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
@Component({
selector: 'app-todo-input', // 这里定义了上文的tag
templateUrl: './todo-input.component.html',
styleUrls: ['./todo-input.component.less']
})
export class TodoInputComponent implements OnInit {
@Output() addItem = new EventEmitter<string>() // @Output 传递方法给父组件, 然后名字对应模板中的(addItem), ="(onXXX)" 是父组件class内中的方法
@Input() title: string // @Input 接收父级传给子的数据
...
onChange(e: KeyboardEvent ...) {
...
this.addItem.emit(str) // 发送事件给父组件,是不是像极了this.$emit, 就是写起来有些累...
...
}



你以为angular就这么简单吗?哈哈,好戏才刚刚开始,不过你已经跟他打过照面了。

可能有小伙伴看这个这些语法有点蒙,也许你要先去了解下Typescript

然后就是es6里的装饰器



答疑·装饰器

熟悉ES6或Java的同学对这个其实并不陌生,class头上顶着的@xxx到底是个什么鬼?ECMAScript 6 入门·阮一峰

装饰器可以理解一个高阶函数,玩过React的同学应该都清楚HOC是啥,对就是那玩意

// mixins.js
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js
import { mixins } from './mixins'
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'

答疑·AngularJs和Angular

AngularJs和Angular到底是什么区别,你可以认为是javascript和java这样的关系,或者说雷锋和雷峰塔的关系,名字很像,写起来完全不同

  • AngularJS

  • Angular1.xx的版本

  • 用起来更像Vue

  • Angular

  • Angular2之后的版本

  • 一套完整的体系,从创建、开发、测试、部署等

你该了解下·基本概念

  • 架构概览

  • 模块【NgModules】:类似个容器,可以整合各种资源包括组件、服务、路由甚至是其他模块,有点像Java中package的概念

  • 组件【Component】:提高代码复用率

  • 模板、指令、数据绑定

  • 服务和依赖注入【Injectable】:可以解决数据共享的问题

  • 路由【BrowserModule】:页面跳转

你该了解下...

当然如果你想沿着Angular技术栈发展的话你该继续挖掘下去

  • 比如angluar的代码组织方式

  • 组件是怎么挂载上去的?是直接写到父组件的HTML模板中就可以了吗? 是要在哪里注册呢?

  • 模板语法中还有哪些东西可以深究,比如说:

  • 双向数据绑定是怎么玩的?

  • 插槽呢?高阶组件?如何更好的复用逻辑?

  • 模板里面的可以调用js的原生方法吗?如果不能,那为什么呢?然后angular是又是怎么处理这些事情的呢?

  • 动态组件怎么玩?

  • 异步记载如何实现?

  • 组件之前的通讯还有哪些方式能?

  • 服务和依赖注解解决什么问题?

  • RxJs是什么? 和 Flux、Redux、Vuex、一样吗?

  • 模块之间需要通信吗? 怎么通信呀?

  • HTTP请求是怎么玩的?

总结

希望你看到这里能够打开你的Angular大门,后面的道路依旧是属于你的;理论结合实践定会让你事半功倍!

其次我也总结了不少的学习经验。

正如之前文章里说的那样,学习新技术要正确的拥抱它。1 分钟教你如何整理 React 知识体系

然后最好通过已经的知识去触摸未知的领域,让它产生共振,贯穿你的认知

最后,当然学而时习之(多提好的问题,好的问题等于解决问题的一半;好的问题一般含有大量的信息,类似于导火线或者抓手的功效),实践过后再思考,如此反复

这样,你的“雪球”越滚越大,并渐入佳境!

发布于: 2020 年 11 月 06 日阅读数: 39
用户头像

Leo

关注

读书点亮生活, 2019.01.16 加入

Polo MI

评论

发布
暂无评论
1分钟带你解锁Angular