Build Better Apps with MEAN

MEAN Scaffolding Sample- App Agenda

So why MEAN?

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

Scaffolding

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.

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 http://localhost:4200

Express

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.

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.

Server.js

api.js

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 http://localhost:3000 or http://localhost:3000/api

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

Update Api.js Now hit http://localhost:3000/api/posts

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 the @NgModuledecorator.

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 http://localhost:3000 should redirect you to http://locahost:3000/posts, based on the instructions we gave to our router.

Add Route

Router Outlet

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

Make the http call

Add to module

Import the service in post component

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

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

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 http://localhost:3000)

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

Thanks!