Để cài đặt môi trường cho AngularJS và bắt đầu phát triển ứng dụng, bạn cần thực hiện các bước sau:
1. Chuẩn bị môi trường phát triển
- Trình duyệt web: AngularJS chạy trên trình duyệt, vì vậy bạn cần một trình duyệt hiện đại như Google Chrome, Firefox, hoặc Edge.
- Trình soạn thảo mã nguồn: Bạn cần một công cụ để viết mã. Một số trình soạn thảo phổ biến là:
- Visual Studio Code (VS Code)
- Sublime Text
- Atom
2. Tải và cài đặt Node.js
- Mặc dù không bắt buộc, nhưng việc cài đặt Node.js và npm (Node Package Manager) sẽ giúp bạn quản lý các gói thư viện và chạy máy chủ phát triển dễ dàng hơn.
- Bạn có thể tải Node.js từ trang web chính thức của Node.js.
3. Tạo một dự án mới với AngularJS
Sử dụng CDN (Content Delivery Network):
- Đây là cách đơn giản nhất để bắt đầu với AngularJS. Bạn chỉ cần nhúng liên kết AngularJS vào tập tin HTML của mình.
- Tạo một file HTML và thêm mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngularJS Example</title>
<!-- Liên kết tới AngularJS qua CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{ greeting }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>
- Sử dụng bower:
- Bower là một công cụ quản lý thư viện front-end, bạn có thể dùng nó để cài đặt AngularJS.
- Cài đặt bower:
npm install -g bower
- Tạo một thư mục mới cho dự án và điều hướng đến thư mục đó:
mkdir myAngularJSApp cd myAngularJSApp
- Sử dụng bower để cài đặt AngularJS:
bower init bower install angular --save
- Bây giờ, AngularJS sẽ được cài đặt vào thư mục
bower_components.
4. Tạo ứng dụng AngularJS đầu tiên
- Tạo một file
index.htmltrong thư mục dự án của bạn và liên kết tới tập tin AngularJS đã tải về:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My AngularJS App</title>
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{ greeting }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>
5. Chạy ứng dụng
- Mở file
index.htmltrong trình duyệt của bạn để xem ứng dụng AngularJS đầu tiên.
6. Tìm hiểu thêm và phát triển
- Từ đây, bạn có thể bắt đầu mở rộng ứng dụng của mình bằng cách tìm hiểu thêm về các tính năng của AngularJS như directive, services, routing, và nhiều hơn nữa.
Bằng cách hoàn thành các bước này, bạn đã thiết lập xong môi trường phát triển cho AngularJS và có thể bắt đầu phát triển ứng dụng web của riêng mình.