Khóa học Node.js "Học 1 làm tất"

Đến bao giờ mới mở khóa học tiếp theo hả admin ơi?

read more
Scraping dữ liệu Website với Node.js

@apollovn_91 Trong trường hợp Nganguyen đang nói request là đúng rồi bạn.
Còn API nôm na là khi bạn publish data cho người # sử dụng.

read more
Cần giúp đở về sorket io socket.emit gửi đến một client

Không biết bạn đã fix được chưa, thử cách này xem sao:

var app = require(‘express’)(),
http = require(‘http’).Server(app),
io = require(‘socket.io’)(http); http.listen(1379, function(){ console.log('listening on :1379'); }); use var socket = io(); trong html file

ps/mà comment không thấy chỗ chèn code đâu :| đành viết đại vào vậy

read more
Socket.IO Căn Bản

@cuongpc4rum Tôi chưa thử websocket của android với Socket.IO. Nhưng trước đây tôi có dùng một thư viện [1] để server tương tác với các client là android (sử dụng websocket).
Thư viện này sử dụng Mavel Central để build, bạn chịu khó đọc cách build nhé. Build xong bạn sẽ có một thư viện SocketIO-Client.jar. Bạn add vào thư viện của project android và sử dụng theo hướng dẫn trong link github.

Chúc bạn thành công!
[1]. https://github.com/nkzawa/socket.io-client.java

read more
Tìm hiểu UI-Router trong AngularJS

upload-ae969994-5733-4ccf-9fe9-2962f845c984.jpg

Trong bài trước mình đã giới thiệu sơ lược về Directive trong Angular,Bạn có thể xem tại đây

UI-Router

Angular cung cấp 1 cách tuyệt vời để làm 1 SPA (single page application).Khi tạo ra 1 SPA ,bộ định tuyến (Route) là cực kỳ quan trọng,bạn muốn trang của mình chỉ cẩn load những dữ liệu tại 1 view và chỉ thực hiện controller trong view đó mà không cần tải lại cả trang web thì đây có lẽ 1 trong những giải pháp tuyệt vời

Ngay bây giờ,chúng ta bắt đầu tìm hiểu 1 cách đơn giản nhất để sử dụng UI-Router

I,What is Angular UI-Router

UI-router là 1 “routing framework” được xây dựng bởi đội ngũ AnguarlUI,nó cung cấp 1 cách khác biệt hơn so với ngRoute của Angular.Ui-router tổ chức dữ liệu thành từng phần theo từng $state (đặc biệt xây dựng 1 multi views) theo từng truy vấn URL.UI-router cho phép bạn xử lý nhiều thao tác với route 1 cách cực kỳ dễ dàng,và đôi khi nó không quan tâm đến URL của bạn mà bạn vẫn có thể thực hiện xử lý ở các view con

II,Get Started Bower: by running $ bower install angular-ui-router npm: by running $ npm install angular-ui-router Component: by running $ component install angular-ui/ui-router

Sau đó bạn chèn file angular-ui-router.js vào trong file index.html của bạn
file js truyền DI : ‘ui.router’ vào trong module

<!doctype html> <html ng-app="myApp"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="js/angular-ui-router.min.js"></script> <script> var myApp = angular.module('myApp', ['ui.router']); </script> ... </head> <body> ... </body> </html>

Chú ý rằng gọi ui-router chỉ khi angularjs được load xong.

Chúng ta sử dụng <div ui-view></div> thay vì <div ng-view></div> trong ngRoute

Khi chúng ta tạo 1 link với ui-sref , ui router sẽ tự generated sang href mà bạn muốn trỏ đến 1 cách bình thường

Trong file app.js

var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); // Mọi đường dẫn không hợp lệ đều được chuyển đến state home $stateProvider .state('home', { // Định ngĩa 1 state home url: '/home', // khai báo Url hiển thị templateUrl: 'home.html', // đường dẫn view controller: function($scope) { // Khai báo 1 controller cho state home $scope.Name= ['Phạm', 'Minh', 'Tài']; } }) });

Khi gọi đến state home ta sử dụng ui-sref :

<a ui-sref="home" class="btn btn-primary">Home</a>

Bây giờ chúng ta sẽ khai báo các state con của state home và cách sử dụng:

$stateProvider .state('home', { // Định ngĩa 1 state home abstract : true, // khai báo có state con url: '/home', // khai báo Url hiển thị templateUrl: 'home.html', // đường dẫn tới template home controller: function($scope) { // Khai báo 1 controller cho state home $scope.Name= ['Phạm', 'Minh', 'Tài']; } }) .state('home.main',{ url: '', // để rỗng mặc định khi view home được load sẽ gọi tới template main đầu tiên templateUrl: 'main.html', // đường dẫn tới template main controller: 'MainCtrl' // gọi xử lý controller khi state được gọi }) .state('home.detail',{ url: '/home/detail/:id', // khai báo tham số ID trên url templateUrl: 'detail-home.html', // đường dẫn tới template detail controller: 'DetailCtrl' // gọi xử lý controller khi state được gọi })

Trong html ta ở file home.html để hiện thị các state con trong nó ta cũng cần cặp thẻ <div ui-view></div

Để di chuyển tới 1 state home.detail có ID ta khai báo :

$state.go('home.detail',{id : _id}) // ID của detail sản phẩm...

Để lấy tham số ID trên url ta thực hiện trong file js:

var _id = $stateParams.id // id này là tham số được gọi tại url home.detail

Để active 1 link ui-sref khi được click và trỏ tới state ta sử dụng cú pháp

<a ui-sref="home" ui-sref-active> Home </a>

Xây dựng multiple views :

<div class="row"> <!--View thứ nhất --> <div class="col-sm-6"> <div ui-view="columnOne"></div> </div> <!-- View thứ hai--> <div class="col-sm-6"> <div ui-view="columnTwo"></div> </div> </div>

file js:

... .state('about', { url: '/about', views: { // View chính của state about '': { templateUrl: 'partial-about.html' }, // Định nghĩa View thứ nhất sẽ được hiện thị không có controller 'columnOne@about': { template: 'Look I am a column!' }, // Định ngĩa hiển thị view thứ 2 với 1 controller 'columnTwo@about': { templateUrl: 'table-data.html', controller: 'aboutController' } } //viewName@stateName là quy ước nên được sử dụng trong multiple }); ... Resolve trong ui-router

MÌnh thường sử dụng cách này để tải dữ liệu trước khi vào app,dưới là 1 ví dụ mình sử dụng :

.state('main', { url : '/main', templateUrl: 'views/main.html', controller: 'MainCtrl', resolve: { 'AppLoad': ['appData', '$q', function (appData, $q) { var AppLoad = $q.defer(); // sử dụng promise //appData là 1 service mình định ngĩa để lấy dữ liệu appData.load().then(function (resp) { AppLoad.resolve(true); }, function () { AppLoad.reject(false); }) return AppLoad.promise; }] } })

Hẹn gặp lại Fan Angular trong những bài chia sẻ tiếp theo,rất mong được sự góp ý và thảo luận của mọi người tại đây.

read more
Directive trong Angular.js

upload-1dbab5d8-35ac-418f-9ad7-b1cdd855e2c6.png

Hi ! xin chào mọi người,đến hẹn lại lên,chính xác là không ai hẹn mà vẫn lên :D.Trong bài viết này mình xin giới thiệu về Directive trong AngularJS

I,What are Directive ?

Directive là 1 cặp thẻ HTML mở rộng do người dùng định ngĩa,nó làm nhiệm vụ mô tả dữ liệu,bạn đã làm việc với AngularJS cũng có thể biết 1 số cặp thẻ Directive kinh điển như ngApp (ng-app),ngController (ng-controller),ngRepeat(ng-repeat)..v.v

Directive được sử dụng để tùy chỉnh phần tử HTML và đơn giản hóa với thao tác DOM,Chúng ta có thể thay đổi đồng thời can thiệp vào DOM, bằng cách thêm chức năng tùy chỉnh, như datepicker một hoặc một widget autocomplete. AngularJS đi kèm với thiết lập riêng của mình được xây dựng trong hành động, cũng như khả năng để thêm nhưng cái của riêng bạn định ngĩa

Bản chất chúng ta dùng Directive là để Js của chúng ta sử dụng lại (Directive có thể hoạt động độc lập như module).Mỗi 1 Derective cần có template và lấy dữ liệu ở scope và thông qua service link và compile để render thành 1 giao diện mong muốn.Trong Directive bạn cũng có thể định ngĩa hay sử dụng controller.

II,Why are directives used in AngularJS?

Có quá nhiều điểm mạnh mà Directive làm được,sự phong phú chính là do bạn tự xây dựng.Việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML , code HTML nhìn sẽ gọn gàng và sáng sủa hơn.

Ví dụ : Bạn muốn tạo 1 datepicker tại thẻ input bạn sẽ phải làm như thế này:

<input id="datepickerElem">

và khi đó bạn gọi :

$('#datepickerElem').datepicker()

Vậy từ 1 định nghĩa Directive là <datepicker> bạn có thể sủ dụng ở bất kỳ chỗ nào,bất kỳ nới đâu bạn muốn

III,How to use directives in AngularJS?

Sử dụng Directive là khá dễ dàng,bạn chỉ cần đặt ở bất kỳ đâu,tùy thuộc nào cách xác định cho mục đích gì!

Ví dụ này được sử dụng lại ở trên cho cách khai báo :

<input datepicker> or <datepicker>

Cấu trúc của 1 Directive:

var myModule = angular.module(...); myModule.directive('namespaceDirectiveName', function factory(injectables) { var directiveDefinitionObject = { restrict: string, priority: number, template: string, templateUrl: string, replace: bool, transclude: bool, scope: bool or object, controller: function controllerConstructor($scope,$element,$attrs,$transclude), require: string, link: function postLink(scope, iElement, iAttrs) { ... }, compile: function compile(tElement, tAttrs, transclude) { return { pre: function preLink(scope, iElement, iAttrs, controller) { ... }, post: function postLink(scope, iElement, iAttrs, controller) { ... } } } }; return directiveDefinitionObject; }); Restrict:Được khai bao để Directive sử dụng như thế nào,nó có thể là element,attrbute,class,comment hay bất kỳ cách kết hợp nào (e.g: “EA,AC,AM…”) Priority:Liên quan đến thứ tự thực hiện directive trong 1 DOM element(trong trường hợp bạn có nhiều directive mà việc sử dụng phải theo 1 thứ tự thì điều này là cần thiết.Số càng lớn sẽ được ưu tiên trước) Template: kiểu string,nơi đây để viết template của bạn (không được sử dụng cho templateURL) TemplateUrl:kiểu string,1 template được gọi từ url Replace:True thay thế phần tử hiện tại,nếu false không thay thế lúc này sẽ thêm vào phần tử đó các phần tử khai báo trong directive Transclude:cho phép bạn di chuyển template bên ngoài vào bên trong của directive để làm việc. scope :tạo scope mới bên trong directive không kế thừa scope bên ngoài ( scope:{}: mặc định false, ngoài ra scope { } :namescope : ‘&’ thao tác với function, namescope : ‘@’ nhận vào là 1 string dữ liệu có thể thay đổi theo {{}},namescope:’=’ : dữ liệu chỉ được nhận từ 1 thành phần bên ngoài) Controller: tạo 1 controller để xử lý công việc Require:được sử dụng để gọi 1 thành phần bên ngoài Link:có phạm khi hoạt động trong directive.tại đây sẽ làm việc trực tiếp với DOM element Compile : thay đổi DOM template cho những directive là bản copi như việc bạn sử dụng ng-repeat.

Nào!!! Chúng ta cùng bắt đầu sử dụng Directive:

<!DOCTYPE html> <html> <head> <meta name="description" content="[add your bin description]" <meta charset=utf-8 /> <title>Directive</title> </head> <body ng-app="myApp"> <my-directive> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> <script> var app = angular.module("myApp",[]) .directive("myDirective",function(){ return { restrict:'E', template:'<p>Pham Minh Tai</p>' } }) </script> </body> </html>

Ta khai báo 1 Directive có tên là “myDirective” và việc gọi nó ra chỉ cần cặp thẻ <my-directive> (thế là chúng ra có thể dùng thẻ html này ở đâu tùy thích,ở đây sử dụng tên khi gọi được viết theo kiểu “camelCase”).

1.Restrict (string) có 4 kiểu là:

‘A’ : Attribute (nếu như bạn muốn dùng nó là Attribute <div my-directive></div>) ‘E’ :Element sử dụng như ở trên ‘C’ : class (sử dụng như 1 class <div class=”my-directive”></div>) ‘M’ : Comment (bạn sử dụng nó như là 1 chú thích bất kì <!—my-directive —!>) Bạn cũng có thể sử dụng 1 lúc tất cả restrict:’ECMA’

2.Template: (string)

Có 2 kiểu template một là template như khai báo ở trên,hai là dử dụng templateUrl để trỏ tới 1 template ở đâu mà bạn muốn sử dụng template đó.

Đôi khi ta cũng có thể dùng cách sau để gọi 1 templateUrl:

Ví dụ templateUrl sử dụng $templateCache:

<!DOCTYPE html> <html> <head> <meta name="description" content="[add your bin description]" <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-app="myApp"> <my-directive></my-directive> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script> <script> var app = angular.module("myApp",[]) .run(function($templateCache){ $templateCache.put('fileName.html','<div>hello word!!!</div>') }) .directive("myDirective",function($templateCache){ return { restrict:'E', templateUrl : 'fileName.html' } }) </script> </body> </html>

Ví dụ sử dụng templateUrl với file đã tạo:
Index.html:

<div ng-controller="Ctrl"> <my-directive> </div>

File scipt.js:

var app = angular.module("myApp",[]) .directive("myDirective",function(){ return { restrict:'E', templateUrl:'template.html' } }) .controller("Ctrl",function($scope){ $scope.dataUser = {name:"Tai",pass:"123"} })

File template.html:

User: {{dataUser.name}} - Pass: {{dataUser.pass}} Kết quả chạy chương trình : “User: Tai - Pass: 123”

Chúng ta cũng có thể tạo nhiều Controller để hiện thị và mỗi khi gọi 1 controller nhớ gọi ng-controller với tên controller khai báo nhé. Nhưng câu hỏi đặt ra là chúng ta cần khai báo 10 hay 100 hay 1000 controller thì khai báo bằng đó controller à??? Đó không phải là 1 giải pháp tốt.Có cách nào để 1 controller hoạt động mà vẫn sử dụng các tham số khác nhau không?

Từ đây Angular Directive sinh ra 1 khái niệm Isolate Scope (dịch nôm na là:cô lập phạm vi)

sopce : object or boolean

Chúng ta sẽ đi vào ví dụ cụ thể:

File index.html:

<div ng-controller="Ctrl"> <my-directive info="user1"></my-directive> <br> <my-directive info="user2"></my-directive> </div>

Mỗi 1 Directive ta khai báo thêm 1 attribute chứa thông tin data cần tải (dữ liệu từ info này sẽ được Directive sử dụng)

Script.js

var app = angular.module("myApp",[]) .directive("myDirective",function(){ return { restrict:'E', templateUrl:'template.html', scope:{ dataUserinfo: '=info' } } }) .controller("Ctrl",function($scope){ $scope.user1 = {name:"Tai",pass:"123"} $scope.user2 = {name:"Duyen",pass:"223"} })

Ở đây có 2 sự khác biệt đó là trong controller khai báo 2 scope user1 và user2 (đây chính là thông tin mà directive sẽ cần để lấy),công việc này do sopce có object dataUserinfo được gán từ attribute bên ngoài (“<my-directive info=’user1’>”) bằng cú pháp
scope : {dataUserinfo = info}

Với mỗi User được lấy từ attribute sẽ có cách gọi data là dataUserinfo.name, dataUserinfo.pass

Cụ thể :

User: {{dataUserinfo.name}} - Pass: {{dataUserinfo.pass}}

Đôi khi ta có thể viết như sau:
scope: { info : ‘@’ }

Cú pháp này sẽ hiểu lấy attribute là tham số truyền vào.Ví dụ sẽ có ở phần dưới
Kết quả chạy:

User: Tai - Pass: 123
User: Duyen - Pass: 223

Bài viết trên còn khá nhiều thiếu sót,mong anh em chém mạnh tay…thân ái và quyết thắng

Hẹn gặp lại mới người trong bài hướng dẫn tiếp theo ui-router

read more
Làm sao để gọi file mongo.exe trong project của Webstorm

bạn thử thêm đường dẫn đến mongo.exe vào environment variables PATH xem

read more
Redis Là Gì?

@tungnguyen Bạn có thể cho mình một ví dụ về cái này được không? Cám ơn nhiều nhé :-)

Điểm khác biệt dễ nhận thấy của Redis là: Key là một string nhưng value thì không giới hạn ở một string mà có thể là List, Sets, Sorted sets, ….

read more
Sử Dụng Công Cụ Chrome DevTools

Chào cả nhà, hôm nay đưa 1 bài viết hữu ích cho những bạn rất cần nó. Chắc hẳn chúng ta đều biết Extension DevTools có sẵn Google Chrome (F12).
Nhưng nhiều bạn ở đây chưa dùng hết được khả năng Tools đưa lại. Đặc biệt là trong vấn đề xử lý hiệu năng và debug javascript.

Website : http://discover-devtools.codeschool.com
Giới thiệu : Là sự kết hợp giữa Code School và sự tài trợ Google, chương trình học cách sử dụng công cụ DevTools của Chrome.

Chúng ta sẽ có 7 level như sau :

Level 1: Bắt đầu làm quen và cơ bản DOM và Styles
Level 2: Nâng cao DOM và Styles
Level 3: Làm việc với Console
Level 4: Làm việc JavaScript
Level 5: Nâng cao hiệu suất Network
Level 6: Nâng cao hiệu suất Website
Level 7: Theo dõi Memory

TungNguyen

read more
Shop bán hàng full nodejs vietcoin.com

@newbie Bạn tham gia khóa học đi :) !!! Tự mình làm luôn

read more