STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    AngularJS – Single Page Application

    AngularJS là 1 trong những bộ thư viện JavaScript đầu tiên hỗ trợ Single Page Application (SPA) do Google phát triển và hoàn toàn miễn phí.
    01/09/2015
    29/09/2020
    3 phút đọc
    AngularJS – Single Page Application

    AngularJS là gì?

    AngularJS là bộ thư viện JavaScript do Google phát triển và hoàn toàn miễn phí. Được sử dụng trong việc xây dựng Single-page Application (SPA). AngularJS cho phép xây dựng ngay trong trình duyệt mà không cần phải thông qua server.

    Với khả năng mở rộng rất cao AngularJS cho phép xây dựng các directive riêng do mỗi lập trình viên tạo ra để thêm hoặc bổ sung các tính năng. Điều này giúp dễ dàng sử dụng lại mã và tất cả các tính năng của nó chỉ mới 1 thẻ tags được khai báo như 1 thẻ HTML.

    1 tính năng vượt trội nữa của AngularJS là khả năng cho phép người dùng xây dựng 1 app mobile với đầy đủ tính năng và có thẻ chạy trên nhiều hệ đề hành mobile.

    * Hiện tại AngularJS mà đã được thay thế bằng Angular với phương pháp lập trình hoàn toàn khác nhưng cốt lõi vẫn giữ được tư tưởng Single Page Application. Mọi truy cập vào trang của AngularJs sẽ được định hướng đến Angular.

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

    • Bước 1: Vào trang chủ https://angularjs.org/ chọn download để tải file angular.min.js. Đây chỉ là 1 file nhỏ trong nhiều file của bộ thư viện này.
    • Bước 2: Tạo một project mới có tên HelloStdio. Các ứng dụng xây dựng bằng AngularJS thường được xây dựng dựa trên mô hình MVVM (Model-View-ViewModel), có cấu trúc gần giống với mô hình MVC (Model-View-Controller).
    ss_1
    Caption

    Trong project có folder app và file index.html. Folder app này sẽ chứa các file JavaScript quan trọng có nhiệm vụ chi phối toàn project như app.js, controller.js, service.js và file index.html là file hiển thị chính. Tuy project có thể có rất nhiều trang nhưng thực chất chỉ thể hiện duy nhất trên 1 trang index.html này. Đó là lý do AngularJS còn gọi là Single-Page Application. Đây cũng là project cơ bản nhất của 1 ứng dụng AngularJS.

    Ứng dụng

    Trong file index.html import 2 file JavaScript là app.jsangular.min.js như hình sau:

    ss_2
    Caption

    Tại thẻ body, thêm vào ng-app=”” để đánh dấu rằng angularjs được sử dụng trong phạm vi của thẻ body. Và trong phạm vi này các kí tự trong cặp dấu {{ }} đều được xem như 1 biểu thức.

    Ở ví dụ trên phép tính 5 + 5 được thực hiện và hiển thị lên trang web.

    Đây là trường hợp thẻ body không có ng-app=””.

    ss_3

     AngularJS làm cho trang web HTML từ tĩnh trở thành động là nhờ cơ chế binding. Ví dụ sau sẽ giúp hiểu rõ hơn về cơ chế này.

    ss_4
    Caption

    Đoạn ng-model là 1 directive và sayhello trong nó được xem như 1 biến và có phạm vi sử dụng là toàn thẻ body (lưu ý: chỉ trong trường hợp ở trên). 

    Khi điền kí tự vào trong input thì ngay lập tức biến sayhello sẽ được in ra màn hình mà không cần phải refresh.

    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Đề xuất

    SPA - Single Page Application Là Gì?
    Bài viết giới thiệu về SPA - Single Page Application, sự so sánh giữa mô ...
    ListView Multiple Selection và ListView Single Selection
    ListView Multiple Selection là ListView cho phép được chọn nhiều item và ...

    Khám phá

    RequireJS cho Người Mới Bắt Đầu
    Khái niệm, chức năng, cách module hoá JavaScript, cách tạo module với ...
    Lưu Trữ Dữ Liệu trong Android với Unity
    Hướng dẫn đọc và ghi file trên Android với đường dẫn ...
    Hiển Thị Unicode Trên Console
    Hiển thị tiếng Việt, Unicode trên màn hình console trên Windows bằng ...
    11/06/2017
    Dynamic Web Application với Eclipse Helios và Tomcat Server
    Hướng dẫn tạo ứng dụng web bằng IDE Eclipse Helios và Apache Tomcat Web ...
    09/09/2017
    Biên Niên Sử Angular
    Tóm lược các giai đoạn hình thành và phát triển của Angular, từ ...
    Kiến Thức Cần Có Để Trở Thành Full-stack JavaScript Developer
    Kiến thức và kỹ năng cần thiết cho một Full-stack JavaScript Developer.
    Load Sprite trong DirectX 9
    Hiện thực load Sprite từ cơ bản đến các thao tác nâng cao như flip, ...
    Học SEO Trong 1 Ngày - Phần 3
    Sau bước phân tích keyword theo hướng người dùng, đây là bước bắt tay ...
    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    Đã thông báo Bộ Công Thương
    ©STDIO, 2013 - 2020