Write AngularJS 1.x application prepared for Angular2

Hi there. Today is September 2016 and here’s the current state of JavaScript frameworks and techs we are gonna be talking about:

• AngularJS 1.x is getting outdated and it’s version is 1.5.x
• Angular2 is still in RC6 and cannot be used in production yet
• React is already 15.3.x and it’s nicely used with Redux

Last month I gave a talk about Angular2 and people asked which framework to use for starting new project. I cannot recommend you Angular2 yet but I can give you some practical advices how to write your AngularJS 1.5.x application “correctly”

Components

Problem

The Reality of Most AngularJS 1.x Apps is that they are written in ‘Scope Soup’ architecture (more and more). This is an anti-pattern, which makes your application difficult to work with, non-extendable and hardly maintainable.

Here are some points that should be avoided while creating and designing an AngularJS application:

• Using of ng-include instead of directives/components
• Some controllers manage several nested templates, and some templates introduce several controllers
• Primary way to share data between different components is scope/rootScope, not isolated scope
• MVC directory structure (separate folder for controllers, templates, directives) (more)
• Using controllers for all business logic
• Too many watchers (more)
• Using jQuery (more)

Solution

But how to refactor that? Or what is the correct way to build applications? And the answer is – Component architecture. All of the major JavaScript frameworks are converging towards a concept of Components as the building blocks of UI. A component is basically just a custom HTML element that matches a component name and usually has certain inputs and outputs, which we supply as properties on the element. (more)

AngularJS 1.5.x showed us a new special kind of directive which is a .component() (docs and more). As already mentioned, the component helper makes it easier to structure your application with a component-based architecture.

And that component approach will help you to migrate to Angular2 (components in Angular2)

AngularJS 1.5 + ES6/TS as a transition to Angular2

Writing application using AngularJS 1.5.x in combination with ES2015 and Component architecture makes migration to Angular2 easier.

Let’s take a look at some ways of using new version of JavaScript to create an AngularJS application.

ES2015 (ES6)

ES2015 is the newest version of the ECMAScript standard for the moment. This standard was ratified in June 2015.

Here is a short review of ES6 features: Learn ES2015

Modern browser support most of those (compatibility table) but if you want to support some older browsers or just to be sure that all features work fine then you’ll have to use a JavaScript transpiler (review them) and Babel is the most popular one nowadays.

Module bundler

In order to use new module system JS transpiler is not enough, you need to have a Module Bundler (modules in JS)

1. WebPack is the most popular nowadays, easy to use
2. jspm is most popular among Angular2 applications

Writing AngularJS 1 using ES6

Modules

This is an example of how the main module may look like. This is the entry point of your application that defines your main module, require dependencies, configs:

index.js:

// importing external dependencies
import angular from 'angular';
import uiRouter from 'angular-ui-router';//v1-import into a variable
import 'angular-animate';                //v2–inline import

// importing custom modules
import {myModule} from './my-module';

// configs, router, services
import routesConfig from './routes';
import {MyService} from './pathTo/my-service';

// styles
import './index.css';

angular
    .module('myApp', [
        // dependencies
        uiRouter,           // v1 - using a variable
        'ngAnimate',        // v2 - addressing to module name
        // modules
        myModule
    ])
    .config(routesConfig)
    .service('MyService', MyService);

And an example of a new custom module:

my-module.js:

import angular from 'angular';

import component from './pathTo/my-component'

export const myModule = 'myApp.myModule';

angular
    .module(myModule, [])
    .component('myComponent', component);

Components

A nice approach would be to distinguish ‘smart’ and ‘dumb’ components. (more and more)

An example of a “smart” component would look like this:

my-component.js:

import template from './tmpl.html'

class MyController {
    // this is how DI works:
    /** @ngInject */         // https://github.com/olov/ng-annotate
    constructor(myService) {
        // inject and make available by assigning to 'this'
        this.myService = myService;
    }

    getElements() {
        this.els = this.myService.getElements();
    }
}

export default {
    template,
    controller: MyController
};

Services

A service is just a plain ES6 class, like in Angular2

my-service.js:

export class MyService {
  getElements() {
    return [...];
  }
}

This service was injected in the component above. You can also inject other services into this one using same approach (in constructor)

---

And a general overview by Scott: