Làm quen với Angular 2 - Zoo app - part 3 - Dependency Injection

Trong phần này, chúng ta sẽ cùng nhau tạo một service AnimalService để quản lý danh sách các con vật và nhúng nó vào AppComponent.

Ta tạo file animal-service.ts cùng cấp với app.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export class AnimalService {
animals: [];

constructor() {
this.animals = ANIMALS;
}

getAnimals() {
return this.animals;
}

addAnimal(type: String, name: String) {
this.animals.push({ 'type': type, 'name': name});
}
}

var ANIMALS = [
{ type: 'Tiger', name: 'Bobo'},
{ type: 'Dog', name: 'Mic'},
{ type: 'Elephan', name: 'Big'}
];

Read More


Làm quen với Angular 2 - Zoo app - part 2 - Form

phần 1 chúng ta đã sử dụng một vài directives cơ bản của Angular như NgFor, NgIf, NgClass và ta cũng biết rằng muốn sử dụng directive nào, ta phải khai báo directive đó cho Component. Tuy nhiên việc phải khai báo từng directive như vậy thật bất tiện. Để khắc phục điều đó, Angular 2 đã gộp các core directives vào một tập hợp là CORE_DIRECTIVES ta chỉ cần khai báo nó một lần là có thể dùng được các core directives của Angular. Trước khi vào phần 2 ta thay đổi một chút như sau:

1
2
3
4
import {Component, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

...
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],

Ngoài CORE_DIRECTIVES ra mình còn khai báo thêm FORM_DIRECTIVES, chắc hẳn là bạn đã đoán ra đó là tập hợp các directive dành cho Form của Angular.

Read More



Làm quen với Angular 2 - Tạo một ứng dụng bằng TypeScript

Angular2 hiện tại vẫn đang trong giai đoạn Developer Preview tuy nhiên mình sẽ bắt đầu tìm hiểu trước cho đến khi nó được release thì dùng luôn. Hiện tại trên trang của Angular2 thấy chúng ta có thể code bằng Javascript, TypescriptDart, nhưng xem qua các bài hướng dẫn thì mọi người có vẻ dùng Typescript phổ biến hơn. Nên mình cũng sẽ làm quen với Angular2 bằng Typescript luôn.

Trong phần làm quen này, chúng ta cùng nhau viết ứng dụng vô cùng đơn giản coi như để biết được Angular2 là cái gì, và viết nó như thế nào. Một ứng dụng Hello World.

Read More


Lowdb - DB không cần server

Từ yêu cầu cá nhân, mình cần tạo một server API giả bằng nodejs để phục vụ cho việc làm frontend. Mình có ý muốn tìm một thư viện DB nhỏ gọn, dễ cài đặt sử dụng, hỗ trợ JSON, chỉ dựa trên file text đơn giản, chứ không cần phải cài đặt server như mongoDB và nếu thao tác giống như mongoDB thì tốt.

Sau một hồi dạo quanh thì mình đã tìm thấy LowDB

Need a quick way to get a local database?

Read More


Import mysql từ file zip

Vừa rồi mình phải import dữ liệu mysql từ một file zip khoảng 700MB nhưng khi giải nén ra thì đến 4GB lận. Để import quả là không đơn giản. Và rồi cũng đã tìm được 1 cách import với chỉ 1 câu lệnh:

1
unzip -p dbdump.sql.zip | mysql -u root -p dbname
  • Câu lệnh này chỉ thực hiện được với điều kiện file zip của bạn chỉ có 1 file sql.
  • Thay root bằng user mysql của bạn
  • Thay dbname bằng tên của DB
  • Nhập password vào và chờ kết thúc.

Cách này mình tìm được từ đây: http://snippets.khromov.se/import-zipped-mysql-dumps/


Tạm biệt wordpress xin chào hexo

Như vậy là sau vài lần tìm kiếm và thử nghiệm, cuối cùng cũng đã tìm ra một cách viết blog mới để thay thế cho em wordpress. Với sở thích đơn giản, thích nghịch ngợm nên với mình wordpress tỏ ra cồng kềnh nhiều tính năng không dùng đến. Mình muốn một cách viết blog đơn giản như là dùng markdown để viết, không cần dùng cơ sở dữ liệu, tận dụng được hosting đang có.

Read More


Xử lý hình ảnh hiển thị sai hướng bằng cách xác định giá trị EXIF orientation

Trong thời gian này mình có làm một ứng dụng chat, trong đó có tính năng upload file và hình ảnh. Và mình đã gặp một vấn đề với các hình ảnh được chụp bằng điện thoại. Đó là hình ảnh bị hiển thị sai hướng, do khi chụp người dùng đã để dọc điện thoại, dẫn đến lúc hiển thị hình ảnh trên trang web, thay vì hình ảnh hiển thị thẳng đứng thì lại nằm ngang. Giống như thế này:

Orientation 6

Và công việc của mình là phải xác định được, hình ảnh đó bị sai thế nào, để hiển thị lại cho đúng.

Read More


Khởi tạo dự án AngularJS với generator-boom

Khi bắt đầu một dự án AngularJS chúng ta có rất nhiều việc phải làm như tạo cấu trúc thư mục, viết code để tự động build các file js, css, chuẩn bị code để test… Dĩ nhiên ta có thể tự mình lần lượt làm các việc đó, hoặc như trước đây, tôi tạo sẵn một thư mục dự án mẫu rồi khi nào dùng sẽ copy qua dùng lại. Tuy nhiên vẫn tốt hơn nếu như có một công cụ giúp mình làm các việc kể trên, và trong bài này tôi giới thiệu đến các bạn công cụ generator-boom, một công cụ sinh code AngularJS dành cho Yeoman.

Cài đặt generator-boom

Read More


Build your code with Gulp

Gulp is the streaming build system. Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build. I didn’t use Gulp or Grunt before. Today, I hear about it and decide to use it on my project. What I write here is not a tutorial, it just what I do with Gulp.

1. Install – NodeJS - Gulp:

To install Gulp we must have node installed. Nodejs can be installed from here http://nodejs.org/

– Gulp: We should install gulp globally

1
$ npm install -g gulp

2. Using Gulp in project First, jump to your project folder.

Read More