Viết library cho angular2
angular 2
7
TypeScript
8
White

noname viết ngày 25/03/2016

Dạo này đang ngồi nghịch thằng Angular2, thấy có khá nhiều cái hay, 1 trong số đó là có thể dùng Typescripts để code thay cho js, mặc dù khì chạy thì nó cũng build ra file js mà thôi. Nhưng nó tiết kiệm thời gian code khá nhiều, và nhìn code cũng đẹp, dễ hiểu hơn.
Nhân tiện đây mình cũng viết 1 bài về cách viết lib và publish cho angular2 dùng Typescript. Bời vì bản chính thức đến giữa tháng 5 mới ra mắt, nên chưa có nhiều lib cho nó, nên mình sẽ có nhiều cái để viết và publish lên git.
Ví dụ 1 cái mình viết ở đây :D : https://github.com/dieuhd/angular2-active-record/

Cấu trúc folder

- name_file_lib.ts #có thể đặt trong thư mục `lib`
- package.json
- .gitignore #không có cũng được
- .npmignore # ko bắt buộc
- tsconfig.json
- README.md 

Đầu tiên mình sẽ giải thích file package.json

{
  "name": "tên library ví dụ angular2-highlight",
  "version": "version hiện tại",
  "description": "Mô tả",
  "repository": {
    "type": "git",
    "url": "đường dẫn git của library này"
  },
  "scripts": { # default dùng thế này
    "dev": "tsc --watch",
    "build": "rm -rf lib && tsc -p src",
    "prepublish": "tsc"
  },
  "keywords": [
    # những keyword mà bạn kỳ vọng khi search sẽ ra lib của bạn
  ],
  "author": "tên user trên git",
  "license": "MIT",
  "main": "đường dẫn tời file của lib của bạn", # chú ý đây là file js nhé, mặc dù viết bằng `ts` nhưng khi build nó sẽ sinh ra 1 file `js`
  "typings": "đường dẫn file ts sinh ra khi build(có ext là `.d.ts`)",
  "homepage": "your homepage",
  "dependencies": { # các lib mình dùng để phục vụ cho việc viết library
    "angular2": ">=2.0.0-beta.9",
    "zone.js": "^0.5.15",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.33.13",
    "rxjs": "5.0.0-beta.2",
    "reflect-metadata": "0.1.2",
    "typings": "^0.6.8"
  },
  "devDependencies": {
    "systemjs": "~0.19.6",
    "typescript": "^1.8.7"
  }
}

Tiếp theo file tsconfig.json

{
   "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5", #cái mà mình muốn build ra theo chuẩn nào ES5,ES6
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
       "outDir": "./src", # mặc định là thư mục hiện tại của file lib bạn viết
        "declaration": true
    }
}

Bây giờ chúng ta sẽ đi bắt đầu viết library sau khi đã config xong. Ví dụ chúng ta viết 1 library dùng để highlight text chẳng hạn. Xem ngay trên trang docs của angular2 có cái này rồi: https://angular.io/docs/ts/latest/guide/attribute-directives.html

import {Directive, ElementRef, Input} from 'angular2/core';
@Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }
  onMouseEnter() { this._highlight("yellow"); }
  onMouseLeave() { this._highlight(null); }
  private _highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Ok bây giờ chúng ta sẽ đưa nó lên trang npmjs.com, tất nhiên trước đó phải đưa project lên github trước. :D
Nếu chưa có account trên trang npmjs.com thì hãy đăng ký 1 account nhé.
Tiếp theo vào command line, ở project library: add account vừa đăng ký

npm adduser

Trước khi publsh thì cài hoặc update lại các lib mình dùng cho project

npm install 
npm update

Cuối cùng là publish nó thôi

npm publish

Bây giờ chúng ta sẽ test xem nó có chạy được chưa.
Tạo 1 project angular2
Cài đặt library mình vừa viết:

npm install angular2-highlight # tên library mình đã đặt

Trong file component nào đó:

import {Component} from 'angular2/core';
import {HighlightDirective} from 'angular2-highlight';
@Component({
  selector: 'my-app',
  templateUrl: '<p [myHighlight]="color">Highlight me!</p>',
  directives: [HighlightDirective]
})
export class AppComponent { }

Kiếm tra đã chạy hay chưa, nếu chưa thì hãy kiếm tra các bước trước đó nhé.
Hoặc sửa lại file config như sau nhé:

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },
  baseURL: '/',
  packages: {        
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
  map: {
      "angular2-highlight": "node_modules/angular2-highlight/angular2-highlight.js"
  },
});

Hi vọng sẽ có nhiều library do anh em kipalog viết :D

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

noname

5 bài viết.
65 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
48 8
Có khi nào bạn muốn thay đổi 1 phần giao diện của website nào đó chưa ? Ví dụ bây giờ ko thích click vào "Xem tiếp" của Kipalog nữa. Mà thay vào đ...
noname viết gần 3 năm trước
48 8
White
25 6
(Link) mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm ...
noname viết gần 3 năm trước
25 6
White
20 6
Ở các bài trước mình đã giới thiệu cách viết 1 extension cho chrome như thế nào rồi, và cũng đã hướng dẫn làm extension phân trang cho Kipalog rồi....
noname viết hơn 2 năm trước
20 6
Bài viết liên quan
White
0 0
Thực Hành Content Projection, Lifecycle Liên Quan và QueryList Changes Event Trong Angular Bài viết này là bài tiếp theo trong series "Thử Nghiệm ...
Tiep Phan viết hơn 1 năm trước
0 0
White
19 6
Giới thiệu series học Lập trình Angular (Angular 2) Xin chào các bạn, trong thời gian vừa qua cộng đồng Javascript lại đón nhận một đứa con mới đến...
Tiep Phan viết hơn 1 năm trước
19 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
65 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!