VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms
1 / 3
❮ ❯

Tạo dự án Angular đầu tiên


Cài đặt Angular 7
Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Nội dung chính

  • Hướng dẫn tạo dự án Angular đầu tiên
  • Tạo dự án Angular
  • Run dự án Angular
  • Cấu trúc một dự án angular

Hướng dẫn tạo dự án Angular đầu tiên

Bài này sẽ hướng dẫn bạn làm thế nào để tạo dự án đầu tiên trong Angular và giải thích về cấu trúc của dự án Angular 7. Hãy đảm bảo rằng bạn đã hoàn thành cài đặt môi trường cho Angular 7.

Về tài liệu học Angular, bạn có thể tìm thấy tại trang chủ https://cli.angular.io/

Ở đầu trang chủ là hướng dẫn cài đặt Angular và tạo dự án Angular.

Cài đặt môi trường Angular7

Bạn sẽ thấy các lệnh sau trên trang web:


npm install -g @angular/cli // lệnh cài đặt angular mới nhất
ng new my-dream-app // tạo một dự án angular có tên my-dream-app
cd my-dream-app // đi đến thư mực my-dream-app
ng serve // run dự án


Tạo dự án Angular

Lệnh ng new [ten_du_an] được sử dụng để tạo dự án Angular, ví dụ: Tạo dự án có tên "my-app" tại thư mục C:\Angular\Angular7.


ng new my-app

Chạy lệnh trên cho kết quả như sau:

Tạo dự án đầu tiên trong Angular7

Đây là thư mục dự án C:\Angular\Angular7\my-app:

Tạo dự án đầu tiên trong Angular7

Run dự án Angular

Thay đổi thư mục trong dòng lệnh bằng cách gõ lệnh sau:


cd my-app
Tạo dự án đầu tiên trong Angular7

Run dự án bằng cách gõ lệnh sau:


ng serve
Tạo dự án đầu tiên trong Angular7

Đến đây chúng ta đã run thành công dự án đầu tiên. Như bạn thấy trong ô màu đỏ của ảnh trên là link của ứng dụng. Mặc định angular sẽ lắng nghe port 4200.

Mở trình duyệt lên và gõ http://localhost:4200 để xem kết quả:

Tạo dự án đầu tiên trong Angular7

Cấu trúc một dự án angular

Cấu trúc thư mục của một angular bao gồm:

  • e2e: Thư mục này dùng để chứa các tập tin dành cho mục đích testing.
  • node_modules: Gói npm được cài đặt là node_modules. Bạn có thể mở thư mục và xem các gói có sẵn.
  • src: Đây là thư mục sẽ chứa toàn bộ source code của ứng dụng Angular các bạn nhé.
  • .editorconfig: Chứa các cấu hình liên quan đến phần Editor để chỉnh sửa source code như: indent_size, max_line_length,…
  • .gitignore: Đây là tập tin metadata của Git, chứa thông tin những tập tin hoặc thư mục sẽ bị ignore không được commit lên Git Repository.
  • angular-cli.json: Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng ta có thể build ứng dụng Angular.
  • karma.conf.js: Tập tin cấu hình cho Karma, liên quan nhiều đến phần testing.
  • package-lock.json: Dùng để lock version cho các Node.js module dependencies
  • package.json: Tập tin cấu hình cho Node.js module dependencies
  • protractor.conf.js: Tập tin cấu hình cho Protractor, liên quan nhiều đến phần testing
  • README.md: Tập tin này thường được sử dụng để cho các hệ thống Git hiển thị thông tin về Git Repository của chúng ta.
  • tslint.json: Tập tin cấu hình để kiểm tra lỗi cho các tập tin .ts (TypeScript) trong Angular project.

Trong thư mục src có nhưng thư mục sau:

  • app: Đây là thư mục sẽ chứa toàn bộ code của ứng dụng Angular.
  • assets: Thư mục này sẽ chứa các file ảnh, CSS, custom JavaScript của ứng dụng Angular
  • environments: Chúng ta có thể viết ứng dụng chạy trên nhiều môi trường khác nhau, đây chính là thư mục giúp chúng ta làm định nghĩa các tập tin cấu hình cho những môi trường khác nhau đó.
  • favicon.ico: Icon của ứng dụng Angular.
  • index.html: Trang chủ của ứng dụng Angular.
  • main.ts: Chứa code bootstrapping cho ứng dụng Angular.
  • polyfill.ts: Dùng để định nghĩa các chuẩn để ứng dụng của chúng ta có thể chạy được trên mọi trình duyệt.
  • style.css: Định nghĩa style CSS cho ứng dụng Angular.
  • test.ts: Code để chạy test.
  • tsconfig.json: Tập tin định nghĩa việc compile cho TypeScript.

Cài đặt Angular 7
Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio Code

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiên

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml