Bài 02: Download AngularJS và viết ứng dụng AngularJS đầu tiên
Bài trước chúng ta đã tìm hiểu khái niệm về AngularJS và các ứng dụng, ưu và nhược điểm của Angular, tuy nhiên đó là về mặt lý thuyết ngắn gọn nên mình không thể trình bày hết nội dung của nó được. Và để các bạn rõ ràng hơn thì trong bài này chúng ta sẽ viết một ứng dụng bằng AngularJS đầu tiên với tên là "Hello World".Như ta biết, AngularJS là một Framwork được viết bằng Javascript nên đương nhiên trước khi sử dụng nó đòi hỏi trình duyệt của bạn phải bật JS nhé, và cái thứ hai là phải tích hợp bộ thư viện của nó vào là phải download bộ Angular từ trang chủ của nó đã nhé.
1. Download AngualarJS
2. Viết chương trình AngularJS đầu tiên
Để hiểu angular là gì thì ta sẽ viết ứng dụng đầi tiên nhé. Bước đầu tiên bạn phải tạo một project với tên là angular nằm trong webserver của bạn, sau đó bạn tạo một folder tên libs và copy thư viện AngularJS vào, sau đó bạn tạo một file index.html để viết ứng dụng. Cấu trúc như sau (ảnh chụp từ netbeans):
1
2
3
4
5
6
7
8
9
10
11
| |
TODO write content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| |
"myapp">
"HeaderController">
Xin chào {{data.title}} đến với website {{data.website}}!
- ng-app="myapp"
ng-controller="HeaderController"
1
2
3
4
5
6
| angular.module("myapp", []).controller("HeaderController", function($scope) { $scope.data = { title : 'các bạn', website : 'freetuts.net' };}); |
- angular.module("myapp", []) là bắt đầu viết code cho ứng dụng có tên là myapp
- controller("HeaderController", function($scope) là xử lý cho controller có tên là HeaderController.
- Bên trong là những đoạn code khai báo giá trị trả về. Bạn cần lưu ý rằng biến $scope là bắt buộc nhé (không thể đổi thành tên khác), nó là thành phần trao đổi thông tin gữa controller và view, nghĩa là nếu bạn gán bất kì biến nào trong biến $scope thì trong view sẽ nhận được biến đó với key tương ứng. Như ở ví dụ trên thì key ở view tương ứng sẽ là {{data.title}} và {{data.website}} vì trong $scope mình khai báo một object có hai key như vậy
3. Viết chương trình AngularJS thứ hai
Để các bạn hiểu rõ hơn nữa thì mình sẽ viết thêm một ví dụ tương tự như ví dụ ở trên. Trong ví dụ này mình sẽ thêm một controller nữa bên trong myapp và xử lý nó. Bạn sửa lại file index.html với nội dung như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| |
"myapp">
"HeaderController">
Xin chào {{data.title}} đến với website {{data.website}}!
"ContentController">
Xin chào {{data.title}} đến với website {{data.website}}!
- Trong 2 controller mình đặt 2 tên khác nhau và trong JS mình trả về biến $scope có các key giống nhau nhưng nó lại không bị nhầm lẫn khi render sang View
- Mỗi controller các giá trị trong $scope dù bị trùng key nhưng bản chất nó là 2 controller khác nhau nên nó không hề nhầm lẫn với nhau
- Khi một app có nhiều controller thì ta dùng dấu chấm (.) để nối giữa các đoạn code
4. Lời kêt
Tới bài này bạn có thấy bắt đầu khó không nhỉ
,
thật sự là khó đấy nếu như bạn không rành cách xử lý object trong
javascript. Vì vậy nếu bạn không hiểu thì hãy tìm hiểu JS thật kỹ nhé.Trong bài này ta chỉ tìm hiểu cách download AngularJS và chạy chương trình AngularJS đầu tiên với mục đích giúp các bạn đở thắc mắc hơn. Bài tiếp theo ta sẽ tìm hiểu Controller trong Angular và trong những bài tới ta sẽ tìm hiểu từng thành phần chứ không làm ví dụ lan man như vậy nữa.
Bài đăng
0 nhận xét:
Đăng nhận xét