“Places2Go” and the MEAN Stack (II)

Let´s try to do the same that we have done in post (I) but on AWS

In my ubuntu EC2 instance I have already installed angular-cli docker image, And I have wrote about it on post Creating a Docker image with Angular2 and Angular-cli

Let´s combine all this post

Step 01: Hello World App

$ ng new places2go_v02

$ ng new places2go-v02

I will edit package.json so $ npm start runs:

$ ng serve --host 0.0.0.0 --port 4200 –live-reload-port 49153

$ npm start

ok! our angular-cli app on AWS EC2 instance

Step 02: Add Some Code : Bootstrap Navbar

This could be better to do from gitHub, but let´s do it with vim editor

Let´s add bootstrap and jquery

$ sudo npm install --save bootstrap@4.0.0-alpha.6
$ sudo npm install --save jquery
$ sudo npm install --save tether

We can also execute all three steps in only one:

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

Let´s continue:

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 we will add the snippet for the Navbar of bootsrap

That code don´t was modified from the copy paste of bootstrap sample

let´s add it to app.component.html

$ npm start

we can see that we have our first angular-cli app with bootstrap and jquery working ok

Note: This could be a good moment to talk about two-way binding and interpolation

Step 03: Add Angular Components: Home and About

Let´s add two angular components: Home and About, the easiest way to add angular components is with angular-cli command

$ ng g component <component-name>

so, lets do:

$ sudo ng g component home
$ sudo ng g component about

Our current situation:

$ tree src

and after the $ ng g component home and $ ng g component about

Let´ see the result of the generated components

Let´s see that angular-cli also edited the module to import the new components,

Let´see the selectors for the new components: <app-home> and <app-about>

Let´s add some html to the home component, in home.component.html

src/app/app.component.html

and we have the table inside the home component defined by <app-home>:

Let´s observe it, on the html source code: although <app-home> was empty at first, angular at runtime change the content by the one of home.component.html

Is working the about component? to use the about component we have two options: add <app-about> tag in somewhere of the SPA (single page application) like we did with the home component. Or, add the routes module that we will see on next section:

Step 04: Add Routes to navigate the project

To add Routes we will edit app.modules.ts to following code:

src/app/app.module.ts

src/app/app.component.html

route /about is working

route / is working

I should add the fallback routes…

Ok: I will stop the post at this point, and I have the angular-cli also running on AWS EC2 ubuntu instance.