Ví dụ về AngularJS đơn giản là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ về AngularJS đơn giản sẽ chia sẻ tới bạn nhiều thông tin hữu ích
Mọi người vẫn hỏi tôi về việc học lập trình nói chung và AngularJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.
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é.
Bạn vào trang chủ của AngularJS với đường link angularjs.org:
Tại đây có hai sự lựa chọn cho bạn, nếu bạn click chọn View on GitHub thì bạn sẽ lên trang Github để download nhé, còn nếu bạn chọn Download thì nó sẽ hiển thị một popup cho bạn download. Sau khi download xong bạn sẽ có một file với tên angular.min.js. Đây chính là bộ thư viện AngularJS.
Để 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):
Bây giờ bạn mở file index.html lên và import thư viện Angular vào như sau:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="libs/angular.min.js"></script> </head> <body> <div>TODO write content</div> </body> </html>
Bây giờ ta sẽ viết ứng dụng in ra một câu chào trên màn hình bằng cách sử dụng AngularJS. Bạn sửa lại file index.html với nội dung như sau:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="libs/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <div ng-controller="HeaderController"> <h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2> </div> <script> angular.module("myapp", []).controller("HeaderController", function($scope) { $scope.data = { title : 'các bạn', website : 'hoidapcode.com' }; }); </script> </div> </body> </html>
angular.module("myapp", []).controller("HeaderController", function($scope) { $scope.data = { title : 'các bạn', website : 'hoidapcode.com' }; });
Chạy code lên bạn sẽ thấy trên màn hình xuất hiện như sau: XEM DEMO.
Để 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:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript" src="libs/angular.min.js"></script> </head> <body> <div ng-app="myapp"> <div ng-controller="HeaderController"> <h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2> </div> <div ng-controller="ContentController"> <h2>Xin chào {{data.title}} đến với website {{data.website}}!</h2> </div> <script> angular.module("myapp", []).controller("HeaderController", function($scope) { $scope.data = { title : 'các bạn', website : 'hoidapcode.com' }; }).controller("ContentController", function($scope){ $scope.data = { title : 'quý vị', website : 'học lập trình online hoidapcode.com' }; }); </script> </div> </body> </html>
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
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.
Hy vọng với bài viết về Ví dụ về AngularJS đơn giản đã giải đáp giúp bạn phần nào về kiến thức lập trình AngularJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.
Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.
Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!
Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!