I am trying to assign the controller to the state in ui-router. The controller is compiled by traceur.
State assignation looks like this:
$stateProvider
.state('form', {
url: '/form'
, templateUrl: 'views/form.html'
, controller: 'FormController as Form'
})
Compiled controller looks like this:
var FormController = function FormController($stateParams, $http) {
this.data = {};
this._stateParams = $stateParams;
this._http = $http;
this.formTemplate = "";
};
($traceurRuntime.createClass)(FormController, {
submit: function() {
console.log('submitted');
}
}, {});
I obviously receive a runtime error which says that FormController is not a function. Is there a way around it? Any other solution?
There is working example - I just changed the order of definition
var app = angular.module('brokenApp', ['ui.router'])
.config(ApplicationConfig)
;
// controller def in JS world
var FormController = function ($sc, $stateParams, $http) {
$sc.title = "hello from scope";
this.title = "hello from controller";
this.data = {};
this._stateParams = $stateParams;
this._http = $http;
this.formTemplate = "";
};
// DI
FormController.$inject = ['$scope', '$stateParams', '$http']
// controller injection into angular
app.controller('FormController', FormController);
There is new form.html
<h1>Hello Plunker!</h1>
<h3>$scope.title: </h3>
{{title}}
<h3>controller.title: </h3>
{{Form.title}}
Instead of this original code:
angular.module('brokenApp', ['ui.router'])
.config(ApplicationConfig)
.controller('FormController', FormController);
//# sourceURL=app-wrapper.js
"use strict";
var FormController = function FormController($stateParams, $http) {
this.data = {};
this._stateParams = $stateParams;
this._http = $http;
this.formTemplate = "";
};
Check the working version here