Sharing Top Content from the Angular-sphere.

MEAN App with Angular 2 and the Angular CLI ― Scotch

  • server.js

    // Get dependencies
    const express = require(‘express’);
    const path = require(‘path’);
    const http = require(‘http’);
    const bodyParser = require(‘body-parser’);

    // Get our API routes
    const api = app = express();

    // Parsers for POST extended: false }));

    // Point static path to ‘dist’)));

    // Set our api routes
    app.use(‘/api’, api);

    // Catch all other routes and return the index file
    app.get(‘*’, (req, res) = {
    ‘dist/index.

  • */
    server.listen(port, () = console.log(`API running on localhost:${port}`));
    The above code sets up a simple express app, with an /api route and all other routes are directed towards the dist/index.
  • module.ts
    // Imports commented out for brevity

    import { PostsComponent } from declarations: [
    AppComponent,
    PostsComponent // Posts Component injected here
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    Next we’ll add a posts route.

  • component’;

    // Define the routes
    const ROUTES = [
    {
    path: ”,
    redirectTo: ‘posts’,
    pathMatch: ‘full’
    },
    {
    path: ‘posts’,
    component: PostsComponent
    }
    ];

    @NgModule({
    declarations: [
    AppComponent,
    PostsComponent
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES) // Add routes to the app
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    We are simply telling our router that whenever the root route / is visited, redirect to /posts.

  • /posts.service’;

    // Routes

    @NgModule({
    declarations: [
    AppComponent,
    PostsComponent
    ],
    imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES)
    ],
    providers: [PostsService], // Add the posts service
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    Then make the http call within the service to our express server.

One of the most common stacks that accompany Angular as a web framework is the MEAN stack. MEAN simply stands for MongoDB, ExpressJS, Angular and NodeJS, and is a concept that came about a few years ago with the growing popularity of all those technologies, and the fact that you only needed to know one language, javascript, to get started.

@scotch_io: MEAN App with Angular v2+ and the Angular CLI by @gangachris_ #angular #mean #node #javascript

One of the most common stacks that accompany Angular as a web framework is the MEAN stack. MEAN simply stands for MongoDB, ExpressJS, Angular and NodeJS, and is a concept that came about a few years ago with the growing popularity of all those technologies, and the fact that you only needed to know one language, javascript, to get started.

To explain the different parts,

We’ve previously written about setting ap a mean single application page. Since then, we’ve seen Angular release a newer version, Angular 2, and with it the Angular CLI, that enables quick scaffolding of Angular 2 apps.

This article will focus on setting up a MEAN app with Angular 2, while still using the Angular CLI.

We’ll of course need the angular cli

You also need to know a little about Creating Angular apps with the Angular CLI, as well as Creating an Express app.

Next, we’ll create an angular app with the CLI. If you’d like to use yarn please check below after the command.

NOTE: If you have yarn installed, simply skip npm then run yarn later. Otherwise, the above command should be fine.

Both of the above approaches will scaffold an Angular 2 app and install all the dependencies. To serve the app, simply run

in your browser.

file. This is what our express app will point to.

Install express and body-parser as dependecies.

Or if using yarn

file will have the server code, that will point to the server folder, where the rest of the server implementation is.

server.js

, MUST come last after all other API routes have been defined.

. Let’s create this file.

server/routes/api.js

, we need to do a build of the angular app.

with the angular 2 app built files. Now we can serve the app with express.

should show as below.

Now that we have the api set up. Let’s quickly mock up some data for three route endpoints. We’ll call the jsonplaceholder mock api to respond with some data.

In a real MEAN app however, this data should be retrieved from Mongo DB. To read more on this, you can go through connecting a node app to MongoDB.

First add axios for making http requests.

Or, if using yarn

file to have the following content.

server/routes/api.js

I’m using a json-viewer chrome plugin. You may see a not so pretty json response.

Angular route, component and provider

We’ll add an angular component, then add a route that display this component’s template.

. If you’ve done a little getting started with Angular 2, the generated content of the component should be clear. We’ll edit them when the time comes.

decorator.

src/app/app.module.ts

Next we’ll add a posts route. There are a couple of recommended ways to add routes to your angular 2 apps, and that is out of scope for this guide. We’ll use the simplest and most straight foreward.

src/app/app.module.ts

route.

We need to do a build and serve the app, we could do

Then simply run.

, based on the instructions we gave to our router. .

Angular 2’s best practices recommend defining a provider or service to handle the http calls. So, we’ll generate one with the Angular CLI.

directory. We then need to add it in the providers section of our module declaration.

Then make the http call within the service to our express server.

Then import our service in the post component.

And finally, we’ll just display the posts in the view.

page in the head tag.

Aren’t we all awesome designers with bootstrap: ;-).

Run the app.

, should produce this.

There is some sort of server-client separation in the approach we took. Both the Angular app and the Express server can be built independently.

You can now just continuously use the Angular CLI to build out your angular app, while developing the express server just as you would any nodejs express App.

MEAN App with Angular 2 and the Angular CLI ― Scotch

Comments are closed, but trackbacks and pingbacks are open.