My Angular App with Angular-cli (I)

I will a sample Angular Full Stack App from scratch, with angular cli. This is a to-do list of cities that I would like to know: “Places2Go… an the Mean Stack”

So, lets start:

#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

but, I am not using the ng2-bootstrap directive to navbar… How it is?

ng2-bootstrap don´t have a nav-bar component

what about the new ng-bootstrap?neither have implemented the navbar component….

Ok! I will stop the post there, the source code is in GitHub with three intermediate tags v1.0.1, v1.0.2 and v1.0.3

Let´s see in other post … I will following with angular and angular-cli

Next Steps …

a) Different Components: 1. Navbar + Table + Form

b) Can we build an component to iterate over a json col to generate the table?

c) Two binding with the form ?

c) Etc …

References

Some interesting links

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

Show your support

Clapping shows how much you appreciated Pablo Ezequiel’s story.