1 project angular js 2 như thế nào
AngularJS tổ chức dựa trên 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 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à
Đợ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: 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):
2. Chạy projectĐể chạy project, bạn mở command prompt bên trong project gõ
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õ:
Giải thích: - Khi bạn chạy lệnh
- Để chạy ứng dụng ở 1 cổng tùy chọn, bạn thêm tham số
3. Cấu trúc thư mục srcThư 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:
Cùng nhìn sơ qua vào nội dung file index.html này: index.html
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 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 |