I’ve seen many ways to shape an Angular app in different companies. This means when we try to upgrade to Angular 2 some of them might be easy to migrate compared to others.
\n\nSo why we don’t try to write some code that is easy to migrate even before trying to upgrade???
\nAccording to Angular official website there are a few keys and patterns to follow which lets us make the transition smoother when the time comes. But first let’s discuss why we should upgrade.
\nYou might have not noticed but Angular 1.x can be very dangerous in the hand of a developer who does not know how stuff works and only wants to get the task done without thinking of the consequences.
\nThinking about all of the watches that will be put in a page plus a code that can be very poor designed is very scary and need to be considered by every team lead or team member specially during code reviews.
\nAnyway below you can find a couple of strong reasons on why we should think of moving towards Angular 2:
\nThe Angular Style Guides is a collection of useful patterns and practices that helps developers write readable, maintainable, cleaner and efficient code. It contains a wealth of information about how to write and organize Angular code - and equally importantly - how not to write and organize Angular code.
\nIn writing Angular 2, the team members tries to maintain the good parts while get rid of the bad ones. Although there are way more than that to be said but general idea is that it should be a framework which people can rely on in their production environments.
\nThere are a few particular rules in there that I would like to bold here:
\nJavaScript admittedly has plenty of flaws, but one of the largest and most prominent is the lack of a module system: a way to split up your application into a series of smaller files that can depend on each other to function correctly. While doing so having large number of smaller files is better than small number of large files, but it does not work well if we have to load them all into Html file by script tags.
\nBecause of dependencies that exists with this structure the need for a module loader is vital. There are a couple of good tools out there like Webpack, Browserify or SystemJs which pretty much are making use of typescript built in module system.
\nBy specifying import and export in modules we define which modules can be exported and which ones depend on another.
\nBecause Angular 2 itself is recommending to use that, we should migrate our current code to TypeScript even before starting the migration so there would be one less concern when the day comes. By just importing TypeScript compiler and renaming files from *.js to *.ts wouldn’t be enough. You have to at least follow some of the ES6 new features which you can find here (part 1, part 2, part 3). That’s why I started with them as one of the most important prerequisites of the process.
Angular 2 is heavily dependent on Components which basically are a portion of UI whose got a special logic behind that. The UI part can be a template but by containing them in a directive you can make sure that migration process would be easier.
\nWell that somehow makes things in perspective but to be more precise a directive which contains the template, controller and bindings required to deliver that functionality. Based on Angular website a directive should cover bellow items to be Angular 2 compatible:
\nrestrict: 'E'. Components are usually used as elements.scope: {} - an isolate scope. In Angular 2, components are always isolated from their surroundings, and we should do this in Angular 1 too.bindToController: {}. Component inputs and outputs should be bound to the controller instead of using the $scope.controller and controllerAs. Components have their own controllers.template or templateUrl. Components have their own templates.\r\nAlso it is mentioned that the directive should not use compile, replace: true, priority and terminal.This is how a ideal directive looks like:
\nexport function myDetailDirective() {\r\n return {\r\n restrict: 'E',\r\n scope: {},\r\n bindToController: {\r\n myInfo: '=',\r\n getCreditCardInfo: '&',\r\n },\r\n template: `\r\n <h2>My name is: {{ctrl.myInfo.myName}}</h2> \r\n <button ng-click=\"ctrl.onClick()\">Get card info</button>\r\n `,\r\n controller: function() {\r\n this.onClick = () => {\r\n this.getCreditCardInfo({ name: this.myInfo })\r\n }\r\n },\r\n controllerAs: 'ctrl',\r\n }\r\n}If you are already using Angular 1.5 you should use its Component API which helps you define such directives. This API enforces you to use controllerAs syntax and also has good default values for scope and restrict.
The above directive looks like below:
\nexport const myDetail = {\r\n bindings: {\r\n myInfo: '=',\r\n getCreditCardInfo: '&',\r\n },\r\n template: `\r\n <h2>My name is: {{ ctrl.myInfo.myName }}</h2>\r\n <button ng-click=\"ctrl.onClick()\">Get card info</button>\r\n `,\r\n controller: function() {\r\n this.onClick = () => {\r\n this.getCreditCardInfo(this.myInfo)\r\n }\r\n },\r\n}{: .box-note}\r\nNote: I had to remove the $ from above code because of mark down rendering errors.
\nWhen everyone was thinking of how to deal with breaking changes introduced in the very initial introduction of Angular 2, they were trying to tackle this issue to make it easier to upgrade. They came up with ng-upgrade, an awesome Adapter which let’s you mix Angular 1 and 2 code together.
\nThis way, (if you’ve already done the steps mentioned earlier) you can start migrating your components one by one and not worry about what happens with current state of the product. The story gets more exciting as directives and services in one application can interact with the other one which is amazing (and also dangerous in the wrong hands).
\nIn order for this to happen four things need to be in place:
\nWith these four things being interoperable, we can already start upgrading our applications component by component. Routing is another part that can help but is not necessarily mandatory, since we can totally stick with any Angular 1 routing system while upgrading.
\nAn example is shown in the following code to illustrate what we talked about:
\nimport { UpgradeAdapter } from '@angular/upgrade'\r\n\r\nvar adapter = new UpgradeAdapter()\r\nvar app = angular.module('myApp', [])\r\n\r\nadapter.bootstrap(document.body, ['myApp'])Cool now we can take advantage of ng-upgrade in our Angular 1 app and start migrating to Angular 2. Of course there are a lot more to do but you get the idea.
\nIf you are planning to upgrade to Angular 2 and also the language you are using like ES6, it completely makes sense that you should use .service() instead of .factory() where a service can be potentially a class.
In Angular 2, a service is also just a class, so this seems like a logical step to undertake.
\nI think that’s enough for making you think about the steps you have to take to be ready take off. For a full documentation on preparation you can read this page.
","timeToRead":6,"frontmatter":{"title":"Preparation steps for Angular 2 migration","unformattedDate":"2016-07-13T00:00:00.000Z","date":"Jul 13, 2016","path":"/preparation-steps-for-angular-2-migration/","author":"Yaser Adel Mehraban","tags":["angular","angular 2","component","directive","migration","systemjs","typescript","webpack"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAAAsTAAALEwEAmpwYAAADZElEQVR42oVTe0xTVxg/dSgSFp0yX5GoFCq9LaXQW4faSTSKQyFxyx6JhEVRY3wmmhiZbCbL1Jio+8eZGh/IFheNr/BSRtZN2lrAYQtiH5Tb3l4ot9CC0NFiaXsfx3NBnUYXv3O+c05y8vt+33fO7wMQQp5lIctBHg04ysRdBOELDMbhhPE8ukULfJeByW2M5ymabq+923HwSOuXpTVbdv6lvdBptgRCIRb+r4EYwzzWG9qOHrcWfuVZumxIjBNVv99dsbZhobQ2b0192S7dxUqPywU5nmNYnmHha1mAMOQtuw/658v8mXl9i3OGyvYTI8O1h440irMbM/E/U7Hq7OXtFvNkBQKC41EIHpUpMENoO3GaTlPR2fnetNxRnZ5o1FVXXvlj5bp7UlUDmpr1xPlr/s2HXQeOhdo6uVhs4i2ECVAE68UqLwKL8f7Pvw17++wKTc1PJxrKjxrmYJaPcWeSigRS5wyF4UPMmIR1fPqN99SFZ04SZSI8mL2mvjcdpxcph67fCZOUY/P2usMVnZoSCsipKbmeqSoXWBrS3uja8Z1elG5MkukTJMbpGP3LbwLYZWohM9QD+cVBrzfc/qQbpa3V2iSfeUCWO1HlBlk9C1bDsciw7oFhWqYpRdU8b9l9sAjxC+BeRxchzRv59dqIzTGQrrZJ1PUyvCMFp0Q5ZCJOAPHwD2djFB11ex+vLdV/IDHNVqEogzfvCWAf7bPmF42ePjewr7w/Q21TaOoUn5jn4j2iHLcom0xWsx4fVbSjX3t18HZjE1himpVrTJYH9Q8FcJRhOv9usnxRSi3MGkLM2PI6ibJllpxKEGgDWytgnKVLy/vOXObGo21YAaJtTlFFCArAlz/oD4csN245NpVYM/DqgmJTyV5PQq5bJB83mlnf4LjZHrLYuEi096T2Pkh9mLGGCY6+kCc/4UiJvbTPdOmK3WH/12x1g3T/14f4aKxPUuwE8iYgJvb/yI49a0nVPFJs4ONx8Eprr9TPcsKBDQyTicpAWUXwZCUJZM6pSsN0rHXxqsD1un9kBU82bvuvMd4IgZwT1BezEgOFewiwhBRh3Um46aOcpilphmSM+v7n+NPgO8BvW0TX2q/Z0gWkD2Yqu3dWRFw9kyTvAyN+ZqIjx2PBquoRXfOL3F721nMefM73orsXWAAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/b2d786120012ce828f21ed0d786956d2/2f861/migration.png","srcSet":"/static/b2d786120012ce828f21ed0d786956d2/2f861/migration.png 718w","sizes":"(min-width: 718px) 718px, 100vw"},"sources":[{"srcSet":"/static/b2d786120012ce828f21ed0d786956d2/dd172/migration.webp 718w","type":"image/webp","sizes":"(min-width: 718px) 718px, 100vw"}]},"width":718,"height":605}}}}}}]}},"pageContext":{"tag":"systemjs"}},"staticQueryHashes":[],"slicesMap":{}}