AngularJS 2.0 rewritten in ECMAScript?

So I just found out today that Angular 2.0 is coming out, they are using ECMAScript 6, but compiling it to 5, etc., etc., etc.

How will that (using ECMAScript) affect the usage? How will it be compatible with the JavaScript I use to call its API? I mean, having different languages (ES, JS) written together?

Confused at how this works. Help is appreciated.

EDIT

Sorry @Joseph if my question wasn’t clear enough, but I also (mainly) want to know how ECMAScript 5 runs in the browser and the second paragraph above keeping this in context.

How does a JavaScript person use Angular 2.0? How does ES work alongside JS code?

From the docs:

Though Angular will be in ES6, you can still write in ES5 if you don’t want to upgrade. The compiler generates readable JS and there are human-sensible analogs for the extensions.

I suspect that ES can be run by JS interpreters(?)

Binding Data in Angular 2 (ES5)

I am having trouble using data model binding in Angular 2.0 written in ES5 Javascript. I created a ToDo list following the Angular tutorial and various other sources, but I was not successful when trying to add ToDo items from an asynchronous request (either from a db or just added an item after a request is made).

The data will update, but it won’t show up in the DOM until I call an $event or somehow force Angular or Zone.js to go through another cycle.

Also, the only browser that this plunker works in is Chrome, so I’m not sure what is wrong there either.

Any help on any of those things would be appreciated!

Here is the plunker: http://plnkr.co/edit/p3Ipvw4SNut0XLOn76kJ?p=preview

Angular 2 hierarchical Providers in ES5

I’m getting started using Angular 2 using ES5, and I’ve hit a brick wall when setting up my providers. In essence, I want to make a provider depend on HTTP. Here’s how i have it set up:

var Provider = ng.core.Class({
    constructor: [ng.http.Http, function(http) {
       // some code here that uses HTTP
    }]
});

var Component = ng.core.Component({
    providers: [Provider, ng.http.HTTP_PROVIDERS]
}).Class({
    constructor: [Provider, function(provider) {
        // some code here that uses my Provider
    }]
});

I keep getting the following error: No provider for t! (e -> t)

I’ve omitted the rest of the boilerplate code because this is where I’m stuck. Do I have a misunderstanding about how I’m injecting my dependencies? How do I set up hierarchical dependencies in Angular 2 in ES5?

How do I import angular/http

I’m building an app in Visual studio using gulp and node.

Node puts all dependencies into a node_modules folder, when I build, gulp copies those to a libs folder in wwwroot.

I’ve been using other angular imports like component with out issue, but when I try this

import { Http, Response, RequestOptions, Headers, HTTP_PROVIDERS} from 'angular2/http';

I get a 404 when the page loads.

It looks like its trying to load angular/http from http://localhost:8273/angular2/http

I’m using Angular2 beta8, and targeting es5 to get around other issues.

So, how do I get rid of the 404, where do I configure it to look under the libs/angular folder for the http js file?

I tried typing that straight into the import, but kept getting not found errors.

'this' in Component of Typescript vs ES5 in Angular2

So I’ve been trying to work through converting my Angular2 app from Typescript to ES5 and have been trying to make both of them run similarly. The problem that I’m having is getting the this.people to update in the ES5 version.

When I console.log this in the constructor versus in my searchFor method, I get the scoping of the class versus the window’s scope. When I console.log this in my Typescript version, it stays within the SearchComponent and is the same in both.

Typescript Version:

import {Component} from 'angular2/core';
import {PersonService} from './person-service';

@Component({
  selector: 'search',
  properties: ['searchTerm'],
  templateUrl: `search.html`,
})

export class SearchComponent {
  searchTerm:string;
  searchPrefix:string;
  people:Person[];

  constructor(private _personService:PersonService) {
    this.searchTerm   = '';
    this.searchPrefix = "";
    this.people       = [];
    this.predicate    = 'last';
  }

  searchFor(term) {
    if (term.length < 2)
      this.people = [];
    else {
      this._personService.getUsers(term)
        .then((people)=> {
          this.people = people;
        });
    }
  }
}

ES5 Version

(function(app) {
  app.SearchComponent = ng.core
    .Component({
      selector: 'search',
      properties: ['searchTerm'],
      templateUrl: 'search.html',
      providers: [app.PersonService]
    })
    .Class({
      constructor: [app.PersonService, ng.router.Router,
        function(_personService, _router) {
          this.searchTerm = '';
          this.searchPrefix = "";
          this.people = [];
          this._personService = _personService;
          this._router = _router;
        }
      ],
      searchFor(term){
        if (term.length < 2)
          this.people = [];
        else {
          this._personService.getUsers(term)
            .then(function(people) {
              //Problem is with the 'this' below:
              this.people = people;
            });
        }
      }
    });
})(window.app || (window.app = {}));

I’ve had some success in making the components and services work but I’m a bit stumped on this, ha. Any help or corrections with the issue would really be appreciated!

http into a service with Angular2 with es5

I am working with Angular2 and es5. I want to use http in a service.
Unfortunately I have 2 errors:
– http is undefined, but ng.http.Http is defined,
– I have this error for the main component:

vendor-client.min.js:28 EXCEPTION: Can't resolve all parameters for class0: (t, ?)

Here is my service code:

;(function(app, ng) {
  console.log(new ng.http.Http());

  app.ApplicationsService = ng.core.Injectable().Class({
    constructor: [ng.http.Http, function(http) {
      console.log(http);
      this.applicationsEmailUrl = 'api/applications/email';
      this.http = http;
    }],

    emailExists: function(email) {
      console.log(email);
      var data = { email: email };
      return this.http.post(this.applicationsEmailUrl, data)
        .toPromise()
        .then(function(response) { response.json().data; })
        .catch(this.handleError);
    }

  });

})(window.app || (window.app = {}), window.ng);

Here is the main component:

;(function(app, ng) {

  app.AppComponent = ng.core
    .Component({
      selector: 'register-form',
      templateUrl: 'src/register/app.component.html'
    })
    .Class({
      constructor: [ng.core.ElementRef, app.ApplicationsService, function(ref, Applications) {
        console.log('app.component.js');
        this.programs = JSON.parse(ref.nativeElement.getAttribute('programs'));
        this.applications = Applications;
      }],
      emailExists: function(email) {
        console.log('emailExists() triggered');
        Applications.emailExists(email);
      }
    });

})(window.app || (window.app = {}), window.ng);

The bootstrap:

;(function(app, ng) {

  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic.bootstrap(app.AppComponent, [
      ng.forms.disableDeprecatedForms(),
      ng.forms.provideForms(),
      ng.http.HTTP_PROVIDERS,
      app.ApplicationsService
    ]);
  });

})(window.app || (window.app = {}), window.ng);

If I try to inject http into the main component within the providers array, it works. But I would rather prefer to have a service.

Angular2 find does not exist on Array

I have an angular2 project (2.0.0) using typescript 2.0.4.

I have this code:

var assignedIds: Array<string> = this.AssignedUsers.map(u => u.id);
var users = this.AllUsers.filter(all => all.id != assignedIds.find(id => id == all.id));

I’m getting an error on the find method:

Property ‘find’ does not exist on type ‘string[]’.

I get this error on several arrays – not just this one. A couple are number[], one is string[], and one it a custom object.

If I compile to es6 it works but I need to target es5.

Do I need some typings?

Correctly defining Angular 2.1.2 ES5 service for DI

I’ve defined an Angular 2 service that has the Http service injected into it and is used by other components, but I don’t think I’ve done it correctly:

(function (app) {
'use strict';
app.LoaderService = ng.core.Component({
    providers: [ng.http.Http],
    // TODO We shouldn't need to define a template in a service. Maybe service shouldn't be a Component?
    template: ''
  }).Class({
    constructor: [ng.http.Http, function (http) {
        this.http = http;
    }],
    getData: function (url, target) {
        var getter = this.http.get(url);
        getter.subscribe(function (result) {
            target.data = result.json();
        });
    }
  });
})(window.app || (window.app = {}));

Whilst this works, using ‘ng.core.Component’ forces me to define a ‘template’, otherwise I get a ‘No template specified’ error, but it’s really just a service, it shouldn’t need a template.

I tried defining it using ‘ng.core.Injectable().Class(…)’ as in this question:

create an angular 2 service in es5

but that gives an error ‘ng.core.Injectable(…).Class is not a function’. Maybe Angular has changed since that answer was written?

There are also plenty of examples of writing services as simple functions, but that wouldn’t let me inject the Http service into it.

How should I define the service in pure Javascript to support both injecting Http into it and allowing it to be injected into Components?

Angular 2 Lifecycle Hooks not called (ES5 javascript)

I’m writing an Angular 2 app in JavaScript (ES5) and my lifecycle hooks are not being invoked by the framework.

Attached are: a sample component with ngOnInit, index.html, app component, app module, main.js. ‘all.min.js’ is a file of all my Angular app js files, generated with uglifyJS.

The expected outcome is for ngOnInit of the component to be invoked and console message ‘ngOnInit’ to be printed. There is no message printed in Chrome console.

index.html (shortened for brevity):

<!DOCTYPE html>
<html>
<body>
<app>Loading...</app>
<script src="/app/assets/javascript/angular/Rx.js"></script>
<script src="/app/assets/javascript/angular/core.umd.js"></script>
<script src="/app/assets/javascript/angular/common.umd.js"></script>
<script src="/app/assets/javascript/angular/compiler.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser.umd.js"></script>
<script src="/app/assets/javascript/angular/platform-browser-dynamic.umd.js"></script>
<script src="/app/assets/javascript/angular/forms.umd.js"></script>
<script src="/app/assets/javascript/angular/shim.min.js"></script>
<script src="/app/assets/javascript/angular/Reflect.js"></script>
<script src="/app/assets/javascript/angular/zone.js"></script>
<script src="/app/assets/javascript/angular/system.js"></script>
<script src='/app/ng_app/all.min.js'></script>
</body>
</html>

app.component.js:

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'app',
      template: '<brief></brief>'
    })
    .Class({
      constructor: function() {

      }
    });
})(window.app || (window.app = {}));

app.module.js:

(function(app) {
    app.AppModule =
        ng.core.NgModule({
            imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
            declarations: [app.AppComponent,
                app.BriefComponent
            ],
            bootstrap: [app.AppComponent]
        })
        .Class({
            constructor: function() {}
        });
})(window.app || (window.app = {}));

sample component (brief component):

(function(app) {
    app.BriefComponent =
        ng.core.Component({
            selector: 'brief',
            templateUrl: 'ng_app/brief/brief.component.html'
            ]
        })
        .Class({
            constructor: function() {
            },
            ngOnInit: function() {
                console.log('ngOnInit brief');
            }
});
})(window.app || (window.app = {}));

main.js:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));