Angular · Node · Visual Studio · Visual Studio Code

Angular 2

Finally, Angular 2 is released. In this post I am going to cover:

– Components
– Services with observables and promise
– Routing
– @NgModule
– Animations

You can download the starter project here

Digging into new technologies, it’s always a question on where do I start. Before going deeper into it. I like to have a hello-world project with a couple of pages to navigate back and forth, some bindings, and get data from a service before I break down each part to fully understand and learn more. Making decisions on where to put your html, css, script to have a clear structure in your project is indeed a hard thing when you are new the technology.

So what do I need to start this working Angular 2 Starter sample: (Skip this part if you are not new too angular 2)

1.    Install node form this link if you don’t have it
2.    Download the zip file of the project here
3.    Create a folder on your machine (ex. C:\dev\myproject) to add the files you downloaded from my git.
4.    Open a cmd (command prompt) and navigate to your new project folder (ex.        C:\dev\myproject) and type “npm install” (wait for it to finnish)
5.    Still in you project folder in cmd type “npm run” (A browser should start and in localhost:3000 and show the startup project.)

ng21

So, what is the starting point of the application? where do I put my roting? how can I get data from my service? How can I show that data to the user?

Well, this is how I structure my project:

ng22

Main.ts: The entry point. This is where you bootstrap your application
App.routes.ts: You inject all the dependencies you need to show the startup page to the user. The @NgModel was introduced from the angular 2 team in 2.0.0.rc.5 and is super handy for pluming your app. When you bootstrap your app in main.ts you are injecting this AppModule.
app.component.ts: This is the shell of your application. In AppModule, you are exporting this. Think of this as your master component.
App.component.html: The first html a user will see.
components/: This is the folder you will have all your components, html and css.
services/: This is where you put your services like http to get your data and so on.
Shared/: This is where you will have your shared stuff like animations, Interfaces and so on.

Compoents:

If you have developed in angular 1 you have been using controllers. You would in that case have a function called HomeController and register that in angular, with the angular.controller method. I angular 2 we will have a Component.

ng23

We are defining our class called HomeComponent, and we will have a decorator/metadata, @Component, which is describing our template for our html, css and the selector to use in our html.
When you put export on your HomeComponent class somebody else will be able to import this. This is how we refer to things across files. We will have a look at this later on under routing, but the way we do this would be like this:
import { HomeComponent } from ‘./home.component’;

Services and http:
We will have services separated from our controllers so we can share them across our application. We will use http with Promises or Observables to save and get data from some service.
So, Like in Angular 1 where we would have a $http.get() we will do the same in angular 2. The big difference is how we handle the response. With typescript we are working with “real objects” so when we get a response we can map that to our object with angular 2. When we have the object mapped in our service we can subscribe that that object in our Component.

 
Cars.service.ts

ng24

Make sure you declare @Injectable. You will need that in all your services. The second thing is to make sure you import the Observable from “rxjs/Rx” so you can have your response as an Observable. This is also where the toPromise live. I have added the Interface ICar and the class Car in service file in this sample, but this should probably live somewhere else when your application is growing. So, in our constructor of our service, make sure you add the Http so you can use that inside your service.

ng25

So, in our car.component we inject our CarsService and call getCars() to get our cars. The cars object is of type Promise and is observable, and since we are returing this from our service with toPromise() we now have an observable object to display in our html.

Thanks for Reading