AngularJs Single Page Application là gì?
Mục lục
AngularJs là gì?
Xem thêm: AngularJS là gì?
AngularJs là một thư viện javascript cực tốt dùng cho việc xây dựng các ứng dụng web linh động và mềm dẻo, và framework này đã phổ biến khắp thế giới. Tin tốt là AngularJs đã có một tập hợp các module đầy đủ giúp việc dựng các Single Page Application dễ dàng hơn.
Bài này sẽ nói về việc xây dựng một Single Page Application đơn giản. Qua đó, chúng ta sẽ dựng một app nhỏ, bạn sẽ thấy được các khái niệm và có thể dựng các app lớn hơn.
Single Page Application
Single Page Application (SPA) là một ứng dụng nền web phù hợp trên một single page. Tất cả code của bạn (Javascript, HTML, CSS) được lấy về với một lần page load (single page load). Và sự chuyển hướng các page sẽ không làm mới (refresh) toàn bộ page.
Ưu điểm
Không load page: bạn không cần load lại page, chỉ load một phần của page cần được thay đổi. Angular cho phép bạn load trước (pre-load), vì thế sẽ không cần yêu cầu thêm để tải chúng.
Trải nghiệm người dùng tốt hơn: nhanh và responsive
Khả năng chạy offline: kể cả không có internet, SPA có thể hoặt động vì đã load các trang về máy.
Nhược điểm
Xây dựng phức tạp hơn: bạn cần viết nhiều javascript hơn, kiểm soát việc chia sẻ trạng thái (state) giữa các page, quản lý quyền …
SEO: để index ứng dụng SPA của bạn, các cỗ máy tìm kiếm (search engine crawlers) sẽ phải chạy được javascript. Hiện tại, Google và Bing đã hỗ trợ. Bạn cần tạo những trang HTML tĩnh cho máy tìm kiếm.
Load lần đầu chậm: SPA cần tải thêm tài nguyên khi bạn mở.
Người dùng sẽ phải cho phép chạy javascript: SPA cần chạy javascript, và may thay hầu hết người dùng đã cho phép javascript.
Angular Application
Mọi ứng dụng angular bắt đầu từ việc tạo 1 module. Module là nơi chứa các phần khác nhau của ứng dụng: controller, service …
var app = angular.module(‘myApp’, []);
Định nghĩa controller đơn giản:
app.controller(‘HomeController’, function($scope) {
$scope.message = ‘Hello from HomeController’;
});
Sau khi tạo ra module và controller, chúng ta sử dụng chúng trong HTML.
Đầu tiên, ta cần thêm angular script và app.js để dựng page.
Sau đó cần chỉ ra module của chúng ta trong thuộc tính của ng-app, và chỉ ra controller trong thuộc tính của ng-controller.
<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>
Kết quả nếu thực hiện đúng
Sau khi cài đặt module và controller, và chúng ta thấy Angular hoạt động đúng, chúng ta sẽ bắt đầu việc thêm single page application.
ngRoute
Chúng ta không muốn bất kỳ việc load page nào, chúng ta sẽ dùng các khả năng điều hướng của Angular.
Chúng ta sẽ dùng module ngRoute.
Module ngRoute cung cấp khả năng routing, deeplinking services và điều phối các ứng dụng angular.
Chúng ta cần thêm angular-route phía sau script của 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, cần xác định module để sử dụng ngRoute
var app = angular.module(‘myApp’, [‘ngRoute’]);
Để xây dựng HTML để thể hiện nội dung, ng-view thực hiện việc đó. ng-view là Angular directive, bao gồm các template của route hiện tại (/blog, /about ..) trên file layout chính.
<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>
Khi HTML sẵn sàng, chúng ta cấu hình route bằng cách sử dụng $routeProvider cho ngRoute
Mỗi route, cần chỉ ra templateUrl và controller.
Nếu người dùng cố gắng truy cập địa chỉ không tồn tại, chúng ta có thể kiểm soát bằng hàm otherwise, trong hợp này, điều hướng về “/”.
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: ‘/’});
});
Tiếp theo, xây dựng controller cho từng route
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 HTML sẽ đơn giản như sau:
home.html
<h1>Home</h1>
<h3>{{message}}</h3>
blog.html
<h1>Blog</h1>
<h3>{{message}}</h3>
about.html
<h1>About</h1>
<h3>{{message}}</h3>
Chú lý là chúng ta không cần dùng các thẻ html, body vì các trang đó được dùng bên trong layout như một phần HTML.
Chúng ta thêm liên kết để chuyển trang. HTML hoàn thiện sẽ đặt trong file index.html
<!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>Demo
http://plnkr.co/edit/ClBmOH3ljAWueRBdKGKR?p=preview
Tham khảo
https://tests4geeks.com/tutorials/single-page-application-using-angularjs-tutorial/
AngularJS là gì? – Hành trang Lập trình blog
17/09/2016 @ 4:09 pm
[…] AngularJs Single Page Application là gì? […]