Angular Next brings the power of Angular 2 to Angular 1 and gives you an incremental migration path.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
dist
examples
lib/systemjs-register
src/angular2
test/ngNext
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js
package.json
testMain.js

README.md

Bower version Build Status

Deprecated! This project is way out of date and is not maintained.

angular-next

Angular Next brings the power of Angular 2 to Angular 1 and gives you an incremental migration path.

This library lets you start writing Angular 2 style directives and services and use them in an existing Angular 1 app. This allows you to incrementally adopt features from Angular 2 instead of needing to migrate all at once.

Warning: Angular Next is still highly experimental. It could change drastically as more information is released about Angular 2.0

Sample App: Angular 1 + Angular Next

index.html

<hello-component></hello-component>

<script src="//robianmcd.github.io/angular-next/dist/angularNext-standalone.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script>
    System.import('app').then(function (module) {
        module.main();
    });
</script>

app.js

import {bootstrap, Component, TemplateConfig} from 'angular2/angular2.js';

@Component({
    selector: 'hello-component',
    template: new TemplateConfig({
        inline: '<h1>{{ctrl.message}}</h1>'
    })
})
class HelloComponent {
    constructor() {
        this.message = 'Hello World';
    }
}

export function main() {
    angular.module('myApp', []);
    bootstrap(HelloComponent, {moduleName: 'myApp'});
}

Demos

Hello World

  • A working demo of the hello world example shown above.

Hello jspm

  • Uses jspm to load the Angular Next modules into the browser.

Color Slider

  • Demonstrates usage of: components, decorators, services, bootstrapping, selector, bind, observe, NgElement, injecting parent directives, injecting Angular 1 services, gulp, Traceur, etc.

Get Angular Next

Angular Next distributes two files

You can get Angular Next through bower

bower install angular-next

or from the CDN

<script src="//robianmcd.github.io/angular-next/dist/angularNext-standalone.js"></script>

or from jspm. See the jspm example for details.

jspm install angular2=github:robianmcd/angular-next

Documentation

For documentation on the supported features checkout the Wiki.

Changelog

0.0.3 - 2015-02-23

Added

  • Replaced ES6 Promise implementation with one based on $q so they are integrated with Angular's digest cycle.
  • Created an example using jspm

Changed

  • Replaced template option in Component directives with a new @Template annotation
  • Renamed assert.js module to angular2/rtts-assert.js

Click here for the full changelog

Roadmap

  1. support as much of the new template syntax as possible
  2. improve jspm example to include bundeling
  3. Improve unit tests and add e2e tests
  4. Look into integrating with the new router
  5. Add better logging for common errors
  6. Support template directives. Blocked: Waiting for more details to be released
  7. Support querying child directives. Blocked: Waiting for more details to be released