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

Revision as of 15:45, 24 October 2018

Lập trình NodeJS

Lập trình AngularJS

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