{"id":201,"date":"2016-09-23T12:40:46","date_gmt":"2016-09-23T12:40:46","guid":{"rendered":"http:\/\/nyxditech.com\/blog_staging\/?p=201"},"modified":"2019-06-04T06:49:01","modified_gmt":"2019-06-04T06:49:01","slug":"angular-js-2-0-lets-check-better","status":"publish","type":"post","link":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better","title":{"rendered":"Angular JS 2.0 : Let’s Check Out Why It’s Better?"},"content":{"rendered":"

The latest version<\/strong> <\/a>of Angular JS is here and all the programming heads cannot hold on to their excitement. First look at the Angular JS 2.0 and you can easily make out that it is so different from the earlier version that you could give it a new name altogether. Therefore, it will definitely give a chance to the angular team to implement everything that they have learned being the most popular frontend framework over the last 6 years. Having said that, Angular 2.0 is going to be a new learning just like Angular 1.0 was. Although it’s worth that effort as once you get your heads around it, we think it would be a much easier framework to use. So, let’s quickly take a look at how it is different and better than the previous version.<\/p>\n

1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. Now, the big question is that what is it really that you should jump on to this new version?<\/p>\n

Template Basics<\/strong><\/h2>\n

Templates are written in HTML and is a vital user-facing part of any Angularjs app. Major changes in the basic templates can be noted in Angularjs 2. These changes include local variables, Filters and Bindings.<\/p>\n

Template Directives<\/strong><\/h2>\n

Angularjs 1 offers more than 70 built-in directives for templates. In AngularJS 2, many of them are not necessary. So, they have created some equivalents in the latest version. Although you can bootstrap an Angular 1 app in code, many applications bootstrap declaratively with the ng-app directive, giving it the name of the application’s module<\/p>\n

Modules\/Controllers\/Components<\/strong><\/h2>\n

In both Angular 1 and Angular 2, Angular modules help to systematise your application into closely knit blocks of functionality. The previous version required \u00c2 you write the code that provides the model and the methods for the view in a controller. In Angular 2, you build a component. JavaScript code is shown in the Angular 1 column because a lot of Angular 1 code is in JavaScript. The Angular 2 code is shown using TypeScript.<\/p>\n

Filters\/Pipes<\/strong><\/h2>\n

Just like Angular 1 filters, angular 2 give transformation and formatting for data in the template. A lot of built-in filters of Angular 1 have matching pipes in Angular 2.
\nA few examples-<\/strong>
\njson<\/em><\/strong>
\nCOPY CODE<\/em>
\n<pre>{{movie | json}}<\/pre><\/em>
\nConverts a JavaScript object into a JSON string. This is useful for debugging.<\/em><\/p>\n

limitTo<\/em><\/strong>
\nCOPY CODE<\/em>
\n<tr ng-repeat=”movie in movieList | limitTo:2:0″><\/em>
\nSelects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0).<\/em><\/p>\n

orderBy<\/em><\/strong>
\nCOPY CODE<\/em>
\n<tr ng-repeat=”movie in movieList | orderBy : ‘title'”><\/em>
\nDisplays the collection in the order specified by the expression. In this example, the movie title orders the movieList.<\/em><\/p>\n

Style Sheets<\/strong><\/h2>\n

Style sheets glams up your app and provide an admirable look to your app. With evolution over the years, the styles for many parts merge, which can cause unanticipated results. In Angular 2, now you can also encapsulate a style sheet within a specific component along with the option of defining style sheets for your entire app.<\/p>\n

Better performance<\/strong><\/em>
\nEasier to use<\/strong><\/em>
\nFuture proof with ES6<\/strong><\/em>
\nUses web standards<\/strong><\/em><\/h2>\n

Angular JS is pretty much popular among the developers and the latest version surely has a bunch of new and improved features to play with. Well, in our word it’s definitely worth to upgrade from Angular JS 1.0 to Angular JS 2.0<\/p>\n","protected":false},"excerpt":{"rendered":"

The latest version of Angular JS is here and all the programming heads cannot hold on to their excitement. First look at the Angular JS 2.0 and you can easily make out that it is so different from the earlier version that you could give it a new name altogether. Therefore, it will definitely give a chance to the angular team to implement everything that they have learned being the most popular frontend framework over the last 6 years. Having said that, Angular 2.0 is going to be a new learning just like Angular 1.0 was. Although it’s worth that effort as once you get your heads around it, we think it would be a much easier framework to use. So, let’s quickly take a look at how it is different and better than the previous version. 1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. Now, the big question is that what is it really that you should jump on to this new version? Template Basics Templates are written in HTML and is a vital user-facing part of any Angularjs app. Major changes in the basic templates can be noted in Angularjs 2. These changes include local variables, Filters and Bindings. Template Directives Angularjs 1 offers more than 70 built-in directives for templates. In AngularJS 2, many of them are not necessary. So, they have created some equivalents in the latest version. Although you can bootstrap an Angular 1 app in code, many applications bootstrap declaratively with the ng-app directive, giving it the name of the application’s module Modules\/Controllers\/Components In both Angular 1 and Angular 2, Angular modules help to systematise your application into closely knit blocks of functionality. The previous version required \u00c2 you write the code that provides the model and the methods for the view in a controller. In Angular 2, you build a component. JavaScript code is shown in the Angular 1 column because a lot of Angular 1 code is in JavaScript. The Angular 2 code is shown using TypeScript. Filters\/Pipes Just like Angular 1 filters, angular 2 give transformation and formatting for data in the template. A lot of built-in filters of Angular 1 have matching pipes in Angular 2. A few examples- json COPY CODE <pre>{{movie | json}}<\/pre> Converts a JavaScript object into a JSON string. This is useful for debugging. limitTo COPY CODE <tr ng-repeat=”movie in movieList | limitTo:2:0″> Selects up to the first parameter (2) number of items from the collection starting (optionally) at the beginning index (0). orderBy COPY CODE <tr ng-repeat=”movie in movieList | orderBy : ‘title’”> Displays the collection in the order specified by the expression. In this example, the movie title orders the movieList. Style Sheets Style sheets glams up your app and provide an admirable look to your app. With evolution over the years, the styles for many parts merge, which can cause unanticipated results. In Angular 2, now you can also encapsulate a style sheet within a specific component along with the option of defining style sheets for your entire app. Better performance Easier to use Future proof with ES6 Uses web standards Angular JS is pretty much popular among the developers and the latest version surely has a bunch of new and improved features to play with. Well, in our word it’s definitely worth to upgrade from Angular JS 1.0 to Angular JS 2.0<\/p>\n","protected":false},"author":1,"featured_media":202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"yoast_head":"\nAngular JS 2.0 : Let's Check Out Why It's Better? - NYX Ditech<\/title>\n<meta name=\"description\" content=\"1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. what is it really that you should jump on to new version?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular JS 2.0 : Let's Check Out Why It's Better? - NYX Ditech\" \/>\n<meta property=\"og:description\" content=\"1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. what is it really that you should jump on to new version?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better\" \/>\n<meta property=\"og:site_name\" content=\"NYX Ditech\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-23T12:40:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-04T06:49:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"432\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular JS 2.0 : Let's Check Out Why It's Better? - NYX Ditech","description":"1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. what is it really that you should jump on to new version?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better","og_locale":"en_US","og_type":"article","og_title":"Angular JS 2.0 : Let's Check Out Why It's Better? - NYX Ditech","og_description":"1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. what is it really that you should jump on to new version?","og_url":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better","og_site_name":"NYX Ditech","article_published_time":"2016-09-23T12:40:46+00:00","article_modified_time":"2019-06-04T06:49:01+00:00","og_image":[{"width":768,"height":432,"url":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#article","isPartOf":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better"},"author":{"name":"admin","@id":"https:\/\/nyxditech.com\/blog_staging\/#\/schema\/person\/33d0b3d1f48eed4a537608abd5f401ee"},"headline":"Angular JS 2.0 : Let’s Check Out Why It’s Better?","datePublished":"2016-09-23T12:40:46+00:00","dateModified":"2019-06-04T06:49:01+00:00","mainEntityOfPage":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better"},"wordCount":561,"commentCount":0,"publisher":{"@id":"https:\/\/nyxditech.com\/blog_staging\/#organization"},"image":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#primaryimage"},"thumbnailUrl":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg","articleSection":["Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#respond"]}]},{"@type":"WebPage","@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better","url":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better","name":"Angular JS 2.0 : Let's Check Out Why It's Better? - NYX Ditech","isPartOf":{"@id":"https:\/\/nyxditech.com\/blog_staging\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#primaryimage"},"image":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#primaryimage"},"thumbnailUrl":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg","datePublished":"2016-09-23T12:40:46+00:00","dateModified":"2019-06-04T06:49:01+00:00","description":"1.3 million developers are currently using Angular JS 1 and 480K are already using Angular JS 2. what is it really that you should jump on to new version?","breadcrumb":{"@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#primaryimage","url":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg","contentUrl":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2016\/09\/angularjs.jpg","width":768,"height":432,"caption":"Angular JS 2.0"},{"@type":"BreadcrumbList","@id":"https:\/\/nyxditech.com\/blog_staging\/angular-js-2-0-lets-check-better#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nyxditech.com\/blog_staging\/"},{"@type":"ListItem","position":2,"name":"Angular JS 2.0 : Let’s Check Out Why It’s Better?"}]},{"@type":"WebSite","@id":"https:\/\/nyxditech.com\/blog_staging\/#website","url":"https:\/\/nyxditech.com\/blog_staging\/","name":"NYX Ditech","description":"","publisher":{"@id":"https:\/\/nyxditech.com\/blog_staging\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nyxditech.com\/blog_staging\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nyxditech.com\/blog_staging\/#organization","name":"NYX Ditech","url":"https:\/\/nyxditech.com\/blog_staging\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nyxditech.com\/blog_staging\/#\/schema\/logo\/image\/","url":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2024\/03\/nyxditech_logo.png","contentUrl":"https:\/\/nyxditech.com\/blog_staging\/wp-content\/uploads\/2024\/03\/nyxditech_logo.png","width":173,"height":70,"caption":"NYX Ditech"},"image":{"@id":"https:\/\/nyxditech.com\/blog_staging\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/nyxditech.com\/blog_staging\/#\/schema\/person\/33d0b3d1f48eed4a537608abd5f401ee","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nyxditech.com\/blog_staging\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9ea8d51a35e986075ec6e097c1dc4446?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9ea8d51a35e986075ec6e097c1dc4446?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/nyxditech.com\/blog_staging\/author\/admin"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/posts\/201"}],"collection":[{"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":10,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":1348,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/posts\/201\/revisions\/1348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/media\/202"}],"wp:attachment":[{"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyxditech.com\/blog_staging\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}