SBS Part 2: Adding Angular

Installing Angular

Assuming you’ve got your Node.js server up and running, we’ll now start with the Angular application.

If you don’t, you can just pull the  SettingUpNodeJs branch from GitHub. Execute “npm install” in your directory and voilá! Your server is live and ready to serve your Angular app.

Create a new directory called “client”. This is where all of our app code will be. Open up a terminal and navigate to the client directory. We want a “package.json” file here aswell, with all of our Angular dependencies. Name your app “ng2app”.

Press enter on the following prompts. Open the generated package.json file and remove the “main” and “scripts”-properties. Add the required Angular2 packages to your dependencies.

Angular2 is shipped in different modules, striving to be the modular framework that AngularJS didn’t really become.

@types/node contains some type definitions. reflect-metadatasystemjs, rxjs, zone.js and core-js are essential packages for our Angular app.

Configuring Angular

We need two config files before we can start coding. Create a file called “systemjs.config.js”. This file is, as described by its name, the system configuration for Angular. It’s basically just a mapper between aliases and physical paths for files. Copy/paste the following into your file:

The second configuration we need to add is for Typescript. Add a file named “tsconfig.json”. Here we’ll enter some configuration as for how our Typescript compiler should treat our .ts files.

More information on how to configure the tsconfig.json file can be found here.

Our Angular app will be served through an HTML file, named “index.html”. Create this file aswell and add the following markup:

The imported files from node_modules are essential for Angular. These files adds polyfills (core-js), zones a.k.a execution contexts that persists across async tasks (zone.js), decorators (reflect-metadata), and a module loader (systemjs).

The last import is our systemjs.config.js, and then we’ll import our “app” which is declared in that particular file.

I’ve used Bootstrap in this example, just to keep your minds off the styling side of things.

The <ng2-app> element in our body is the custom element that we’re going to use for our application. Now it’s finally time for our first Typescript file to get born!

Our first Component

An Angular app is built using modules, which in turn contains components. You can read more about the architecture of Angular here.

Add a new directory inside “client”, called “app”. This is where we’ll store all of our app code.

To avoid getting this directory cluttered, we’ll add another directory inside of it called “components” – This is where we will store our app components. Later on we will also have directories for services, pipes and models.

Add a new folder under components called “start”. We want all of the files related to our component in the same directory (which is; component, template and CSS stylesheet).

In our start directory, create a file called “start.component.ts” and add the following code:

We start off by importing the Component module from the core-bundle of Angular. This gives us access to the @Component-decorator. Decorators adds metadata to our class, StartComponent. @Component takes a single object of properties as a parameter, and this object describes our class. It lets Angular know the following things:

  • This class should be treated as a component
  • The HTML element for this component is ‘ng2-app’
  • The path to the template for this component

If we don’t specify the moduleId property we won’t be able to use the relative path to “start.view.html” (and would instead have to type ‘./app/components/start/start.view.html’), as the application does not originally know where start.view.html is. However, as moduleId is set to module.id (which contains the absolute URL to the component), Angular knows in which directory to search for start.view.html. You can read more about this here.

You can also write HTML directly to the object by using the “template” property instead, which is better for performance (each reference to an HTML file will cause an extra request).

After this is done, we export a class called “StartComponent”, which contains a string variable. Create a file called “start.view.html” in the same directory, and add the following code:

{{myCar}} is a data binding to the “myCar” variable in StartComponent. This is a Component -> DOM binding, but we’ll get to that later.

Now we’ve got our first component in place! Now we’ve got to package this into an Angular Module, which we’ll then bootstrap to be our application.

Bootstrapping & Running

Create a file in the “app” directory called “app.module.ts”. This file will import all necessary components and modules that are needed for our application to run.
(You could also make a directory named “modules” inside your client directory, but we’ll only use one module in this example)

Hm, so what’s all this? It’s actually even easier than the component you just made! The first import is the NgModule, which we’re using with the decorator @NgModule.

The second import is the BrowserModule, which is required for all browser applications. It adds service providers and common directives like NgIf and NgFor, which we will use in our application later on.

The last import is the StartComponent we just made, which we want to use in our application.

As with the @Component decorator, @NgModule takes an object with properties describing the module.

The common properties are:

  • Imports
    • Other modules whose exported classes are needed in this module
  • Declarations
    • The view classes included in this module (components, directives and pipes)
  • Providers
    • List of services to be accessible throughout the module (can also be declared in @Component)
  • Exports
    • The view classes (in “declarations”) that should be accessible in HTML templates in other modules
  • Bootstrap
    • Our application view and root component – this is where we’ll later on import a router and navigate throughout our other components. The root module is the only module with the Bootstrap property.

At the very end, we export a class called AppModule. This class needs to get bootstrapped for the browser to process it.

Create a new file “main.ts” alongside app.module.ts.

Type the following and then save it:

Now you will have a “main.js” file, which we are importing in index.html (thanks to the configuration in systemjs.config.js) to display our application.

Viewing the results

Open up your terminal once again. Navigate to the “ng2tester” directory, and execute “npm start”. You should get an indication that your server is listening. Navigate to http://localhost:8080 (or whatever port you’ve got configured) and you should see your application, looking something like this!

It’s not much, but it is a solid ground for what we’re going to build!

In the next step we’ll add some more components and routing to our project.


All code examples can be found at GitHub, with separate branches for each step of the step-by-step guide.

Note: To install the dependencies listed in a “package.json” file, simply type “npm install” into your terminal.

berran

22 year old developer with a passion for frontend development. Lives in Sweden.

Leave a Reply

Your email address will not be published. Required fields are marked *