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

Revision as of 07:12, 28 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 is a superset of ES6 and it’s backward compatible with ES5. Angular has also benefits of ES6 like: lambda operators, iterators or reflection’s mechanism.
• Controllers vs components:

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

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();