“Places2Go” and the MEAN Stack(I)

Let´s write a sample Full Stack App from scratch with Angular, Mongo, Express and Node.js: the well known MEAN Stack… The app is a to-do list of places that I would like some day have the possibility to visit …. but, in the meanwhile, let´s have fun writing some code and doing some trips on the api of google maps powered by this echosystem based on Javascript!

So, lets start, with “Places2Go… an the Mean Stack”

Source Code

The Full Source Code is available on GitHub:

https://github.com/Pabloin/mean-stack-talk

#01 Working Dir

Our working in Github and local

#02 Setup

Create the project with angular-cli

$ ng new places2go-v01

and the result is:

And with only a command we have a lot! A ready to use project with

  • package.json: May be the most important file … or at least the first one that you shoul watch: we can see dependences and run commands

The .angular-cli.json file with the indication what are the main files:

Let´s observe that index.html don´t have any reference to start the angular javascript, that is because when we run with ng serve from angular-cli the main class main.ts with the indication about how to start angular…

Other option could be include various of the angular javascript in the head. But I am following the angular-cli way

#03 Run empty project

Let´s run the empty project

$ ng serve

#04 Start Coding — Ideas

The app is about cities that I would like to visit, so, the most natural is create a “City” model class

At this point I have three options:

  • Start coding from backend (i.e.: 1. Server folder with the api rest in nodejs with express and mongose with the city schema, it could be an standalone app. 2. Then write the service component in a service folder in the angular app to connect to the api rest, do unitary tests and 3. Integrate the service with the front components / MVC of the angular app). It is usually the way I like to work because you understand what the data is.
  • Other option is edit the components generated by angular-cli on the template project… I will do it…
  • Other option is build the front components against mocks objects, and after that replace the mock by a real object. There is a good video of John Papa on https://www.youtube.com/watch?v=WAPQF_GA7Qg&t=92s that is working in this way. By the way, in the video Jhon Papa use the snniptes of visual stode code (from https://github.com/johnpapa/vscode-angular2-snippets), I am use atom, and I would use with the same idea the following extension https://atom.io/packages/angular-2-typescript-snippets:

#04 Start Coding — Target

a) Add an background image to the hello page

I will copy an image to assets/images/bg.jpg and edit the main styles.css with:

Background:

b) Add particles js library

This just consist on a couple of javascript an a div tag, based on https://github.com/VincentGarreau/particles.js

After a little test, it is not so easy in angular2 add such kind of javascript to the angular app… so, at least, and just for test, i copy the lib to a new page outside

particle page

c) Open Browser with a node launcher

I will make a launcher to static want just some static content: first node will start a server with express and then node will start the browser to an express address (opn library).

To open the before page without open angular app:

$ npm install opn -save

$ npm install express -save

And we can see the static express server and the invocation to the browser

node launcher

Let´s tag it on github

$ git tag v1.0.0

$ git push origin v1.0.0

We can observe that this tag include all the repo, no only the app04 with the version that I was working on….

#05 Start Coding — Target Bootstrap

First I have installed the following plugin for better use of bootstrap in Atom

Also, because I am writing with Angular Cli, I will also use/install the following “cli” for angular

“NG Bootstrap — Angular directives specific to Bootstrap 4

Install ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

I will Build a template with bootstrap 4: I could write it from scratch, or I could use a design tool: I will use http://www.layoutit.com/ and this tool generate templates with Bootstrap 3, after that I would like to have bootstrap4, so I should convert the source code with the online tool http://demo.bootstraptor.com/bootstrap4/

Note about Responsive design with flex:

With Grid:

In bootstrap you have to think in twelve rows:

With Flexbox:

Another approach to responsive design (If I am not wrong, flexbox was for v4)

Let´s start:

Let see some bootstrap4 plain html code: It was only simple copy&paste from the official tutorial, and official components. (on github: https://github.com/PabloEzequiel/MEAN-Stack/blob/master/app04/Places2Go-and-the-MEAN-Stack/places2go-v01/src/assets/bv1/boot1.html)

And the result

Bootstrap 4 basic components

This was the v1.0.1 in GitHub: Static HTML design

From the source html bootstrap code, we notice that we have imported two JS files at the end on the file: jquety and bootstrap.js

In the simple page that we have built, the only components that need it are the alert success o danger, not else.

#06 Start Coding — Target Bootstrap from angular-cli

Intermedian steps:

a) Let´s add Navbar

The easy way is to add the html on the “app.component” and a CDN bootstrap file with the css to the index.html

Thing to improve: Navbar with color dark, and the bootstrap css local to the app instead of CDN.

Bootstrap on Angular

I have two possibilities with angular bootstrap: https://github.com/valor-software/ng2-bootstrap that is used in the Any-Theme and I looks that have better doc and the https://github.com/ng-bootstrap/ng-bootstrap the one what I have already installed

Option 1: ng-bootstrap package

I will follow https://ng-bootstrap.github.io/#/getting-started

$ npm install --save @ng-bootstrap/ng-bootstrap

also I shoul install bootstrap 4:

$ npm install --save bootstrap@4.0.0-alpha.6

Everithing looks ok… but the result…

Option 2: ng2-bootstrap package

The ng2-bootstrap package was used by the any-theme template

  • open src/app/app.module.ts and add
import { AlertModule } from 'ng2-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
...
})
  • open angular-cli.json and insert a new entry into the styles array
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.js"],

Ok! let´see that ng2-bootstrap work:

In github the version 1.0.2 have the changes of the integration of Angular2 with Bootstrap

A good explication about how to install bootstrap on angular cli, is with https://www.npmjs.com/package/angular-cli is said how to edit angular-cli.json to include bootstrap and jquery dependences.

I have changed the navbar version to one better, also with bootstrap (source code in http://codepen.io/PabloEzequiel/pen/WpQoLK?editors=1000) the problem with this version in angular2 is that when you resize the browser, the menu don´t do the drop down. The reason is that I should integrate jQuery, ant it is a little contradiction because we should not use jQuery with angular … Let see how we are going to integrate it:

Add jQuery to Angular

$ npm install --save jquery

After that we will add it to .angular-cli.json

"scripts": ["../node_modules/jquery/dist/jquery.js","../node_modules/tether/dist/js/tether.js","../node_modules/bootstrap/dist/js/bootstrap.js"],"styles": ["../node_modules/bootstrap/dist/css/bootstrap.css","styles.css"],

and $ ng build and $ npm start the navbar on angular app works!

ok! we have reach the goal to have navbar working on angular2 with an angular-cli installation. It implied many steps, for example to include bootstrap and jquery to the angular-cli.json to the included in the dist folder

Part II: Add a New Component

We will create one with angular-cli

$ ng g component home

In green we can see the files created by this commands:

Let´s observe, home folder with all typescript, html, css, test where generated,

Let´s add the <app-home> tag for the new component:

Let´s add <app-home> for the home component:

And it is working with the routes

http://localhost:4201/home

And http://localhost:4201/about

Let´s see the main changes in the angular2 app to incorporate routes:

Ok, we have the route enabled in our web application.

I will stop the post at this point, and the next should be about “services”

References

Source Code:

Some interesting links

https://github.com/ng-bootstrap/ng-bootstrap

#cloud . #mobile ~} Sharing IT while learning It! ... Opinions are for my own