I'm working on an app in AngularJS using ES6, but I'm trying to do it in a way that will fit for AngularJS 2.0, so I'm using "Angular new router"
Application.js:
application is a directive and it is placed in the <html> tag as an attribute
class Application {
constructor($router) {
this.$router = $router;
this.routing();
}
routing(){
this.$router.config(
{
path: '/',
component: 'main'
//component: {'main': 'main'} // view-name:component => name.html, NameController
},
{
path: '/doctors',
component: 'doctors'
}
);
}
}
Application.$inject = ['$router'];
export default function() {
return {
scope: {},
controller: Application,
controllerAs: 'applicationCtrl'
};
};
Dashboard.js:
import doctorsCtrl from "../../page/dashboard/DoctorsCtrl.js"; // controller for the component
import mainCtrl from "../../page/dashboard/MainCtrl.js";
import doctors from "./widget/doctors/Doctors.js";
angular.module('agenda.dashboard', ['ngNewRouter'])
.directive("application", application)
.directive("doctors", doctors)
.config(function ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (name) {
return 'page/dashboard/' + dotCase(name) + '.html';
});
$componentLoaderProvider.setCtrlNameMapping(function (name) {
return name[0].toUpperCase() + name.substr(1) + 'Ctrl';
});
})
.controller('MainCtrl', mainCtrl)
.controller('DoctorsCtrl', doctorsCtrl);
function dotCase(str) {
return str.replace(/([A-Z])/g, function ($1) {
return '.' + $1.toLowerCase();
});
}
Main ('/') works correctly, but when I try to open ('/doctors') I get the error
TypeError: Cannot read property 'canonicalUrl' of undefined
at Grammar.recognize (router.es5.js:1453) at RootRouter.recognize (router.es5.js:752) at RootRouter.navigate (router.es5.js:680) at RootRouter.$$rootRouter.navigate (router.es5.js:94) at Object.fn (router.es5.js:89) at Scope.$get.Scope.$digest (angular.js:15556) at Scope.$get.Scope.$apply (angular.js:15824) at bootstrapApply (angular.js:1628) at Object.invoke (angular.js:4426) at doBootstrap (angular.js:1626)
I just found out that what you pass to
.config()is supposed to be an array.so when I change it to this:
It works perfectly.