A migration readiness test.
The official Angular Style Guide is actually owned and maintained by John Papa. It has long been the defacto standard and was fairly recently been officially adopted by Angular.
The good news is that if you have closely followed and kept up with current stack recommendations on file structure, organization and architecture, you are already in-line with the style guide.
Where's my app?
Module loaders (or bundlers) are a build time tool that allow for modularizing JavaScript files. JavaScript modules have not yet been implemented by any engine. Module loaders work by bundling referenced modules into a single file at build time.
The most common module loaders are Browserify, Webpack and System.js. Any of these work for upgrade purposes. The JavaScript stack uses Browserify.
Where's my app?
The Angular team has chosen TypeScript as the preferred language for writing Angular 2 applications, going so far as to write the Angular 2 code base in it. Angular 2 technically supports any compile to JS or plain JS, but modules and patterns sometimes differ and those discrepancies must be sussed out in the documentation.
If your team intends to move a project to Angular 2. It's best to follow Angular's preferred tools.
Where's my app?
Angular 1.5 introduced a way for creating directives as a component with the component method. This method is sugar on top of the directive method that removes boilerplate for this particular kind of directive. It is also the closest analog for Angular 2 components within Angular 1.
Angular 1.5 was officially release Feb 8, 2016. Fortunately, the MWS has been recommending using directives in the manner component creates it for some time, so moving to it will relatively easy.
Where's my app?
/* version-directive.js */
export default () => ({
scope: {},
bindToController: {
v: '@'
},
controller: 'VersionController',
controllerAs: 'vc',
restrict: 'E',
template: `<p>Current version is {{vc.version}}</p>`
});
//app.js
import version from './components/version/version-directive';
...
.directive('versionNumber', version);/* version-component.js */
export default {
bindings: {
v: '@'
},
controller: 'VersionController',
template: `<p>Current version is {{$ctrl.version}}</p>`
};
/* version-directive.js */
import version from './components/version/version-component';
...
.component('versionNumber', version);Take some time to honestly assess your application and it's compliance with Angular's preparation steps. To get a rough idea of how much work would be involved in getting ready for an upgrade, take the number of stars given to your application and divide it by 20
Where's my app?
It common practice to bootstrap an Angular 1 app with the `ng-app` directive.
<body ng-app="myApp">
...
</body>This method is not possible in Angular 2. Instead, you should bootstrap your app within JavaScript.
angular.bootstrap(document.body, ['MyApp']);The Component is the most fundamental of Angular concepts.
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }Angular components are controller classes decorated with metadata that describe the view.
Angular applications are simply compositions of components fed data via services.
Angular provides a quickstart guide for laying down the bare essentials for an Angular 2 application which consist of the following files.
One fell swoop.
You can rewrite your app into Angular2. That not really a migration, but you may find this is less work or more advantageous than the other strategies.
Option
Looking Forward
You can use ngForward (v0.0.1-alpha2 at the time of this writing) which essentially transpiles mostly Angular2 code to Angular1.
It's "mostly" Angular2 code because it does have it's own syntax and APIs that are not completely inline with Angular2 and would break within an Angular2 environment.
option
option
When we use UpgradeAdapter, what we're really doing is running both versions of Angular at the same time.
It will be up to each project to decide whether the tradeoffs that come with downloading and running 2 frameworks simultaniously in the browser are justified.
The steps needed to prepare to move from Angular 1 to Angular 2 are the same steps needed to bring your app inline with JavaScript stack standards, which are the same as the Angular style guide. It is not just about having the latest framework or library versions. It's also about having the right architecture.
Angular 1.x changed recommended architecture several times. It went largely unnoticed because it remained backwards compatible. Angular 2 changes that.
Currently the only recommended front end application framework is Angular 1.x. We looked at Angular 2 today because it is expected to be a significant player in the front end space when it is released.
Regardless of any recommendation the stack team may make, It is valuable for every front end developer to understand the lay of the land in the broader front end community and to be familiar with the main contenders their.
It is important for us to provide transparency to our process and be receptive to feedback and suggestions for those who use our tools or follow our guidelines. Our goal is to build a front end culture and community at ICS.