Trong bài viết này, mình sẽ hướng dẫn các bạn tạo 1 project Angular 2 đơn giản. Các bạn sẽ làm quen với npm, module, cách tạo component bằng dòng lệnh…
Khi mình bắt đầu học Angular 2 thì Angular 4 vừa ra bản chính thức. Các bạn có thể tham khảo phiên bản 4 tại đây: https://angular.io/
Mục đích của bài viết này là hướng dẫn tạo project và viết code thật đơn giản cho các bạn mới bắt đầu làm quen với front-end (ví dụ như mình).
Nếu các bạn chưa quen với Javascript, hoặc chưa biết gì về TypeScript, thì bạn có thể bắt đầu học ngay Angular 2 mà không gặp vấn đề gì cả. TypeScript có cú pháp gần gũi với ngôn ngữ lập trình cấp cao (C#, Java). Việc nắm bắt TypeScript rất nhanh chóng.
Để sử dụng được TypeScript, bạn cần cài đặt NodeJs. Bạn tải file cài đặt tại: https://nodejs.org/en/
Sau đó, bạn mở command line để cài đặt TypeScript từ dòng lệnh:
(Cấu trúc project Angular 2 tương đối phức tạp, sẽ không chỉ đơn giản là 1 file html, 1 file javascript và 1 file css. Lúc bắt đầu, bạn nên sử dụng 1 công cụ để generate code).
Github: https://github.com/angular/angular-cli
Cài đặt:
Các dòng lệnh thường dùng:
Lúc mới bắt đầu, bạn chỉ cần chú ý đến thư mục src
Mở file src/index.html
Kết quả:
Tham khảo:
Khi mình bắt đầu học Angular 2 thì Angular 4 vừa ra bản chính thức. Các bạn có thể tham khảo phiên bản 4 tại đây: https://angular.io/
Mục đích của bài viết này là hướng dẫn tạo project và viết code thật đơn giản cho các bạn mới bắt đầu làm quen với front-end (ví dụ như mình).
Chuẩn bị
Bạn cần cài đặt: NodeJs, TypeScript, và Angular-cli.TypeScript
Trong project này, các bạn sẽ làm quen với TypeScript. TypeScript là một dự án mã nguồn mở của Microsoft, các bạn có thể xem nó là 1 phiên bản bổ sung cho Javascript, với các kiểu dữ liệu và cách khai báo hướng đối tượng.Nếu các bạn chưa quen với Javascript, hoặc chưa biết gì về TypeScript, thì bạn có thể bắt đầu học ngay Angular 2 mà không gặp vấn đề gì cả. TypeScript có cú pháp gần gũi với ngôn ngữ lập trình cấp cao (C#, Java). Việc nắm bắt TypeScript rất nhanh chóng.
Để sử dụng được TypeScript, bạn cần cài đặt NodeJs. Bạn tải file cài đặt tại: https://nodejs.org/en/
Sau đó, bạn mở command line để cài đặt TypeScript từ dòng lệnh:
npm install -g typescriptAngular-cli
Angular cung cấp 1 tiện ích cho phép người dùng tạo và quản lý project bằng command line. Nó tự động tạo project, component, and … Đây là 1 công cụ không thể thiếu khi bắt đầu làm quen với Angular 2.(Cấu trúc project Angular 2 tương đối phức tạp, sẽ không chỉ đơn giản là 1 file html, 1 file javascript và 1 file css. Lúc bắt đầu, bạn nên sử dụng 1 công cụ để generate code).
Github: https://github.com/angular/angular-cli
Cài đặt:
npm install -g @angular/cliCác dòng lệnh thường dùng:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
ng serve --host 0.0.0.0 --port 4201
ng generate component my-new-component
ng g component my-new-component # using the alias
Tạo project Hello World
Để tạo 1 project mới, bạn gõ lệnh:ng new angular2HelloWorldInstalling packages for tooling via npmCấu trúc cây thư mục:
Lúc mới bắt đầu, bạn chỉ cần chú ý đến thư mục src
Mở file src/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular2HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ng serveKết quả:
Deploy Project
ng build --prodTham khảo:
- ng-book 2 The Complete book on Angular 2
Chúc các bạn thành công!
Để restore lại package module, bạn gõ: npm install
Trả lờiXóa