AngularJS 2.0 is coming, even is still in beta and something is still changing, but most stuff works well. It’s a good time to start to try it. In our recent demo we find its Component is very cool.
Quickstart
Actually in previous project, I also have Component concept, just there is not corresponding term in AngularJS 1.3. But it is imported in 1.5, though it’s not same as 2.0 Component. The latest Component like ReactJS Component, every UI stuff is a single Component, so the whole page is constructed by a lot of reusable Components. It’s easy to understand from Object Oriented Design and implemented. So even in AngularJS 1.3, we also use Component to divide our page, just the implementation is different, we use Directive or Controller instead. Each part is a reusable Directive or Controller with template. We use bindings to communicate between each other.
Now in 2.0, we finally use Component. This affect our code implementation, which make our all code more like Class. Each Component is a real Class in Typescript. You can enjoy the strong type in Typescript, of course the short coming is you have to type more to define class or interface, also you can use ES6 features. Now your can start from 5 Min quickstart.
After the quickstart, you can notice two big changes:
- You have to use node.js to setup dev environment, which is more complex than before, but it’s a trend.
- Total different syntax for AngularJS Component with Typescript annotation, module definition. Every file keep simple to easy to maintain. Every thing is a Class.
More work
Now it’s time to learn the different DI and template syntax based on Tour of Heros.
First the DI is very cool now. DI in 1.x is limit, almost all service is only singleton. But now you can choose. For example, I have ParentComponent and ChildComponent. To share same Service, like NameService, I can define the providers in ParentComponent and easily inject NameService to ChildComponent, so they can share same instance of NameService like below. But other places you can have a new NameService instance if you want. Notice NameService is a pure Class, nothing special as before. See live example from plunker.
In this example, we define ParentComponent providers: [NameService], which will cause DI to create a NameService instance. And in the ParentComponent constructor we can declare we need one NameService instance, then you get it. In the ChildComponent we do the same thing, declaring we need one NameService instance, then DI is smart to try to find one from ancestor injector. This is a good way to share the data between parent and child components. Also we should put most logic into separate Service, because we can share more code between Components. So put your ajax requests in service.
Now you can get more information about new template syntax, after that you can have confident to write your own AngularJS 2.0 project. As the template syntax, be honest, I don’t like it. Because I cannot understand what the fuck it is at the beginning based on my existing knowledge, even I know AngularJS 1.x. But I think they want to back compatible to 1.x and don’t mix them together, so have new syntax. After you try some code, you can familar with the [] and (). Weird!? I think knockoutjs binding syntax is clearer, though need more typing.
In deep
You need more about the DI from HIERARCHICAL DEPENDENCY INJECTORS, Dependency Injection in Angular 2.
Component Lifecycle is also very important in real development. For example you want to know when the template html is ready in DOM tree, so you can use jquery or other 3rd party library to operate the dom. You need hook ngAfterViewInit.
You absolutely have question how to communicate between Components if you create real project. Check Component Interaction, you can find very helpful suggestions. I prefer to use method Parent and children communicate via a service. Actually it looks like a event bus, so components can use it to publish/subscribe events.
Also you can inject parent component into child component like here: Developing a tabs component in Angular 2. You can notice Tabs is injected into Tab constructor, because Tabs is parent component of Tab. This article simply says this is hierarchical DI, but it forget one important thing, don’t make circular import in your code. See details here http://stackoverflow.com/questions/34540615/how-do-i-inject-a-parent-component-into-a-child-component.