3.9K 116 57

Đã đăng vào thg 9 22, 2015 12:37 SA 5 phút đọc

931

Tìm hiểu về angularjs

Bài đăng này đã không được cập nhật trong 9 năm

1. Lịch sử phát triền của Angularjs

AngularJS được bắt đầu từ năm 2009, do lập trình viên Misko Hevery tại Google viết ra như là một dự án kiểu “viết cho vui”. Misko và nhóm lúc này đang tham gia vào 1 dự án của Google tên là Google Feedback. Với AngularJS, Misko đã rút ngắn số dòng code front-end từ 17000 dòng còn chỉ khoảng 1500. Với sự thành công đó, đội ngũ của dự án Google Feedback quyết định phát triển AngularJS theo hướng mã nguồn mở. Theo thông số từ Github mà mình thấy, hiện tại dự án AngularJS đang có gần 11000 người theo dõi và hơn 2000 lượt fork

2. Angularjs là gì ?

AngularJs là một js framework dành xây đựng ứng dụng web động (dynamic web app)
Angular là một bộ thư viện javascript rất mạnh và thường được sử dụng để xây dựng project Single Page Application (SPA). Nó hoạt động dựa trên các thuộc tính mở rộng HTML (các atributes theo quy tắc của Angular). Đây là một bộ mã nguồn mở hoàn toàn miễn phí và được hàng ngàn các lập trình viên trên thế giới ưa chuộng và sử dụng

3. Tổng quan angularjs

nội dung	mô tả
Template	Sử dụng ngôn ngữ HTML
Directives	Cho phép mở rộng HTML và bạn có thể custom lại các thuộc tính, phần tử (elements)
Model	Lưu trữ dữ liệu và hiển thị ra ngoài view của người dùng khi có 1 tương tác nào đó
Scope	Điểm trung gian, làm nhiệm vụ giao tiếp giữa model, controller, service, view,..
Expressions	Truy cập vào các biến và function từ scope
Compiler	parses template and khởi tạo directives và expressions
Controller	Lớp business logic phía sau views
Filter	Bộ lọc, format lại dữ liệu hiển thị ra ngoài view người dùng
View	Những gì người dùng có thể thấy được
Data Binding	chuyển đổi dữ liệu giữa model và view
Module	Cũng giống như các framework khác, module như thùng chứa các thứ như là controller, service, directives,…
Service	Xây dựng service, mục đích là tái sử dụng lại các phương thức chung có thể sử dụng ở nhiều view hay controller khác nhau
Dependency Injection	Liên kết, thống nhất các đối tượng và chức năng
Injector	thùng chứa dependency injection

Để tìm hiều rõ hơn các bạn có thể vào link này https://docs.angularjs.org/guide sẽ có từng phần mà các bạn cần tìm hiểu

4. Cài đặt và sử dụng AngularJS

Bạn vào trang chủ của Angularjs https://angularjs.org/ down load bộ cài angulajs.min.js rồi đưa vào thư mục bạn cần sử dụng. Tại html phần header bạn thêm link script trỏ đến thư mục đó . Ví dụ:

    <script src="js/angularjs.min.js"></script>

các bạn cũng có thể copy trong field CDN như sau :

    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">  </script>

Các bạn cũng xem qua video để hiểu hơn về angularjs
<iframe width="100%" height="300" src="https://www.youtube.com/embed/i9MHigUZKEM" frameborder="0" allowfullscreen></iframe>

5. Ví dụ Angularjs

ví dụ đầu tiên về angularjs

    <!DOCTYPE html>
     <html>
       <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">     </script>
       </head>
       <body ng-app="myapp">
         <div ng-controller="hellocontroller">
          <p>Xin chào {{loichao.title}} </p>
         </div>
         <script>
        angular.module("myapp", []).controller("hellocontroller", function($scope) {
                    $scope.loichao = {
                        title : 'các bạn',
                    };
                });
          </script>
       </body>
    </html>

các bạn có thể xem demo ở link này http://jsfiddle.net/aLd1xgvc/

6. Tìm hiểu về ng-app trong angularjs

Trong một website thì ng-app đóng vai trò là một main module, nếu Angular nó nhận thấy ta khai báo ng-app ngay tại vị trí nào thì nó sẽ tự hiểu là tất cả các thẻ con bên trong sẽ sử dụng AngularJS.

A. ng-app=""( ng-app rỗng)

xét ví dụ sau:


    <!DOCTYPE html>
    <html>
      <head>
        <title>Tìm hiểu ng-app </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="js/angular.min.js"></script>
      </head>
      <body ng-app="">
        <input ng-model="message"/>
        {{message}}
      </body>
    </html>

các bạn có thể xem demo ở link http://jsfiddle.net/zdpacLgj/11/. Lúc này trong file js bạn không cần khai báo cho javascript cho nó

B. ng-app=""( ng-app có giá trị)

xét ví dụ:

    <body ng-app="myapp">
      <input ng-model="message"/>
       {{message}}
    </body>

chúng ta bắt buộc phải khai báo tên cho ng-app bằng javascript. Nếu không khai báo chương trình sẽ không chạy được. Cú pháp khai báo như sau:

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

7. Tìm hiểu về controller trong angularjs

A. controller là gì:

Controller trong Angular dùng để thiết lâp giá trị, trạng thái ban đầu cho đối tượng $scope
Thêm các hàm, hành vi vào đối tượng $scope

_B. khai báo controller _

Tất cả các controller khi khai báo ở trong HTML thì bắt buộc ban phải khai báo trong javascript với cú pháp như sau:Tất cả các controller khi khai báo ở trong HTML thì bắt buộc ban phải khai báo trong javascript với cú pháp như sau:

      myApp = angular.module('myApp', []);
      myApp.controller("controller_name", function(){
     
      });

Mỗi controller trong Angular dùng để thực thi một nhiệm vụ nhất định và nó thuộc phạm vi của một ứng dụng (ng-app). xét ví dụ sau :

     <body ng-app="myapp">
       <div ng-controller="hellocontroller">
        <p>Xin chào {{hello.title}}</p>
       </div>
     </body>

    angular.module("myapp", []).controller("hellocontroller", function($scope) {
      $scope.loichao = {
         title : 'các bạn',
      };
    });

Controller rỗng

    <body ng-app="">
      <div ng-controller="hellocontroller">
        <p>Xin chào {{hello.title}}</p>
      </div>
     </body>


    function hellocontroller($scope){
                $scope.hello = {
                    title : 'các bạn',
                };
            }

8. $scope trong angularjs

Như các bạn thấy 1 số ví dụ ở trên mình dùng $scope. Vậy scope là gì và tác dụng của nó ra sao mình sẽ tìm hiểu về nó.
$scope là một đối tượng, là cầu nối lưu trữ dữ liệu mà controller và service sử dụng, trao đổi thông qua nó
xet ví dụ :

    <body ng-app="myapp">
      <div ng-controller="controller1">
         {{noidung}}
      </div>
      <div ng-controller="controller2">
         {{noidung}}
      </div>
    </body>

trong file js bạn khai báo như sau :

     myapp = angular.module('myapp', []);
     myapp.controller("controller1", function($scope){
      $scope.noidung='xin chào các bạn' ;
     });
     myApp.controller("controller2", function($scope){
      $scope.noidung = 'rất vui khi được làm quen với các bạn';
     });

các bạn có thể xem demo ở link sau http://jsfiddle.net/zdpacLgj/12/ .Mỗi 1 controller sẽ có 1 phạm vi nhất định với scope. $scope ở 2 controller ko ảnh hưởng đến nhau
Hôm nay mình chỉ giới thiệu với các bạn đến đây để tìm hiểu về angularjs thế nào các bạn có thể tìm hiểu qua trang chủ của angularjs: https://angularjs.org/ , tìm hiểu chi tiết qua các tutorial https://docs.angularjs.org/tutorial hoặc qua video về các ví dụ của angularjs :
<iframe width="100%" height="315" src="https://www.youtube.com/embed/TRrL5j3MIvo" frameborder="0" allowfullscreen></iframe>
Các bạn có thể xem demo đơn giản về angularjs sau http://jsfiddle.net/zdpacLgj/14/
Lần sau mình sẽ giới thiệu với các bạn về directive trong angularjs. cảm ơn các bạn đã xem bài viết này