2015-06-11 4 views
1

Я работаю над приложением в AngularJS с использованием ES6, но я пытаюсь сделать это таким образом, который подходит для AngularJS 2.0, поэтому я использую "Угловая новый маршрутизатор"AngularJS - TypeError: Не удается прочитать свойство «canonicalUrl» undefined

application.js: приложение является директивой и помещается в <html> тег в качестве атрибута

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 («/») работает правильно, но когда я пытаюсь открыть («/ врачей») я получаю ошибку

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) 
+0

определяется ли переменная врачей? что вы получаете, если вы console.log (врачи)? – n00b

+0

@Braim Вы имеете в виду это «импорт врачей из» ./widget/doctors/Doctors.js?; '? – Stevik

+0

Переменная врачей перешла к методу директивы. Незадолго до метода angular.module поместите строку console.log – n00b

ответ

0

Я только что узнал, что вы передаете .config() должен быть массивом.

поэтому, когда я изменить его к этому:

routing(){ 
     this.$router.config(
     [ // NOTE THIS 
      { 
       path: '/', 
       component: 'main' 
       //component: {'main': 'main'} // view-name:component => name.html, NameController 
      }, 
      { 
       path: '/doctors', 
       component: 'doctors' 
      } 
     ] // NOTE THIS 

     ); 
    } 

Он отлично работает.

Смежные вопросы