emmanuel sio emmanuel sio - 6 days ago 5
AngularJS Question

Angular vs Angular 2

Months ago, I decided to study Angular. When I was doing some advance and create some app using it, I realize that Angular 2 is in Developer preview, so its matter of time that its going to be realeased. Because Angular 2 is not going to be compatible with Angular 1 ,and there are a lot of changes, the question is if its better to continue developing with Angular 1.x or start developing Angular 2.

Its a fact that not always we have to be with the last of versions, or the newest language of the market, but in this case, the app is still small so I could change with out problems.

Answer

I've played around with Angular 2 and watched/read some discussions so assuming you're comfortable with Angular 1 then here is a brief over view of things you'll notice that are different in Angular 2.

  • You write your angular code in Typescript and it converts to Javascript in the browser.

In a basic structure you will have a app/ts folder where you'll be doing most your work and a app/js where that gets told compiled by a tsconfig.json file that will sit at the root of your project. You'll find in the app/js folder files with a .js.map extension. They "map" your ".ts" files to your browser for debugging as your browser cannot read native typescript.

If you're thinking I have to learn a whole new language?.... Yes, you do, but don't find this one too intimidating, this should make your development easier as seen in my #2, I felt like I had a good grasp on it after just a few hours playing with it.

  • You bind to your HTML like you would if in an Angular 1 directive. So variable like $scope and $rootScope are deprecated.

This one you may have been implied as #1 states Angular 2 is in Typescript. Angular 2 is still a MV* but you'll be using 'components' as a way to bind code to your templates for instance take the following

import {component} from {angular2/core};

@component({
     selector:'my-app',
     template: '<h1> Hello World! </h1>'
})

export class AppComponent {}

Here think of the import statement as your dependency injection in a v1 controller. You use import to import your packages, where the import {component} says you'll be making a component you'd like to bind to your HTML.

Notice the @component decorator you have a selector and template. Here think of the selector as your $scope that you use like you use v1 directives where the name of the selector is what you use to bind to your HTML like so

where <my-app> is the name of your custom tag you'll use that will act as a place holder for whats declared in your template i.e. <h1> Hello World! </h1>. Whereas this would like like the following in v1.

HTML

<h1>{{hello}}</h1>

js

$scope.hello = "Hello World!"

Also from my understanding if add something between these tags for instance

<my-app> Loading... </my-app> 

then it display that "Loading..." in the view while the template is loading (the <h1> Hello World! </h1> in our case)

note that what's declared in template is the path or the raw HTML you'll be using in your HTML in your selector tag.


whereas a fuller implementation of Angular 1 would look more like

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

In v1 this would look something like

js

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

This is what I really like about v2 as I found directive had the steeped learning curve for me in v1 and even when I had them figured out I often had the css render not how I intended. I find this is way simpler.

V2 allows for easier scalability of your app as you'll notice you can break up your app up easier than you could in v1. I like this approach as you can have all your working parts in one file as opposed to having several in angular in v1.

What about converting your project from v1 to v2?


From what I've heard from the development team if you'd like to update your v1 project to v2 you'll just be going through and deleting deprecated blobs and replace your $scopes with selectors. I found this video helpful. It's with some of the ionic team that are working side by side with the angular team as v2 has a stronger focus on mobile https://youtu.be/OZg4M_nWuIk Hope this helps.

UPDATE: I updated by adding examples as official implementations of Angular 2 have surfaced.

Comments