main banner

Development

Angular 2: First Look

Angular 2 is built for speed: it has faster initial loads and change detection, plus improved rendering times. It takes advantage of features provided in the latest JavaScript standards, such as classes, modules, and decorators.

As we start, let's take a high-level look at Angular. Simply stated, Angular is a JavaScript framework for building client-side applications, using HTML, CSS, and a programming language, such as JavaScript. Why Angular, and not some other JavaScript framework? And there are lots of JavaScript frameworks out there. Angular makes our HTML more expressive. It powers up our HTML with features such as “If” conditions, for loops, and local variables. Angular has powerful data binding; we can easily display fields from our data model, track changes and process updates from the user. Angular promotes modularity by design. Our applications become a set of  blocks making it easier to create and reuse content. Also, Angular has built-in support for communication with a back-end service, this makes it easier for our web applications to integrate with a back-end service, to get post-data or execute server-side business logic. These are some of the reasons of why Angular is so popular among millions of web developers.


With so many developers already using Angular 1, why do we need an Angular 2? Well, Angular 2 is built for speed: it has faster initial loads and change detection, plus improved rendering times. It takes advantage of features provided in the latest JavaScript standards, such as classes, modules, and decorators. And it leverages web component technologies for building reusable user interface widgets. Yet, it supports browsers like, Edge, Chrome, Firefox and Internet Explorer back to IE9 something which Angular 1 doesn’t do. Angular 2 has a simplified API, it has fewer built-in directives to learn simpler binding, and a lower overall concept count enhancing our productivity and improving our day-to-day workflow.

Key comparisons and changes from Angular 1 to Angular 2

Controllers vs Component

Let’s go over the most obvious change: how a Controller is now a Component and how it compares in Angular 2.

Controllers in Angular 1 HTML:

Angular

Controller Javascript where the Movie controller is defined and registered with Angular:

Angular

In Angular 2 we have something similar, we are declaring our class name “GameComponent” that is equivalent to the function “GameController” in Angular 1, and by using a decorator the @Component that describes the template (the HTML) and the name of the selector named ‘my-game’,  the selector creates an HTML tag that will read the template and will be used in the HTML page.

Components in Angular 2 HTML:
Angular

Component in Typescript:

Angular

Bootstrapping

The second change is Bootstrapping Angular. In Angular 1 we needed to add the ng-app directive in our html tag or bodytag or anywhere needed to start the app, and then we told the name of the module we created.
Angular


In angular 2 we bootstrap with code, which we import from angular/platform-browser-dynamic, and then we import our component, and we call the bootstrap function to call the initial component that is the parent component of our entire application.
Angular


Services

In Angular 1, to avoid repeating code a Service needed to be created, or a Factory or Providers or Constant, this created some sort of values that Angular would use across the application. In angular 2 we still have the same need, but these get all consolidated just inside a class.


In Angular 1 we could have a service like console service to get all the list of gaming consoles, where we register the Service as Game Service and create a function getConsoles that returns a list of Gaming consoles:

Angular

 

In Angular 2 we declare a class called GameService and has the same method get Consoles, the syntax is similar the big difference is we are looking ES5 on Angular 1 and Typescript on Angular 2:
Angular

Dependency Injection

In the previous example we created a service, and the way to Inject it in Angular 1 is to Register the service so we did this in this line of code, that works like a dictionary, we say the GameService is named this string “GameService.”
Angular


In Angular 2 we simply create a provider to this Component or any child of this Component so we do this just once per app:
Angular


So this is the difference of registering the service between Angular 1 and Angular 2, so once we register it, we need to get it and be able to use it . In Angular 1 we might have a controller that needs this service so we need to inject the service into the controller we use the $inject:

Angular


In Angular 2 the process is similar but instead of using strings, set the objects inside the constructor of the class, and we set it to a variable that we will be able to use

Angular

These were some basic examples of the main differences between Angular 1 and Angular 2 key components, services, controllers and new components and how to use them and set them.




Hugo C

The guy who wears the coolest t-shirts at the office, Hugo has a B.S. in Software Engineering and comes from Torreon. With over 9 years of developing experience working with VB6, Web development, SharePoint, SQL, he is part of the bloggers crew. He is The Legend of Zelda and Lord of the Rings fan, videogames and dog enthusiast and enjoys practicing Krav Maga.



Articles