Cài đặt Môi trường Phát triển AngularJS

Xin chào các bạnfuture web developers! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình đầy.exciting journey vào thế giới của AngularJS. Là một ai đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể告诉 bạn rằng việc thiết lập môi trường phát triển của bạn giống như chuẩn bị nhà bếp trước khi nấu một bữa ăn gourmet. Nó có thể không phải là phần ấn tượng nhất, nhưng nó hoàn toàn cần thiết cho thành công. Vậy, hãy撸 lên袖子 và bắt đầu thôi!

AngularJS - Environment Setup

AngularJS là gì?

Trước khi chúng ta bắt đầu cài đặt, hãy dành một chút thời gian để hiểu AngularJS là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML sẽ là nền móng và tường, CSS sẽ là sơn và trang trí, và JavaScript sẽ là điện và ống nước. AngularJS? Đó giống như có một đội ngũ thiết kế nội thất và kiến trúc sư chuyên nghiệp đảm bảo mọi thứ hoạt động mượt mà cùng nhau.

AngularJS là một khung công tác JavaScript mạnh mẽ giúp mở rộng khả năng của HTML, làm cho việc tạo các ứng dụng web một trang duy nhất trở nên dễ dàng hơn. Nó giống như cho HTML siêu năng lực!

Tại sao chúng ta cần một môi trường phát triển?

Bạn có thể tự hỏi, "Chúng ta không thể bắt đầu lập trình ngay lập tức sao?" Well, bạn có thể, nhưng đó sẽ giống như cố gắng nấu một bữa ăn năm món trong một nhà bếp không có dụng cụ hoặc thiết bị. Một môi trường phát triển phù hợp cho bạn tất cả các công cụ cần thiết để viết, kiểm tra và chạy các ứng dụng AngularJS của bạn một cách hiệu quả.

Thiết lập Môi trường AngularJS của Bạn

Bây giờ, hãy vào phần chính. Dưới đây là những gì chúng ta cần làm:

1. Cài đặt Node.js

Node.js giống như động cơ của môi trường phát triển của chúng ta. Nó là một môi trường chạy JavaScript cho phép chúng ta chạy JavaScript trên máy tính của chúng ta, ngoài ra là trình duyệt web.

Truy cập trang web chính thức của Node.js (https://nodejs.org/).
Tải xuống phiên bản được khuyến nghị cho hầu hết người dùng.
Chạy trình cài đặt và làm theo các hướng dẫn.

Để kiểm tra xem Node.js có được cài đặt đúng cách hay không, mở command prompt hoặc terminal và gõ:

node --version

Bạn nên thấy số phiên bản của Node.js nếu nó được cài đặt đúng cách.

2. Cài đặt npm (Node Package Manager)

Tin tốt! npm thường đi kèm với Node.js. Nó giống như một thư viện khổng lồ nơi bạn có thể mượn (hoặc trong trường hợp này, tải xuống) các gói mã viết sẵn để sử dụng trong dự án của bạn.

Để kiểm tra xem npm có được cài đặt hay không, gõ:

npm --version

3. Cài đặt AngularJS

Bây giờ, chúng ta sẽ thực hiện phép màu. Chúng ta sẽ sử dụng npm để cài đặt AngularJS. Trong command prompt hoặc terminal, gõ:

npm install angular

Lệnh này告诉 npm đi lấy gói AngularJS và cài đặt nó trên máy tính của bạn.

4. Thiết lập Một Dự án AngularJS Đơn giản

Hãy tạo một dự án cơ bản để đảm bảo mọi thứ hoạt động. Đầu tiên, tạo một thư mục mới cho dự án của bạn. Bạn có thể làm điều này thông qua trình duyệt tệp hoặc sử dụng dòng lệnh:

mkdir my-angular-project
cd my-angular-project

Bây giờ, hãy tạo hai tệp trong thư mục này:

index.html
app.js

Dưới đây là cách index.html của bạn nên trông như thế nào:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>My First AngularJS App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ greeting }}</h1>
</div>
</body>
</html>

Và đây là app.js của bạn:

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.greeting = 'Hello, AngularJS!';
});

Hãy phân tích điều này:

Trong index.html, chúng ta đang tạo một cấu trúc HTML cơ bản.
Thuộc tính ng-app="myApp"告诉 AngularJS rằng này là phần tử gốc của ứng dụng AngularJS của chúng ta.
Chúng ta bao gồm thư viện AngularJS và tệp app.js của chúng ta bằng cách sử dụng thẻ <script>.
The <div ng-controller="MainController"> kết nối HTML của chúng ta với bộ điều khiển chúng ta xác định trong app.js.
{{ greeting }} là một biểu thức AngularJS sẽ hiển thị giá trị của greeting từ bộ điều khiển của chúng ta.

Trong app.js:

Chúng ta tạo một mô-đun AngularJS tên là myApp.
Chúng ta xác định một bộ điều khiển tên là MainController.
Trong bộ điều khiển, chúng ta đặt một thuộc tính greeting trên đối tượng $scope, mà AngularJS sử dụng để truyền dữ liệu giữa bộ điều khiển và giao diện người dùng (HTML của chúng ta).

5. Chạy Ứng dụng của Bạn

Để xem ứng dụng của bạn trong hành động, bạn sẽ cần một máy chủ web. Đối với mục đích phát triển, bạn có thể sử dụng gói live-server. Cài đặt nó toàn cục bằng cách sử dụng npm:

npm install -g live-server

Sau đó, trong thư mục dự án của bạn, chạy:

live-server

Điều này sẽ khởi động một máy chủ web 局部 và mở trình duyệt mặc định của bạn để hiển thị ứng dụng của bạn. Bạn nên thấy "Hello, AngularJS!" trên trang.

Kết luận

Chúc mừng! Bạn vừa thiết lập môi trường phát triển AngularJS và tạo ứng dụng AngularJS đầu tiên của mình. Nó có thể seem like a lot of steps, nhưng tin tôi đi, nó sẽ dễ dàng hơn với sự thực hành. Nhớ rằng, mỗi chuyên gia từng là một người mới bắt đầu, và việc thiết lập môi trường của bạn là bước đầu tiên trên hành trình trở thành một.master của AngularJS.

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào các khái niệm AngularJS và bắt đầu xây dựng các ứng dụng phức tạp hơn. Đến那时, bạn có thể tự do thí nghiệm với cài đặt mới của mình. Thử thay đổi lời chào hoặc thêm nhiều yếu tố hơn vào HTML của bạn. Cách tốt nhất để học là làm!

Chúc may mắn và gặp lại trong bài học tiếp theo!

Phương pháp	Mô tả
`angular.module()`	Tạo hoặc lấy lại một mô-đun AngularJS
`module.controller()`	Đăng ký một bộ điều khiển mới với mô-đun
`$scope`	Một đối tượng tham chiếu đến mô hình ứng dụng
`ng-app`	Chỉ thị xác định phần tử gốc của một ứng dụng AngularJS
`ng-controller`	Chỉ thị xác định một bộ điều khiển cho một phần tử HTML
`{{ }}`	Cú pháp biểu thức trong AngularJS để hiển thị giá trị

Credits: Image by storyset

Hướng Dẫn Trước:

AngularJS - Tổng quan

Hướng Dẫn Tiếp Theo:

AngularJS - Kiến trúc MVC