资讯专栏INFORMATION COLUMN

AngularJS 2 Quick Start

Channe / 1336人阅读

摘要:引言是用于构建基于浏览器的复杂应用的下一代框架。它涵盖了的一些基本概念,包括组件模型服务管道传入传出以及事件播散等使用方法,并介绍了项目的基本组织结构等。用于双向绑定,使用来定义,专门用于定义双向绑定。

引言

Angular2 是 Google 用于构建基于浏览器的复杂应用的下一代 MV* 框架。该项目是我学习 Angular2 的入门项目,我觉得它很友好地表达了 Angular2 的有趣实现方式,并更易于了解和入门。它涵盖了 Angular2 的一些基本概念,包括:组件(Component)、模型(Model)、服务(Service)、管道(Pipe)、传入传出(Input / Output)以及事件播散(EventEmitter)等使用方法,并介绍了项目的基本组织结构等。

Anguar2 可使用 ES6 或 TypeScript 来编写,我在这里使用了 TypeScript。

若您对本文感兴趣,也非常欢迎来我的 GitHub 主页阅读,同时也是本文的项目代码地址(https://github.com/DotHide/angular2-quickstart)

以下罗列的是该项目中的几个重要概念:

1 Component

在 Angular2 中,Component 是我们在页面中构建自定义元素和业务逻辑的主要方式。在 Angular1 中,我们则是通过 directives,controllers 以及 scope 来实现,而现在所有的这一切都结合到了 Component 中。Component 中需要定义 selector 和 templete,即组件生效的标记和对应的 HTML 模板

// Component 是 Angular2 提供的组件,使用前需要先 import
import {Component} from "angular2/core";

@Component({
  selector: "todo-input",
  template: `
  
` })

其中 templete 使用到了多行模板的用法,即使用`作为模板开始结束标记

定义组件后需要定义相匹配的类:

export class TodoInput {
  
}

类名使用 UpperCamelCase,如:TodoInput,文件名及 selector 使用 DashCase,如:todo-input(.ts)

任何 Component 在使用前需要 import,如果是组件中的组件需要在 @Component 中定义 directives,如:

@Component({
  selector: "todo-app",
  directives: [TodoInput],
  templete: "..."
})
2 Model

模型比较简单,通知只需要定义好构造函数及相关方法即可:

export class TodoModel{
  constructor(
     public title:string = "",
     public status:string = "started"
  ){}

  toggle():void{
     this.status = this.status == 
       "completed"? "started": "completed";
  }
}

这里构造函数的参数定义了 public,这样可以被其他类访问到

3 Service

服务通常需要声明 @Injectable(),一般服务也会 import 模型类

import {Injectable} from "angular2/core";
import {TodoModel} from "../models/todo-model";

@Injectable()
export class TodoService {
  todos:TodoModel[] = [
    new TodoModel("arm"),
    new TodoModel("battle"),
    new TodoModel("code", "completed"),
    new TodoModel("eat"),
    new TodoModel("fly"),
    new TodoModel("sleep", "completed")
  ];

  addTodoItem(item:TodoModel) {
    ...
  }

  toggleTodo(todo: TodoModel) {
    ...
  }
}

声明了 Injectable 之后,需要在入口函数中 inject 相关服务

bootstrap(TodoApp, [TodoService]);
4 ngFor

即 Angular 1 中的 ng-repeat,这里用法有些差异,如:

  • {{ todo }}

使用 ngFor 时需要在前加 号( 号表示该动作将引起模板的变化),循环中的个体元素引用前需要添加 # 号,这些都是语法上的变化。

5 ngModel

ngModel 用于双向绑定,使用 [(ngModel)]= 来定义,[()] 专门用于定义双向绑定。

@Component({
  selector: "todo-input",
  template: `
  
` }) export class TodoInput { todoItem:TodoModel = new TodoModel(); constructor() {} }

使用 ngModel 前需要在 class 中定义变量,变量可以是任何类型。

6 Pipe

利用 Pipe 来筛选(filter)数据,与 Angualr1 十分类似,这里还是使用 | 符号来定义筛选,如:

// todo-list.ts
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `
` }) // search-pipe.ts ... @Pipe({ name: "search" }) export class SearchPipe { transform(items) { // 定义转换逻辑,用于结果输出,这里是筛选出以 s 字符开头的项目 return value.filter((item) => { return item.title.startsWith("s"); }); } }

使用 Pipe 时需要先在 Component 中定义 pipes 属性,然后在 html 中使用 Pipe 的 name。

当然,这里的 Pipe 还可以传递参数,仍然以上面的为例,可以传参设定 search 的内容,如:

// search-pipe.ts
...
@Pipe({
  name: "search"
})

export class SearchPipe {
  // 增加 term 参数
  transform(items, [term]) {
    // 定义转换逻辑,用于结果输出,这里是筛选出以 s 字符开头的项目
    return value.filter((item) => {
      return item.title.startsWith(term);
    });
  }
}

这里分两步修改,首先修改 SearchPipe 类中的方法,增加 term 参数,然后再修改使用处的代码

// todo-list.ts
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `
` })

这里我们先看到 search 进行了赋值,我们进一步把这个赋值变为一个输入项(@Input),这也是 Angular2 中特殊用法:

// todo-list.ts
import {Component, Input} from "angular2/core";
...
@Component({
  selector: "todo-list",
  pipes: [SearchPipe],
  directives: [TodoItemRender],
  template: `
` }) export class TodoList { @Input() term; // 定义该项是从外部输入的 constructor(public todoService: TodoService) { } }

由此,需要在使用 TodoList 组件的地方(即外部),定义相关的属性。


...

这里表示从搜索框输入过来的值(前一个 term),被赋值到了 todo-list 的 [term] 属性中,并传递到 TodoList 类的输入项中去

7 EventEmitter

事件散播,又一个 Angular2 的新特性,用于将组件内部的事件向上散播,如:

@Component({
  selector: "todo-item-render",
  template: `
  
  {{ todo.title }}
  
  `
})
export class TodoItemRender {
  @Input() todo;
  @Output() toggle = new EventEmitter();
}

这里的 toggle 是 EventEmitter 对象,被声明为 Output 后,可以将按钮的 click 事件向上散播成为 todo-list 中该组件的 toggle 事件,其中的 $event 就是 TodoItemRender 类中声明的 todo(此 todo 又是来自外部输入),而后再触发 toggle 事件对应的业务逻辑。

启动

请按以下步骤打开项目:

# 安装 TypeScript
$ npm install -g tsd typescript

# 安装项目依赖
$ npm install

# 启动项目
$ npm start
花絮

琢磨调用第三方库花了些时间,这里也记录一下。以添加 lodash 库为例,需要经过如下5个步骤:

Step 1

$ npm install lodash --save

安装后到 package.json 文件中查看,如有 loash 再进入下一步

Step 2

$ tsd install lodash

如果没有 tsd 命令行工具,则先安装 $ npm install -g tsd

Step 3

index.html 文件中引用:

Step 4

System.config() 中添加 path

System.config({
  paths: {
    lodash: "./node_modules/lodash/lodash.js"
  }
});
Step 5

在需要使用的地方 import

import * as _ from "lodash";

...

function (){
   _.sum([4, 2, 8, 6]); // → 20
}
参考链接

Angular 2 5mins Quickstart

Angular 2 Fundaments

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78792.html

相关文章

  • [LintCode] Sort Integers II [Merge-sort, Quick-sor

    Problem Given an integer array, sort it in ascending order. Use quick sort, merge sort, heap sort or any O(nlogn) algorithm. Example Given [3, 2, 1, 4, 5], return [1, 2, 3, 4, 5]. Note 考察对Heap Sort, Q...

    YorkChen 评论0 收藏0
  • Quick Sort 与 Quick Selection 衍生

    摘要:理解最关键的是结束后各个指针的状态,以及下一步递归的起止点。上面的模板在结束时是的状态,但是不确定中间还有没有一个数,如下图今天在图书馆写码没有带板子,就先照个图了注意里是里一定要注意这个灵活多变照这个思路的相关题 首先是记录一个quick sort的模板(思想是遇到不符合顺序的就交换,很好理解):public void quickSort(int[] nums, int start,...

    Neilyo 评论0 收藏0
  • Electron入门介绍

    摘要:本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中,全部替换为即可。命令根据它,自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么 可以认为Electron是一种运行环境库,我们可以基于此,用HTML、JS和CSS写桌面应用。PC端的UI交互,主要有web应用和桌面应用。具体采用哪种方式,主要看系统的应用场景,哪个更合适...

    wing324 评论0 收藏0
  • 常见排序算法及其实现(Binary,Insert、Select、Quick、Bubble.etc.S

    摘要:常见排序算法及其实现说明如果有幸能看到本文中的代码是参考编程思想某培训机构。若两个记录和的关键字相等,但排序后的先后次序保持不变,则称为这种排序算法是稳定的。 常见排序算法及其实现 说明 如果有幸能看到 1、本文中的代码是参考《Java编程思想》、某培训机构。 2、文中的代码放Github了,有兴趣的可以看看,点个star鼓励下我。 3、代码在Sublime中敲的,坑爹的GBK,注释...

    187J3X1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<