Difference between revisions of "Lập trình NodeJS và AngularJS"

Revision as of 02:54, 29 November 2018

Lập trình NodeJS

Lập trình AngularJS

So sánh AngularJS và Angular

Angular chia làm hai phiên bản chính:

• AngularJS: Mọi người hay gọi là Angular 1 được tạo năm 2009. Phiên bản này đưa ra hai cách binding dữ liệu và cách thay đổi trong Javascript sẽ tự động được cập nhật lên giao diện người dùng. Hơn nữa AngularJS hỗ trợ directive cho phép tạo ra nhiều mã riêng và tái sử dụng mã. Nói chúng, nó giúp lập trình viên viết các ứng dụng theo mô hình MVC hoặc MVVM theo cách đơn giản hơn.
• Angular: Dần dần ngày càng nhiều thứ được thêm vào core, vì thế Angular Team quyết định tạo ra một phiên bản hoàn toàn mới. Các bản Angular 2, 4, ... bây giờ đều gọi là Angular và các phiên bản mới bây giờ đều tương thích ngược với Angular 2.

Hiện tại Angular được sử dụng phổ biến hơn, có nhiều thư viện hỗ trợ hơn. Vì vậy trong hầu hết trường hợp thì Angular là lựa chọn tốt hơn.
Ngoài ra, trình duyệt hỗ trợ cũng là yếu tố quan trọng, nếu ứng dụng của bạn chỉ hỗ trợ trình duyệt mới thì Angular là lựa chọn tốt nhất nhưng nếu bạn muốn hỗ trợ IE8 thì AngularJS tốt hơn.

Dưới đây là một số sự khác nhau cơ bản giữa AngularJS và Angular:

• Language: Angular dựa trên TypeScript trong khi AngularJS dựa trên JavaScript. Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là một phiên bản nâng cao của Javascript. Chi tiết về sự khác nhau xem địa chỉ: https://viblo.asia/p/gioi-thieu-typescript-su-khac-nhau-giua-typescript-va-javascript-LzD5dDn05jY
• Controllers vs components: AngularJS sử dụng thuật ngữ scope và controller. Bạn có thể thêm nhiều biến vào scope, các biến này sẽ được nhìn thấy trong View và Controller. AngularJS cũng đưa ra một khái niệm rootScope, các biến trong rootScope được sử dụng trong toàn bộ ứng dụng. Còn Angular không có khái niệm scope và controller, mà nó sử dụng mô hình phân cấp các thành phần, cách tiếp cận giống ReactJS.
• Template engine:
  • AngularJS sử dụng nhiều directive (chỉ thị) và nhà phát triển cũng có thể tạo ra các directive mới. Angular cũng có directive chuẩn, nhưng chúng được sử dụng theo cách khác. Ví dụ:
    • AngularJS:
      • ng-model sử dụng để tạo "two-way binding" (Binding hai chiều: Biến thay đổi thì cập nhật giao diện, trên giao diện thay đổi thì cập nhật biến)
      • ng-bind sử dụng để tạo "one-way binding" (Binding một chiều: Biến thay đổi thì cập nhật giao diện)
    • Angular chỉ sử dụng ngModel, những cách viết khác nhau:
      • Nếu bạn viết nó trong "[]" thì sẽ là one-way binding.
      • Nếu bạn viết nó trong "[()]" thì sẽ là two-way binding.
  • Chỉ thị ng-repeat trong AngularJS đổi thành ngFor trong Angular.
• Các thay đổi khác: Angular là phiên bản mới hơn nên có nhiều lợi thế hơn như:
  • Mô đun hóa: Nhiều chức năng cốt lõi đã được chuyển sang các mô đun khác nhau. Giúp cho core nhanh hơn, tải động, biên dịch không đồng bộ và hỗ trợ reactive programming.
  • Angular Cli: Một gói giúp bạn dễ dàng tạo ra các project Angular.
  • ...

Tham khảo: https://gorrion.io/blog/angularjs-vs-angular/

Cấu trúc thư mục chuẩn

Thực tế khi viết ứng dụng Angular, việc cấu trúc hóa thư mục trong project thế nào là tùy bạn. Nhưng tôi khuyên bạn hãy cấu trúc hóa thư mục theo một chuẩn nào đó để tiện cho việc coding, testing, bảo trì sau này.
Cấu trúc hóa thư mục theo chức năng được nhiều người sử dụng, bạn có thể tham khảo bài viết: AngularJS Best Practices: Directory Structure

Coding style

Thông thường khi coding một ngôn ngữ phải tuân theo coding chuẩn để tiện cho việc người khác đọc hiểu và bảo trì sau này.
Mình xin đề xuất tuân theo chuẩn như dưới:

• AngularJS: Tham khảo tại địa chỉ https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
• Angular: Tham khảo tại địa chỉ https://angular.io/guide/styleguide

Một số tác vụ đặc biệt

Website hỗ trợ nhiều ngôn ngữ

Tự động thêm link vào URL trong một đoạn văn bản

Trong nhiều trường hợp, khi hiển thị text lên trình duyệt, bạn muốn tự động thêm thẻ link cho các URL có trong văn bản. Trong trường hợp này bạn có thể sử dụng thư viện anchorme: https://github.com/Jpja/CounterTools/tree/master/lib/anchorme

Các bước thực hiện:

• B1: Tải tệp anchorme.min.js từ địa chỉ trên
• B2: Include vào trong tệp html:
  <script src="anchorme.min.js"></script>
• B3: Trong code javascript, gọi hàm anchorme.js là xong.
  • VD1: Tự động thêm link bình thường
    var someText = "this is a text with a link www.github.com ..";
    var result = anchorme.js(someText);
  • VD2: Thêm link với thuộc tính target=_blank để link được mở trong tab mới.
    var someText = "this is a text with a link www.github.com ..";
    var result = anchorme.js(someText, {"target":"_blank"});
  • VD3: Thêm link với nhiều lựa chọn hơn:
    var someText = "this is a text with a link www.github.com ..";
    var result = anchorme.js(someText, {"class":"someclassname","id":"someID","target":"_blank", "attribute-name":"attribute-property"});

Hiển thị HTML trong AngularJS

Bạn tham khảo link sau:

• https://docs.angularjs.org/api/ngSanitize
• https://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html

Các bước thực hiện:

• B1: Cài đặt angular-sanitize bằng lệnh sau:
  npm install angular-sanitize 
• B2: Trong tệp html include thư viện angular-sanitize. Ví dụ như sau:
  <script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>
• B3: Include mô đun ngSanitize vào ứng dụng app. Ví dụ như dưới:
  var app = angular.module('myApp', ['ngSanitize']);
• B4: Để tránh lỗi [$sce:unsafe], bạn thêm đoạn code sau vào ứng dụng apps:
  app.filter('to_trusted', ['$sce', function($sce){
      return function(text) {
          return $sce.trustAsHtml(text);
      };
  }]);
• B5: Khi sử dụng bạn chỉ cần bind giá trị vào thuộc tính ng-bind-html của một thẻ html nào đó là được. Ví dụ:
   

Chú ý: Trong một số bản Angular mới, đôi khi không cần bước B1, B2 và B3.

Nén dữ liệu trả về

Việc nén dữ liệu trả về client sẽ giúp giảm thời gian dữ liệu truyền từ server về client, do đó làm tăng tốc độ ứng dụng web. Để giúp server hỗ trợ việc này, bạn thực hiện như sau:

• Với Express 3, bạn thêm lệnh sau vào phần xử lý server:
  app.configure(function(){
      //....
      app.use(express.compress());
  });
• Với Express 4+: Bạn cần cài đặt thêm gói riêng bằng lệnh sau:
  npm install compression
  Sau đó thêm code sau vào phần xử lý server:
  var compression = require('compression');
  app.use(compression());

UI không cập nhật khi biến $scope thay đổi (Angular $scope variable not updating)

Đôi khi bạn gặp trường hợp biến $scope đã cập nhật nhưng giao diện HTML chưa thấy cập nhât. Cái này đôi khi mình gặp, cũng không hiểu tại sao, nhưng mình tìm ra giải pháp ở hai link dưới:

• Link 1: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
• Link 2: https://stackoverflow.com/questions/38763460/angular-scope-variable-not-updating

Cách 1: Theo Link 2 các dữ liệu hiển thị ra UI bạn phải lưu vào trong Object. Vi dụ thay vị lưu trong:
$scope.primitiveVariale
Thì bạn lưu trong object:
$scope.data = { primitiveVariale:null }

Cách 2: Theo link 1, sau khi update biến $scope, bạn gọi thêm hàm $scope.$apply();. Ví dụ:
$scope.data = { ... };
$scope.$apply();