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

From CodeForLife
Jump to: navigation, search
Line 18: Line 18:
 
=== '''Tự động thêm link vào URL trong một đoạn văn bản''' ===
 
=== '''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 https://github.com/Jpja/CounterTools/tree/master/lib/anchorme]
  
−
'''Hiển thị HTML trong AngularJS'''
+
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:<br/> <span style="color:#0000FF;">''<script src="anchorme.min.js"></script>''</span>
 +
*'''B3''': Trong code javascript, gọi hàm anchorme.js là xong.
 +
**'''VD1''': Tự động thêm link bình thường<br/> <span style="color:#0000FF;">''var someText = "this is a text with a link www.github.com ..";<br/> var result = anchorme.js(someText);''</span>
 +
**'''VD2''': Thêm link với thuộc tính target=_blank để link được mở trong tab mới.<br/> <span style="color:#0000FF;">''var someText = "this is a text with a link www.github.com ..";<br/> var result = anchorme.js(someText, {"target":"_blank"});''</span>
 +
**'''VD3''': Thêm link với nhiều lựa chọn hơn:<br/> <span style="color:#0000FF;">''var someText = "this is a text with a link www.github.com ..";<br/> var result = anchorme.js(someText, {"class":"someclassname","id":"someID","target":"_blank", "attribute-name":"attribute-property"});''</span> 
 +
 
 +
=== '''Hiển thị HTML trong AngularJS''' ===
 +
 
 +
Bạn tham khảo link sau:
 +
 
 +
*[https://docs.angularjs.org/api/ngSanitize https://docs.angularjs.org/api/ngSanitize]
 +
*[https://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html 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&nbsp;'''angular-sanitize''' bằng lệnh sau:<br/> <span style="color:#0000FF;">''npm install angular-sanitize''</span>&nbsp;
 +
*'''B2''': Trong tệp html include thư viện '''angular-sanitize'''. Ví dụ như sau:<br/> <span style="color:#0000FF;">''<script src="node_modules/angular-sanitize/angular-sanitize.min.js"></script>''</span>
 +
*'''B3''': Include mô đun&nbsp;'''<code>ngSanitize</code>&nbsp;'''vào ứng dụng '''app'''. Ví dụ như dưới:<br/> <span style="color:#0000FF;">''var app = angular.module('myApp', ['ngSanitize']);''</span>
 +
*'''B4''': Khi sử dụng bạn chỉ cần bind giá trị vào thuộc tính&nbsp;'''ng-bind-html''' của một thẻ html nào đó là được. Ví dụ: <div>&nbsp;</div> 
 +
 
 +
=== '''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:<br/> <span style="color:#0000FF;">''app.configure(function(){<br/> &nbsp; &nbsp; //....<br/> &nbsp; &nbsp; app.use(express.compress());<br/> });''</span>
 +
*'''Với Express 4+''': Bạn cần cài đặt thêm gói riêng bằng lệnh sau:<br/> <span style="color:#0000FF;">''npm install compression''</span><br/> Sau đó thêm code sau vào phần xử lý server:<br/> <span style="color:#0000FF;">''var compression = require('compression');<br/> app.use(compression());''</span>
  
 
&nbsp;
 
&nbsp;

Revision as of 04:11, 12 April 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:

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: 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ụ:
     

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