#AngularJS

Starting a Miroservices Project with NodeJS and Docker

If you are planning to build a project with Microservices pattern and DevOps culture, you can use the source code here.

In this source code, I built two services, one for Frontend AngularJS and Bootstrap, one for Backend ExpressJS and Mongoose. All services in this project is dockerized and pushed to Docker Hub. You can read Dockerfile in each service for further details. To create a new service, you just create a new directory, writing source code for that service and update docker-compose.yml file.

Run

The Orchestration of Project is written in docker-compose.yml file. So it is so easily to understand and run the project.

Using Vagrant and Virtualbox

We also start from Virtual Machine layer with Vagrant.

After that, you can access the application via link: http://172.20.20.20

You can read Vagrantfile to understand what we need to prepare for VMs.

System Architecture

With the source code, we will have a system architecture as below

Microservices DevOps Starter Project

Microservices DevOps Starter Project

 

Monitor & Logs

This starter project also fully supports monitor by using Telegraf, InfluxDB, Grafana and Kapacitor. Supports centralizing Logs with fluentd, Kibana and Elasticsearch.

Contents

Part Title Git Tag
1 Starting with ExpressJS 1.0
2 Logger with Winston 1.1
4 Config Management with Node-Config 1.2
5 Building Create User API 2.1
6 Adding Swagger Documents 2.2
7 Building Login API 2.3
8 Building Get User List/Detail API 2.4
9 Authorization all APIs 2.5
10 Unit Test 2.6
11 Building Config API 3.0
12 Using Cache 3.1
13 Using Queue 3.2
14 Starting AngularJS with Yeoman 4.0
15 Config Management for AngularJS 4.1
16 Building Login Page 4.2
17 Building List User Page 4.2
18 Pagination with AngularJS and Bootstrap 4.3
19 Multiple Languages 4.4
20 AngularJS Unit Test 4.5
21 Dockerize Aplication 5.0
22 Orchestration with Docker Compose 5.1

Upload images using AngularJS and NodeJS

This post will show you how to upload images using AngularJS and NodeJS.  In the client-size (AngularJS), we use ngFileUpload plugin. And in the server-side, we use ExpressJS 4.0.

At the first, we create a upload file service in the client-side:

And In your Angular Controller, you inject Files service and write the upload function as below:

In the server side, you need to create a upload API. And the post “How to upload file with NodeJS and ExpressJS” will help you do that

Starting to build a Admin Site with AngularJS and NodeJS

I would like to announce that I started building a simple Admin Site from AngularJS and NodeJS.  With this seed project, I hope that It will help you easily create a Admin Site.

e43c716c-5df4-4b2d-b208-a36ff032cb17-medium

The man who does more than he is paid for, will soon be paid for more than he does

Util now, The development still have not yet finished. I will update features in the free time and write the document to make it perfect day by day.

The features are supported or will be supported includes:

  • Login Page
  • Registration Page with email notification
  • User Profile
  • User Custom Field
  • Terms and Taxonomies
  • Privileges
  • Multiple Languages
  • CI/CD

Demo link at http://angular-admin-seed.sonnguyen.ws/

Github Source Code at:  https://github.com/thanhson1085/angular-admin-seed

I really hope that this open source will become helpful for all of you who use it.

CasperJS test lazyload

As you know,  CasperJS/PhantomJS is perfect for automation test in client-side. And nowaday, you usually develop lazyload function that means when you pull the scroll of window or element (div html tag) to the bottom of page, the page will automatically load more data and bind it to the view (table or grid). Along with it, we need write unit test function to cover fully user experiences.

CasperJS test lazyload

Life is what we make it, always has been, always will be

With PhantomJS/CasperJS, It is quite easy, just take a look to the source code below. You just need 2 main functions of CasperJS is scrollToBottom and waitFor to implement it.

 

AngularJS, Set Image always in the center of DIV

Will have a time you need set email always in the center of DIV tag, even it is horizontal or vertical image. So now, I shared a angularjs directive that will do it for you. In this code, It will cacth event image loaded and check image is horizontal or vertical and set a suitable margin and position.

 

AngularJS and Scroll lazy load directive

Lazy load is a familiar task when you work with web application. For example,  when you scroll your application to the bottom of page, you want to load more data from server side. This will make a better user experience and app performance.

In angularJS, you should create a directive that will catch scroll event and call load more data function in controller when user scroll to bottom of page.

loadMoreData() function is wrote in Controller that will handle task load more data from server and bind to $scope

 

Store data to SQLite in AngularJS PhoneGap

When you work with a phonegap application, sometimes you need develop a work-offline mode for your app. In this case, SQLite is  a good choice. You can use SQLite to store data you loaded from server-side. If your device lost internet connection, application will load data from SQLite firstly.

Store data to SQLite in AngularJS PhoneGap

Common sense is not a gift, It’s a punishment. Because you have to deal with everyone who doesn’t have it.

To implement, you need install SQLite phonegap plugin for your app. And then, you write a service to handle get/set/remove data in SQLite. And now, I will show you a script that run in my app that uses angularjs, coffee script.

The below is coffee script that implement a factory to get/set/remove cache to SQLite

And DbCache factory should be injected to factories used to load data.  The below is my way:

– Load from SQLite cache firstly

– If Cache is empty,  use $http to load data from server-side

Code example:

 

AngularJS change image style after loaded

Sometimes you need place image at center of div tag. The script below will help you calculate the size of image and change margin-top to set image into right position.

It is AngularJS and CoffeeScript

 

Fix “Position Fixed” in Phonegap IOS App

When I build a Phonegap App on IOS that has header and footer with “position fixed”. Everything works well on web version, and I start to test IOS app version, it seems work well too. But a problem orcurs when virtual keyboard opens and close, then the layout breaks (“position fixed”  of header and footer does not work). I took 2 hours to research and google. Finally, I work out a solution, it is quite simple. I just set “position static” for header footer when virtual keyboard close (input blur event) and set  a time out about 200 miliseconds to change back “position fixed”, the layout will be perfect again. The below is my code, you will be easy to understand it if you ever work with angularjs, coffeescript

AngularJS Datetime Format

When you use angularJS to build an app at client-side, a issue frequently orcur is datetime format.  My post will share with you the way that angularjs support you customize datetime format.

– Customize datetime format in controller (AngularJS):

Note: Please do not forget to inject $filter to your controller

– Customize datetime format in views (AngularJS):

Note: item_date is datetime with microsecond unixtimestamp format. E.g, 1288323623006

Actually, you can use raw javascript to customize your datetime format as the below way:

But my advice for you is if your project use AngularJS, you should not use raw javascript to cutomize datetime format, because in some cases, it will not work on Safari browser.