Writing a basic application with Angular 2
Since Angular 2 is still in alpha stage of development, most of the discussions around it are so far conceptual. Articles dealing with real-life examples of use are few and far between and, in such an everchanging territory, often obsolete by the time you read them.
Features such as querying an API or using the router with parameters, while fundamental, are overlooked, and this posts mainly aims to cover them.
What this post won’t talk about :
- Typescript : A superset of Javascript. If you’re already familiar with ES6 and Babel, it should not bother you. In any case, there’s plenty of resources readily available.
- Webpack : Creating a workflow with Webpack can be daunting and belongs to its own post. I used the AngularClass starter for this application, but you could achieve the same result with Grunt or Gulp.
- Angular2 basics : There’s already many resources covering the key-concepts of the framework. There’s also a 5 min quickstart guide that should get you started.
The application
What we’re building
We are going to use the Echonest API to retrieve a list of the most popular (Hotttest, according to their terms) artists. We will also implement a search feature, that will suggest a list of the artists whose name matches our input as we type.
The structure
/src
/public
index.html /app
bootstrap.ts
app.ts
/components
/header
header.ts
/hotttlist
hotttlist.ts
/services
Echonest.tsetc.
Smart and dumb components
If you’ve been around the React community lately, that term should ring a bell. Coined by Dan Abramov (Creator of Redux), it refers to a simple but powerful pattern.
Components are much easier to reason about if you divide them in two categories, smart and dumb.
A smart component does the heavy lifting (Fetching data, etc.) It contains little layout information and relies instead on dumb components. Dumb components receives its data from the smart component and displays it with little to no added logic. It makes them reusable and easier to test.
Where we are going, we need roads
To handle the routing of the application, we’ll need two things.
- First, a RouteConfig, in which we define our routes. This is pretty straightforward :
- Next, a RouterOutlet, to display our components :
We will be able to navigate through our app with the RouterLink directive :
<a [router-link]=”[‘/Artist’, {name: artist.name}]”>See this artist</a>We may also want to access the hypothetical route parameters later on :
myFunction(routeParams: RouteParams) {
this.artistName = routeParams.get(‘name’);
}Fetching the data
In Angular1, we had services, factories, constants and values, which caused a lot of confusion. The differences were sometimes subtle and it was hard to know with certainty which one to use.
Angular2 got rid of the bloat. We can now create a Class, with the Injectable() annotation.
We may want to use that data in our components.
The important point here is that our service won’t actually return data, but will instead return an Observable. As of now, we have to manually subscribe to it. Instead of displaying the data here, we are going to create a dumb component, to which we will feed the data.
Parents and Childs
We passed the relevant data to the component through a property. Therefore, we need to declare that property on our child with an Input() decorator.
As we can see, the component does little apart from displaying the data that is fed to him. The benefits of such an approach quickly become obvious. Starting from a smart component, we can feed some information to a dumb component, which will use another dumb component twice with different data.
Lastly
Angular2 doesn’t have a styleguide that carries nearly-authoritative weight right now (As there was John Papa’s for Angular 1), but this sample tries to follow some sound concepts I picked from using React/redux.
This barely scratches the surface of the framework, but I hope that it can get your own exploration started in a hopefully right direction.
