Hướng dẫn tạo Single Page Application sử dụng AngularJs

AngularJs là một framework JavasScript mạnh mẽ để xây dựng các ứng dụng web động. Nó trở nên cực kỳ phổ biến ngày nay. Điểm tốt về Angular là nó có một tập hợp các mô-đun sẵn sàng sử dụng để đơn giản hóa việc xây dựng các ứng dụng trang đơn (SPA - Single Page Application).

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một ứng dụng trang đơn đơn giản. Mặc dù chúng tôi sẽ xây dựng một ứng dụng nhỏ, nhưng bạn sẽ học được các khái niệm và có thể xây dựng các ứng dụng lớn hơn.

SPA Single Page Application - Ứng dụng trang đơn

Ứng dụng trang đơn Single Page Application (SPA) là một ứng dụng web vừa vặn trên một trang duy nhất. Tất cả mã của bạn (JS, HTML, CSS) được truy xuất với một lần tải trang. Và điều hướng giữa các trang được thực hiện mà không cần làm mới toàn bộ trang.

Ưu điểm

Không cần làm mới trang

Khi bạn đang sử dụng SPA, bạn không cần phải làm mới toàn bộ trang, chỉ cần tải một phần của trang cần thay đổi. AngularJS cho phép bạn tải trước và lưu vào bộ đệm tất cả các trang của mình, vì vậy bạn không cần thêm yêu cầu để tải chúng xuống.

Trải nghiệm người dùng tốt hơn

SPA khiến bạn cảm thấy giống trang web giống như một ứng dụng: nhanh và mượt.

Khả năng làm việc ngoại tuyến

Ngay cả khi người dùng mất kết nối internet, SPA vẫn có thể hoạt động vì tất cả các trang đã được tải.

Nhược điểm

Phát triển phức tạp hơn

Bạn cần viết khá nhiều javascript, xử lý trạng thái chia sẻ giữa các trang, quản lý quyền, v.v.

SEO

Để lập chỉ mục ứng dụng SPA của bạn, trình thu thập thông tin của công cụ tìm kiếm phải có thể thực thi JavaScript. Chỉ gần đây Google và Bing mới bắt đầu lập chỉ mục các trang dựa trên Ajax bằng cách thực thi JavaScript trong quá trình thu thập thông tin.

Ban đầu tải chậm :)

SPA cần tải thêm tài nguyên khi bạn mở nó.

Ứng dụng khách phải bật JavaScript

Tất nhiên, SPA yêu cầu JavaScript. Nhưng may mắn thay, hầu hết mọi người đều đã kích hoạt JavaScript.

Ứng dụng AngularJS

Mọi ứng dụng AngularJS đều bắt đầu từ việc tạo một mô-đun. Mô-đun là vùng chứa cho các phần khác nhau của ứng dụng của bạn: controllers, service, v.v. Để làm được điều đó, bạn hãy tạo một file javascript có tên là app.js. Ta code như sau:

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

Hãy xác định một controller đơn giản, ta code tiếp đoạn sau vào file app.js

app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});

Chúng ta đã tạo xong app, giờ là lúc ta sử dụng chúng trong file html. Ta tạo mới file index.html

Ta cần chỉ định mô-đun của trong thuộc tính ng-app và bộ điều khiển - controller trong thuộc tính ng-controller

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  </head>
  <body ng-controller="HomeController">
    <h1>{{message}}</h1>
    <script src="app.js"></script>
  </body>
</html>

Nếu bạn code chuẩn xác thì bạn sẽ có được giao diện như hình:

Chúng ta đã có một khởi đầu khá thuận lợi với những dòng code đơn giản để bắt đầu tạo App AngularJS và gọi chúng trong file HTML. Bây giờ, chúng ta sẽ làm điều gì đó phức tạp hơn chút để tạo được SPA.

Giới thiệu

Nếu bạn chưa biết về JavaScript, hãy xem loạt bài viết giới thiệu về JavaScript trên codelean.vn. Nó sẽ giúp bạn có một sự khởi đầu nhẹ nhàng với JavaScript đầy màu nhiệm!

ngRoute

Vì chúng ta đang tạo một ứng dụng trang đơn và không muốn bất kỳ trang nào được làm mới, chúng ta sẽ sử dụng khả năng định tuyến của Angular. Chúng tôi sẽ sử dụng mô-đun ngRoute để làm điều đó. Mô-đun ngRoute cung cấp các dịch vụ định tuyến, liên kết sâu và chỉ thị cho các ứng dụng Angular.

index.html file

Để sử dụng được định tuyến, chúng ta cần include angular-route script sau phần main angular.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

Tiếp theo, chúng ta cần chỉ định mô-đun phụ thuộc vào mô-đun ngRoute để có thể sử dụng nó.

var app = angular.module('myApp', ['ngRoute']);

Điều tiếp theo nữa là phân biệt HTML chung cho mọi trang. HTML này sẽ là bố cục của trang web.

Sau đó, chúng ta cần chỉ định vị trí mà HTML của mỗi trang sẽ được đặt trong bố cục của chúng ta. Có một chỉ thị ng-view cho điều đó.

ng-view là một Angular directive sẽ bao gồm mẫu của tuyến đường(route) hiện tại (ví dụ: / blog hoặc / about) trong tệp bố cục chính.

Nói một cách đơn giản, nó lấy tệp mà chúng ta đã chỉ định cho tuyến đường hiện tại và đưa nó vào bố cục ở vị trí của chỉ thị ng-view . Nôm na là chỗ nào có ng-view sẽ được thay bằng file .html được chỉ định. Ta có file index.html như sau:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  </head>
  <body>

    <div ng-view></div>

    <script src="app.js"></script>
  </body>
</html>

app.js Angular JS file

Khi HTML đã sẵn sàng, chúng ta cần định cấu hình các tuyến đường của mình. Chúng tôi sẽ sử dụng dịch vụ $routeProvider từ mô-đun ngRoute .

Đối với mỗi tuyến, chúng ta cần chỉ định templateUrl và bộ điều khiển.

Nếu người dùng cố gắng đi đến tuyến đường không tồn tại, chúng tôi có thể xử lý điều này bằng cách sử dụng chức năng otherwise . Trong trường hợp này, chúng ta sẽ chuyển hướng người dùng đến tuyến “ / ”. Ta có đoạn code app.js như sau:


var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/blog', {
    templateUrl : 'pages/blog.html',
    controller  : 'BlogController'
  })

  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'AboutController'
  })

  .otherwise({redirectTo: '/'});
});

Sau đó, ta cần xây dựng bộ điều khiển cho mọi tuyến đường (chúng tôi đã chỉ định tên của chúng trong routeProvider):


app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});

app.controller('BlogController', function($scope) {
  $scope.message = 'Hello from BlogController';
});

app.controller('AboutController', function($scope) {
  $scope.message = 'Hello from AboutController';
});

Các trang của chúng tôi sẽ đơn giản:

home.html

<h1>Home CodeLean.vn</h1>

<h3>{{message}}</h3>

blog.html

<h1>Blog CodeLean.vn</h1>

<h3>{{message}}</h3>

about.html

<h1>About CodeLean.vn</h1>

<h3>{{message}}</h3>

Lưu ý rằng chúng ta không cần sử dụng các thẻ html, head, body trong trang của mình. Các trang này sẽ luôn được sử dụng bố cục bên trong như một phần HTML.

Hãy thêm các liên kết sẽ chuyển đổi các trang của chúng tôi. HTML cuối cùng trông giống như sau:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  </head>
  <body>
    <a href="#/">Home</a>
    <a href="#/blog">Blog</a>
    <a href="#/about">About</a>

    <div ng-view></div>

    <script src="app.js"></script>
  </body>
</html>

Trình duyệt không hỗ trợ tải tài nguyên từ disk bằng ajax, vì vậy bạn có thể sử dụng bất kỳ máy chủ HTTP nào để host HTML tĩnh. Ví dụ bạn chạy trên WebStorm là đơn giản nhất ;)

Nếu bạn không muốn làm điều này, bạn có thể đưa các HTML một phần của mình vào index.html bằng cách sử dụng thẻ script với loại text/ng-template .

Khi angular nhìn thấy các mẫu này, nó sẽ tải nội dung của nó vào bộ đệm ẩn của mẫu và sẽ không thực hiện yêu cầu ajax để lấy nội dung của chúng.

Chốt lại file index.html sẽ như sau:

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
  </head>
  <body>
    <script type="text/ng-template" id="pages/home.html">
      <h1>Home</h1>
      <h3>{{message}}</h3>
    </script>
    <script type="text/ng-template" id="pages/blog.html">
      <h1>Blog</h1>
      <h3>{{message}}</h3>
    </script>
    <script type="text/ng-template" id="pages/about.html">
      <h1>About</h1>
      <h3>{{message}}</h3>
    </script>

    <a href="#/">Home</a>
    <a href="#/blog">Blog</a>
    <a href="#/about">About</a>

    <div ng-view></div>

    <script src="app.js"></script>
  </body>
</html>

Kết luận

Trong hướng dẫn này, bạn đã học cách tạo một ứng dụng trang đơn bằng AngularJS. Bây giờ bạn có thể tiếp tục và tạo các ứng dụng trang đơn phức tạp hơn.

Để xem phiên bản code đầy đủ thì bạn có thể đọc bài viết ví dụ đầy đủ về SPA với AngularJS trên codelean.vn. Hoặc có thể bạn lướt qua code trước rồi đọc bài này sau, để hình dung tổng quan về sản phẩm trước rồi tìm hiểu kỹ sau :)

Bài đăng nổi bật

Kill Port 8080

Hướng dẫn tạo Single Page Application sử dụng AngularJs

SPA Single Page Application - Ứng dụng trang đơn

Ưu điểm

Không cần làm mới trang

Trải nghiệm người dùng tốt hơn

Khả năng làm việc ngoại tuyến

Nhược điểm

Phát triển phức tạp hơn

SEO

Ban đầu tải chậm :)

Ứng dụng khách phải bật JavaScript

Ứng dụng AngularJS

Giới thiệu

ngRoute

index.html file

app.js Angular JS file

Kết luận

Post a Comment

إرسال تعليق

About Us

نموذج الاتصال

Bài đăng nổi bật

[AngularJS 01] Hướng dẫn tạo SPA Single Page Application sử dụng AngularJs

Hướng dẫn tạo Single Page Application sử dụng AngularJs

SPA Single Page Application - Ứng dụng trang đơn

Ưu điểm

Không cần làm mới trang

Trải nghiệm người dùng tốt hơn

Khả năng làm việc ngoại tuyến

Nhược điểm

Phát triển phức tạp hơn

SEO

Ban đầu tải chậm :)

Ứng dụng khách phải bật JavaScript

Ứng dụng AngularJS

Giới thiệu

ngRoute

index.html file

app.js Angular JS file

Kết luận

You might like

Post a Comment

إرسال تعليق

نموذج الاتصال