AngularJS tổ chức dựa trên model-view-controller trong khi Angular 2 và Angular 4 thì tổ chức dựa trên các component.
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
Angular 4 sử dụng Typescript 2.2, Angular 2 thì sử dụng Typescript 1.8. Điều này làm Angular 4 cải thiện được performance nhiều hơn Angular 2.
Để tạo được project Angular 4, ta cần chạy một vài câu lệnh với Angular CLI. Nếu bạn chưa cài Angular CLI, bạn có thể quay lại bài trước: Cài đặt môi trường cho Angular 4 để cài đặt nhé.
1. Tạo project
Để tạo câu project Angular ta chạy câu lệnh ng new
Bài viết này được đăng tại [free tuts .net]
Như ví dụ ở hình dưới, ta tạo 1 app tên là smart-note. Vì thế, câu lệnh tạo project sẽ là
SmartNote 0
SmartNote 1
Đợi vài phút, quá trình khởi tạo diễn ra, bạn sẽ nhận được kết quả là thư mục smart-note. Trong này có một số thư mục và file:
- e2e [end to end]: thư mục sử dụng để test.
- node_modules: các package được cài đặt sử dụng trong project
- src: code của project sẽ nằm ở đây. Phần dưới chúng ta sẽ tìm hiểu sâu hơn về thư mục này.
- .editorconfig: file chứa cài đặt cho editor
- angular.json: chứa các thông tin của project.
- .gitignore: file chứa danh sách các file, folder không nằm trong danh mục commit. Bạn có thể tìm hiểu thêm về gitignore tại đây [//git-scm.com/docs/gitignore]
- karma.conf.js - file chứa các thông tin yêu cầu của project sử dụng cho unit testing.
- package.json: file chứa thông tin các thư viện sử dụng trong project
Cho đến thời điểm hiện tại, project của bạn sẽ có một số package như sau:
Các package hiện tại trong file package.json
"@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0",
- tsconfig.json: chứa các quy tắc phụ khi project được dịch như dịch vào đâu [outDir], đường dẫn cơ bản là gì [baseUrl], phiên bản đích [target] là gì, vân vân và mây mây ...
- .tslint.json [TypeScript lint]:
SmartNote 2là công cụ phân tích source code để đánh dấu các lỗi, bạn có thể đọc thêm về lint ở đây.
SmartNote 3 là TypeScript lint - công cụ phân tích source code để đánh dấu lỗi cho typescript
2. Chạy project
Để chạy project, bạn mở command prompt bên trong project gõ
SmartNote 4
Quá trình biên dịch diễn ra. Bạn đợi màn hình command line báo ứng dụng được biên dịch và chạy thành công.
Lúc này bạn không tắt màn hình command line mà gõ:
SmartNote 5 lên trình duyệt sẽ nhận được kết quả như hình dưới.
Giải thích:
- Khi bạn chạy lệnh
SmartNote 4, hệ thống sẽ biên dịch code ứng dụng của bạn [biên dịch từ TypeScript về Javascript] đồng thời tạo 1 server ở cổng 4200 [cổng mặc định]
- Để chạy ứng dụng ở 1 cổng tùy chọn, bạn thêm tham số
SmartNote 7 vào sau
SmartNote 4. Ví dụ chạy ứng dụng ở cổng 3006, bạn chạy lệnh
SmartNote 9
3. Cấu trúc thư mục src
Thư mục src chứa mã nguồn của ứng dụng và các cài đặt liên quan. Cấu trúc thư mục bao gồm:
- app: thư mục chứa module chính của ứng dụng. Chúng ta sẽ tìm hiểu chi tiết về thư mục này trong bài sau.
- assets: thư mục chứa các file tài nguyên như css, js, hình ảnh
- environment: thư mục chứa các file cài đặt môi trường.
- fav.ico: file icon, hiển thị biểu tượng [logo] của website trên thanh tiêu đề của trình duyệt.
- index.html: file chính của chương trình.
Cùng nhìn sơ qua vào nội dung file index.html này:
index.html
SmartNote
Bên trong thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 0 có chứa thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 1. Đây là selector được khai báo trong file app.component.ts, sử dụng để hiển thị dữ liệu từ file app.component.html. Bạn có thể hiểu đơn giản: ta định nghĩa thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 2 "đại diện" cho file app.component.html. Như vậy thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 2 đặt ở đâu thì nội dung html của file mà thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 2 này "đại diện" sẽ hiển thị ở đó.
- main.ts: là file đầu tiên được chạy khi ứng dụng của bạn chạy. Trong này import các module cần thiết cho project. Bạn có thể thấy
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 5,
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 6,
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 7 và
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 8 được import mặc định khi ta tạo project bằng Angular CLI
main.ts
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]];
Khi dòng lệnh
platformBrowserDynamic[].bootstrapModule[AppModule]
được thực thi sẽ gọi đến
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 9.
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 9 được khai báo trong file app.module. Trong file app.module có sử dụng
platformBrowserDynamic[].bootstrapModule[AppModule]1 trong file app.component. Trong app.component lại khai báo selector
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 2. Thẻ
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if [environment.production] { enableProdMode[]; } platformBrowserDynamic[].bootstrapModule[AppModule] .catch[err => console.log[err]]; 2 được gọi ở file index.html. Vậy file index.html được thực thi ở trình duyệt