1. Build Better Apps
with MEAN

2. MEAN
Scaffolding
Sample- App
Agenda

3. So why MEAN?

4. Why MEAN?
MongoDB usually acts as the database for your application, in case you need to persist data. It's where we store records.
ExpressJS is a web framework for nodejs, usually used as a backend for web apps in the MEAN stack.
Angular is usually the client side MVC web framework. In this case, we will be using Angular 2.*.
NodeJS powers express, and will be the layer our server run on.
Angular and web development == awesome

5. Scaffolding

6. Angular CLI
The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
A command line interface for Angular.

7. Bootstrapping the App $ npm install -g angular-cli $ ng new mean-app
This will scaffold an Angular 2 app and install all the dependencies. 
To run $ ng serve and hit

8. Express

9. Install Dependencies $ npm install --save express body-parser
Now create a file server.js and a folder server in the root of our angular project.
The server.js file will have the server code, that will point to the server folder.

10. Server.js
This code sets up a simple express app, with an /api route and all other routes are directed towards the dist/index.html page.
To catch all route, denoted with *, MUST come last after all other API routes have been defined.
The /api route points to a file ./server/routes/api.js.

11. Server.js

12. api.js

13. Build Since the route is pointing to dist/index.html, we need to
do a build of the angular app.
$ ng build $ node server.js Now hit or

14. Server Data
Let's mock up some data for three route endpoints. We'll call the mock api to respond with some data.
Update the api.js
For making http requests.
$ npm install --save axios

15. Update Api.js
Now hit

16. Angular Route, Component
We'll add an angular component, then add a route that display this component's template.
$ ng generate component posts
This adds a new folder in the src/app directory, called posts.
Also imports the generated PostComponent in the src/app/app.module.ts file, and adds it to the declarations property of

17. Add Routes
We are simply telling our router that whenever the root route / is visited, redirect to /posts. We then declare the /posts route.
Add a router-outlet where the route should be rendered. We'll add this in the src/app/app.component.html.
$ ng build && node server.js
Going to  redirect you to  based on the instructions we gave to our router.

18. Add Route

19. Router Outlet

20. Connect Route to Express
$ ng generate service posts
Recommends defining a provider or service to handle the http calls.
Creates a posts.service.ts in the src/app directory. We then need to add it in the providers section of our module declaration.
Make the call to Express server
Import the service in post component src/app/posts/posts.component.ts

21. Make the http call

22. Add to module

23. Import the service in post component

24. View Finally, we'll just display the posts in the view.
src/app/posts/posts.component.html

25. Step-By-Step npm install -g angular-cli ng new mean-app ng serve
Hit
npm install --save express body-parser
Add server.js & server/routes/api.js (Refer code zip)
ng build
node server.js
Hit
npm install --save axios
Update server/routes/api.js (Refer code zip)
ng generate component posts

26. Step-By-Step
Declare the /posts route in src/app/app.module.ts (Refer code zip)
Add a router-outlet where the route should be rendered in the src/app/app.component.html (Refer code zip)
ng build && node server.js
ng generate service posts
Update src/app/posts.service.ts and src/app/app.module.ts (Refer code zip)
Import service in src/app/posts/posts.component.ts (Refer code zip)
Update src/app/posts/posts.component.html and add bootstrap CDN to src/index.html(Refer code zip)
ng build && node server.js (hit

27. https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli

28. Thanks!