{"id":5834,"date":"2015-07-21T16:15:12","date_gmt":"2015-07-21T13:15:12","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5834"},"modified":"2015-07-20T01:35:01","modified_gmt":"2015-07-19T22:35:01","slug":"preparing-angular-2","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/","title":{"rendered":"Preparing for Angular 2"},"content":{"rendered":"<figure><\/figure>\n<p>I&#8217;m sure you heard about Angular 2 and that it will be <strong>totally<\/strong> different. Forget everything you know and start from scratch. Jokes apart, if you have taken a closer look you already know that, yes, it will be new, things will be different (as it&#8217;s mostly the case with new stuff), but many concepts will still be there.<\/p>\n<p>Well, as Angular 2 starts getting more and more concrete, articles, videos and podcasts get published that contains lots of useful information on how to get prepared an eventual migration scenario. I use this article to collect such best practices for myself and and obviously to share them with you!<\/p>\n<p><strong>Totally feel free<\/strong> to submit new practices in my comments. That&#8217;d be awesome! You can also directly submit a PR as <a href=\"https:\/\/github.com\/juristr\/juristr.github.com\">this blog is Open Source<\/a>. Simply click the &#8220;Contribute&#8221; link above.<\/p>\n<p>Keep an eye on this post here as I will update it from now and then as I stumble upon new things. Following is easy, simply <a href=\"http:\/\/feeds.feedburner.com\/juristrumpflohner\">subscribe to the RSS<\/a> feed or <a href=\"https:\/\/twitter.com\/juristr\">follow me on Twitter<\/a>.<\/p>\n<h2>Get rid of $scope: controller-as syntax<\/h2>\n<p>Definitely switch over to the <a href=\"https:\/\/github.com\/johnpapa\/angular-styleguide#controllers\">controller-as syntax<\/a> and get rid of <code>$scope<\/code> in your controller files as well as in the templates.<\/p>\n<pre class=\" brush:php\">&lt;div ng-controller=\"PersonController as personCtrl\"&gt;\r\n    &lt;div ng-repeat=\"person in personCtrl.people\"&gt;\r\n        {{ person.name }}\r\n    &lt;\/div&gt;\r\n    &lt;button ng-click=\"personCtrl.add()\"&gt;Add&lt;\/button&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre class=\" brush:php\">angular\r\n    .module('demo', [])\r\n    .controller('PersonController', PersonController);\r\n\r\nfunction PersonController(){\r\n    this.people = [\r\n        {\r\n            name: 'Juri'\r\n        },\r\n        {\r\n            name: 'Steffi'\r\n        }\r\n    ];\r\n};<\/pre>\n<p>First of all, Angular 2 won&#8217;t have any concept of <code>$scope<\/code> and then &#8211; especially in the HTML &#8211; using the controller-as syntax avoids a lot of headache when it comes to nested controllers.<\/p>\n<h3>Links<\/h3>\n<ul>\n<li><a href=\"https:\/\/github.com\/johnpapa\/angular-styleguide#controllers\">Angular StyleGuide<\/a><\/li>\n<li><a href=\"http:\/\/blog.thoughtram.io\/angularjs\/2015\/01\/02\/exploring-angular-1.3-bindToController.html\">Exploring Angular 1.3: Binding to Directive Controllers<\/a><\/li>\n<\/ul>\n<h2>Use directive controllers where possible<\/h2>\n<p>When you create new Angular directives you actually have different possibilities where to define your logic:<\/p>\n<pre class=\" brush:php\">angular\r\n    .module('demo', [])\r\n    .directive('personDisplay', PersonDisplayDirective);\r\n\r\nfunction PersonDisplayDirective(){\r\n    return {\r\n        compile: function(element, attrs){\r\n            \/\/ implement logic\r\n        },\r\n        link: function($scope, iElement, iAttrs){\r\n            \/\/ implement logic\r\n        },\r\n        controller: function(){\r\n            \/\/ implement logic\r\n        }\r\n    }\r\n}<\/pre>\n<p>When should we use which?? That&#8217;s a common question among Angular devs. You can find some suggestions on the Angular docs and in various online communities, but it&#8217;s not always that clear.<\/p>\n<p><strong>Angular 2 removes all of these<\/strong>, you&#8217;ll have a component (directive) and a controller class associated to it. As an obvious result, <strong>people suggest to use &#8220;directive controllers&#8221; wherever possible<\/strong>.<\/p>\n<pre class=\" brush:php\">angular\r\n    .module('demo', [])\r\n    .directive('personDisplay', PersonDisplayDirective);\r\n\r\nfunction PersonDisplayDirective(){\r\n    return {\r\n        controller: function(){\r\n            \/\/ implement logic\r\n        },\r\n        controllerAs: 'vm'\r\n    }\r\n}<\/pre>\n<p>I asked on Twitter:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>True to say we should avoid the compile\/link fns and use directive controllers with bindToController etc. ? <a href=\"https:\/\/twitter.com\/hashtag\/angular?src=hash\">#angular<\/a> \/\/cc <a href=\"https:\/\/twitter.com\/PascalPrecht\">@PascalPrecht<\/a><br \/>\n\u2014 Juri Strumpflohner (@juristr)<br \/>\n<a href=\"https:\/\/twitter.com\/juristr\/status\/616859925193576450\">July 3, 2015<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Pascal Precht &#8211; Angular expert @ <a href=\"http:\/\/thoughtram.io\">Thoughtram<\/a> &#8211; answered:<\/p>\n<table border=\"1\">\n<tbody>\n<tr>\n<td>\n<a href=\"https:\/\/twitter.com\/juristr\">@juristr<\/a> However, when controller is enough, use that. You don&#8217;t have to deal with rather complicated compile\/link things.<br \/>\n\u2014 Pascal Precht \u0295\u2022\u032b\u0361\u2022\u0294 (@PascalPrecht)<br \/>\n<a href=\"https:\/\/twitter.com\/PascalPrecht\/status\/616877259895504896\">July 3, 2015<\/a><br \/>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"1\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/twitter.com\/juristr\">@juristr<\/a> In addition, it&#8217;s much more aligned with the philosophy behind Angular 2 components. I recommend using controllers where possible<br \/>\n\u2014 Pascal Precht \u0295\u2022\u032b\u0361\u2022\u0294 (@PascalPrecht)<br \/>\n<a href=\"https:\/\/twitter.com\/PascalPrecht\/status\/616877259895504896\">July 3, 2015<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>From his perspective:<\/p>\n<ul>\n<li>No you shouldn&#8217;t avoid them per se. The point is, as long as you do stuff that hasn&#8217;t to be in compile\/pre\/postlink, put it in ctrl<\/li>\n<li>In other words, in most of the cases you actually don&#8217;t need to deal with compile\/link. Controller gives you everything you need<\/li>\n<li>Except for cases like ngModelController, which registers itself at ngFormController during preLink<\/li>\n<li>However, when controller is enough, use that. You don&#8217;t have to deal with rather complicated compile\/link things.<\/li>\n<li>In addition, it&#8217;s much more aligned with the philosophy behind Angular 2 components. I recommend using controllers where possible<\/li>\n<li>Also easier to test!<\/li>\n<\/ul>\n<p>Note that one issue when you use directive controllers is often on how to reference the directive scope properties from within the controller &#8211; since we should possibly avoid <code>$scope<\/code>. Since Angular v1.3 there is the boolean <code>bindToController<\/code> property and recently in v1.4 they&#8217;ve even improved it s.t. you can write things like<\/p>\n<pre class=\" brush:php\">return {\r\n  restrict: '...',\r\n  bindToController: {\r\n    val1: '=',\r\n    val2: '@'\r\n    ...\r\n  },\r\n  controller: function($log){\r\n    \/\/ access them with\r\n    $log.debug(this.val1);\r\n  }\r\n}<\/pre>\n<p>There&#8217;s a nice article on Thoughtram about that. Follow the link below.<\/p>\n<h3>Links<\/h3>\n<ul>\n<li><a href=\"http:\/\/blog.thoughtram.io\/angularjs\/2015\/01\/02\/exploring-angular-1.3-bindToController.html\">Exploring Angular 1.3: Binding to Directive Controllers<\/a><\/li>\n<\/ul>\n<h2>Prefer Components over Controllers<\/h2>\n<p>Angular 2 follows the current trend of web components. Thus, it won&#8217;t have autonomous controllers any more, but just in conjunction with so-called <strong>components<\/strong>. An Angular 2 app is a tree of nested components, with a top-level component being the app.<\/p>\n<p>So rather than having controllers, start to create such widgets or components that are autonomous. In Angular 1.x we know them as <strong>directives<\/strong>. Search for template dependent controllers and try to move them into separate directives. For example, refactoring the previous example we could get something like this:<\/p>\n<pre class=\" brush:php\">&lt;div ng-controller=\"PersonController as personCtrl\"&gt;\r\n    &lt;!-- PersonController scope --&gt; \r\n\r\n    &lt;people-list people=\"personCtrl.people\"&gt;\r\n        &lt;!-- PersonListController scope here --&gt;\r\n\r\n        &lt;div ng-repeat=\"person in personListCtrl.people\"&gt;\r\n            {{ person.name }}\r\n        &lt;\/div&gt;\r\n\r\n        &lt;button ng-click=\"personListCtrl.add()\"&gt;Add&lt;\/button&gt;\r\n    &lt;\/people-list&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Note that <code>PersonController<\/code> passes in the data required by our list component. Thus it remains fairly re-usable. All it does is creating the UI functionality.<\/p>\n<pre class=\" brush:php\">angular\r\n    .module('demo', [])\r\n    ...\r\n    .directive('peopleList', peopleListDirective);\r\n\r\nfunction peopleListDirective(){\r\n    return {\r\n        controllerAs: 'personListCtrl',\r\n        controller: function($scope, $attrs){\r\n            this.peopleList = $scope.eval($attrs.people);\r\n\r\n            this.add = function(){\r\n                \/\/ implementation\r\n            }.bind(this);\r\n        }\r\n    }\r\n}<\/pre>\n<h2>Use Observables instead of $watch<\/h2>\n<p>David East <a href=\"https:\/\/www.youtube.com\/watch?v=KWz7IAm35UM\">recently spoke at Angular U<\/a> on how to prepare for upgrading to NG 2. What&#8217;s particularly interesting is his usage of <a href=\"https:\/\/github.com\/Reactive-Extensions\/RxJS\">Rx.js<\/a> to avoid <code>$watch<\/code>.<\/p>\n<p>Here&#8217;s an example of a <code>peopleService<\/code> in the form of an Angular factory. Note, in the <code>subscribe<\/code> method, external listeners can register themselves on the Rx <code>ReplaySubject<\/code> for getting updates. The actual broadcasting happens in the <code>add<\/code> method which first performs the actual &#8220;business&#8221; logic (obviously quite simple in this demo service) and then broadcasts the changes.<\/p>\n<pre class=\" brush:php\">angular.module('demo', [])\r\n    .service('peopleService', PeopleService);\r\n\r\nfunction PeopleService() {\r\n  var peopleSubject = new Rx.ReplaySubject();\r\n\r\n  var service = {\r\n    subscribe: function(subscription) {\r\n      peopleSubject.subscribe(subscription);\r\n    },\r\n    add: function(people) {\r\n      people.push({\r\n        name: 'Name ' + (people.length + 1)\r\n      });\r\n\r\n      \/\/ broadcast\r\n      peopleSubject.onNext(people);\r\n    }\r\n  };\r\n  return service;\r\n}<\/pre>\n<p>At this point, on the <code>PeopleController<\/code> (or any other interested party) we can subscribe to those changes:<\/p>\n<pre class=\" brush:php\">function PersonController(peopleService) {\r\n  var vm = this;\r\n  vm.people = [];\r\n\r\n  peopleService.subscribe(function(people) {\r\n    vm.people = people;\r\n  });\r\n}<\/pre>\n<p>In the <code>people-list<\/code> directive, when the button is clicked and the <code>add<\/code> method invoked, we forward the action to our service, which &#8211; as we&#8217;ve seen &#8211; will broadcast the changes.<\/p>\n<pre class=\" brush:php\">function peopleListDirective() {\r\n  return {\r\n    controllerAs: 'peopleListCtrl',\r\n    controller: function($scope, $attrs, peopleService) {\r\n      this.people = $scope.$eval($attrs.people);\r\n\r\n      this.add = function() {\r\n        peopleService.add(this.people);\r\n      }.bind(this);\r\n    }\r\n  }\r\n}<\/pre>\n<h3><iframe src=\"http:\/\/embed.plnkr.co\/bLTZhfhL4eaYYjsLG9oZ\/preview\" width=\"100%\" height=\"400px\"><\/iframe><\/h3>\n<h3>Links<\/h3>\n<ul>\n<li>Presentation by David East on preparing for Angular 2\n<ul>\n<li>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=KWz7IAm35UM\">https:\/\/www.youtube.com\/watch?v=KWz7IAm35UM<\/a><\/li>\n<li>Source Code: <a href=\"https:\/\/github.com\/davideast\/angularu-a2-migration\">https:\/\/github.com\/davideast\/angularu-a2-migration<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/github.com\/Reactive-Extensions\/RxJS\">Reactive Extensions &#8211; Rx.js<\/a><\/li>\n<\/ul>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/juristr.com\/blog\/2015\/07\/learning-ng-prepare-ng2\/\">Preparing for Angular 2<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Juri Strumpflohner at the <a href=\"http:\/\/juristr.com\/blog\/\">Juri Strumpflohner&#8217;s TechBlog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have taken a closer look you already know that, yes, it will be new, things will be different (as it&#8217;s mostly the case with new stuff), but many concepts &hellip;<\/p>\n","protected":false},"author":5,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-5834","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Preparing for Angular 2 - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"I&#039;m sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preparing for Angular 2 - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"I&#039;m sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-21T13:15:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juri Strumpflohner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@http:\/\/twitter.com\/juristr\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juri Strumpflohner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\"},\"author\":{\"name\":\"Juri Strumpflohner\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060\"},\"headline\":\"Preparing for Angular 2\",\"datePublished\":\"2015-07-21T13:15:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\"},\"wordCount\":900,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\",\"name\":\"Preparing for Angular 2 - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-07-21T13:15:12+00:00\",\"description\":\"I'm sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Preparing for Angular 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060\",\"name\":\"Juri Strumpflohner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g\",\"caption\":\"Juri Strumpflohner\"},\"description\":\"Juri Strumpflohner mainly operates in the web sector developing rich applications with HTML5 and JavaScript. Beside having a Java background and developing Android applications he currently works as a software architect in the e-government sector. When he\u2019s not coding or blogging about his newest discoveries, he is practicing Yoseikan Budo where he owns a 2nd DAN.\",\"sameAs\":[\"http:\/\/juristr.com\/blog\/\",\"http:\/\/linkedin.com\/in\/juristr\/\",\"https:\/\/x.com\/http:\/\/twitter.com\/juristr\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/juri-strumpflohner\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Preparing for Angular 2 - Web Code Geeks - 2026","description":"I'm sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have","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:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/","og_locale":"en_US","og_type":"article","og_title":"Preparing for Angular 2 - Web Code Geeks - 2026","og_description":"I'm sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-07-21T13:15:12+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Juri Strumpflohner","twitter_card":"summary_large_image","twitter_creator":"@http:\/\/twitter.com\/juristr","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Juri Strumpflohner","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/"},"author":{"name":"Juri Strumpflohner","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060"},"headline":"Preparing for Angular 2","datePublished":"2015-07-21T13:15:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/"},"wordCount":900,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/","name":"Preparing for Angular 2 - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-07-21T13:15:12+00:00","description":"I'm sure you heard about Angular 2 and that it will be totally different. Forget everything you know and start from scratch. Jokes apart, if you have","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/preparing-angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Preparing for Angular 2"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060","name":"Juri Strumpflohner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g","caption":"Juri Strumpflohner"},"description":"Juri Strumpflohner mainly operates in the web sector developing rich applications with HTML5 and JavaScript. Beside having a Java background and developing Android applications he currently works as a software architect in the e-government sector. When he\u2019s not coding or blogging about his newest discoveries, he is practicing Yoseikan Budo where he owns a 2nd DAN.","sameAs":["http:\/\/juristr.com\/blog\/","http:\/\/linkedin.com\/in\/juristr\/","https:\/\/x.com\/http:\/\/twitter.com\/juristr"],"url":"https:\/\/www.webcodegeeks.com\/author\/juri-strumpflohner\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5834"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}