Tìm hiểu về AngularJS | Sociss Class - Online Education Center

Tóm Tắt

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

     
     <
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:


     
    <
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';
     });

Nguồn: https://viblo.asia/p/tim-hieu-ve-angularjs-wpVYRPrLG4ng

Tìm hiểu về AngularJS | Sociss Class – Online Education Center