STDIO
Tìm kiếm gần đây

    Nội dung

    Sử Dụng AngularJS Lập Trình Single Page Application

    03/09/2015
    23/04/2016
    Sử Dụng AngularJS Lập Trình Single Page Application
    Nhằm đổi mới công nghệ, bắt kịp theo xu hướng cũng như giảm thiểu tối đa thời gian trong việc làm web, trong bài này, tôi giới thiệu đến các bạn một lựa chọn mới và nó cũng là xu hướng mới trong công nghệ làm web - lập trình web bằng AngularJS.

    Giới thiệu

    Khi nhắc tới lập trình web, đa phần các bạn thường hay nhắc tới 2 ngôn ngữ lập trình thông dụng đó là PHP và ASP.NET. Tuỳ vào khả năng hoặc nhu cầu của công việc thì chúng ta sẽ lựa chọn ngôn ngữ sao cho phù hợp. Trong bài này tôi giới thiệu đến các bạn một lựa chọn mới và nó cũng là xu hướng mới trong công nghệ làm web - AngularJS.

    Tiền đề bài viết

    Nhằm đổi mới công nghệ, bắt kịp theo xu hướng cũng như giảm thiểu tối đa thời gian trong việc làm web, AngularJS là một lựa chọn khá phù hợp cho những yêu cầu trên.

    Đối tượng hướng đến

    Các bạn lập trình web chưa được tiếp cận với AngularJS hoặc chưa hiểu rõ về nó.

    Những lập trình viên bước đầu học lập trình web nên có kiến thức nền tảng về HTML, CSS và JavaScript để có thể dễ dàng tiếp cận AngularJS hơn.

    AngularJS là gì?

    AngularJS là bộ thư viện JavaScript do Google phát triển và hoàn toàn miễn phí. Thường đượ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ã nguồn và tất cả các tính năng của nó chỉ mới một thẻ tags được khai báo như một thẻ HTML.

    Một 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 một app mobile với đầy đủ tính năng và có thẻ chạy trên nhiều hệ đề hành mobile.

    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.

    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

    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.

    Như vậy ta đã tạo được project, đây cũng là project cơ bản nhất của một ứ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

    Tại thẻ body tôi 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ư một 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.png

    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 bạn hiểu rõ hơn về cơ chế này.

    ss_4

    Đoạn ng-model là một directive và sayhello trong nó được xem như một 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 tải lại trang web.

    Lời kết

    Bài này giúp các bạn có cái nhìn tổng quát và nắm được khái nhiệm cơ bản về AngularJS. Còn rất nhiều các tính năng tôi sẽ giới thiệu đến các bạn trong các bài sau.

    Thảo luận

    In order to comment you must be a STDIO Insider. Please sign up or log in to continue.

    Đăng nhập

    Bài viết liên quan

    AngularJS – Single Page Application

    AngularJS – Single Page Application

    Nhằm đổi mới công nghệ, bắt kịp theo xu hướng cũng như giảm thiểu tối đa thời gian trong việc làm web. AngularJS là một lựa chọn khá phù hợp cho những yêu cầu ...

    Bùi Nguyễn Minh Hoàng

    01/09/2015

    Lập Trình Win32 API - Phần 3: Tạo Và Sử Dụng Resource

    Lập Trình Win32 API - Phần 3: Tạo Và Sử Dụng Resource

    Resource - tài nguyên là một sức mạnh lớn trong việc lập trình bao gồm ứng dụng. Bài viết sau hướng dẫn bạn phương pháp tạo và sử dụng resource - icon, menu, dialog - ...

    Nguyên Phan

    12/09/2015

    Áp Dụng Kĩ Thuật OOP Trong Quá Trình Xây Dựng Framework Dựa Trên Thư Viện SDL

    Áp Dụng Kĩ Thuật OOP Trong Quá Trình Xây Dựng Framework Dựa Trên Thư Viện SDL

    Trong quá trình xây dựng Engine của bản thân mình, thông qua bài viết Khởi Tạo Môi Trường Lập Trình Game Sử Dụng Thư Viện SDL (Simple DirectMedia Layer) của Nghĩa Nguyễn ...

    Hoàng Thái

    09/09/2015

    Tạo GUI Trong C++ Sử Dụng Qt

    Tạo GUI Trong C++ Sử Dụng Qt

    Tạo ứng dụng với giao diện đồ hoạ trong C++, sử dụng framework hỗ trợ Qt, tích hợp vào visual studio. Qt là ứng dụng đa nền tảng, dễ sử dụng khi cho phép kéo thả để tạo ...

    Kim Uyên

    12/05/2016

    Tổng Quan Về Ngôn Ngữ Lập Trình Java

    Tổng Quan Về Ngôn Ngữ Lập Trình Java

    Java là một trong những ngôn ngữ lập trình mạnh và được sử dụng đông đảo trong phát triển phần mềm, các trang web, game hay ứng dụng trên các thiết bị di động, ngôn ngữ ...

    Lê Minh Trung

    20/05/2015

    LinQ – Giới Thiệu Và Cách Sử Dụng

    LinQ – Giới Thiệu Và Cách Sử Dụng

    LinQ có tên gọi là Language Integrated Query, một thư viện cung cấp cho ngôn ngữ lập trình C# và Visual Basic, giúp quản lí database theo mô hình MVC và kết nối database ...

    Bùi Nguyễn Minh Hoàng

    29/08/2015

    Sử Dụng CSDL Hướng Đối Tượng DB4O Với Android - Phần 2 Thực Hiện App Đơn Giản - Chương Trình Trắc Nghiệm

    Sử Dụng CSDL Hướng Đối Tượng DB4O Với Android - Phần 2 Thực Hiện App Đơn Giản - Chương Trình Trắc Nghiệm

    Tiếp theo bài viết 'Sử dụng hệ quản trị cơ sở dữ liệu DB4O trên Android', bài viết này sẽ hướng dẫn xây dựng một chương trình trắc nghiệm đơn giản và tập trung vào các ...

    Nguyễn Hồng Sơn

    15/03/2016

    Các Thẻ - Tag Thông Dụng Trong HTML

    Các Thẻ - Tag Thông Dụng Trong HTML

    HTML (Hyper text markup languague) là một dạng ngôn ngữ được dùng để tạo nên các trang web. HTML là một ngôn ngữ trình bày, và nếu có điều gì đó khác biệt giữa một ngôn ...

    Tuấn Trần

    18/08/2015

    Lập Trình Multithreading Trong Ngôn Ngữ Lập Trình Java

    Lập Trình Multithreading Trong Ngôn Ngữ Lập Trình Java

    Trong chương trình của chúng ta đôi khi ta cần thực thi nhiều tác vụ cùng một lúc như thao tác với network, đọc ghi file... Theo cách lập trình thông thường thì ta chỉ ...

    Nguyễn Nghĩa

    19/11/2015

    Tìm Hiểu Layout Trong Lập Trình Android

    Tìm Hiểu Layout Trong Lập Trình Android

    Khi bắt đầu với lập trình trên thiết bị di động chúng ta thường phải thiết kế giao diện cho ứng dụng, vì vậy chúng ta phải tìm hiểu những view hay control mà ứng dụng sử ...

    Nguyễn Nghĩa

    29/10/2015

    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

    ©STDIO, 2013 - 2020