javascriptangularjsangularjs-ng-routeangular-componentsangular-component-router

AngularJS: Component controller not loaded when routing with ngRoute


I am an AngularJS beginner. I have the following code:

A component defined by the following js file:

angular.module('EasyDocsUBBApp')
    .component('loginTag', {
        templateUrl: 'login-tag/login-tag.html',
        controller: function () {
            alert(1);
            this.login = function () {
                console.log(this.username + ':' + this.password);
            };
        }
    });

The content of my app.js file, where I also configured the routing is:

var app = angular.module('EasyDocsUBBApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'login-tag/login-tag.html'
        })
        .when('/test', {
            templateUrl: 'test.html'
        })
        .otherwise({
            redirectTo: 'login-tag/login-tag.html'
        });
});

My issue is that the controller is not loaded (the alert window does not appear). Could someone indicate me what I did wrong? (if any supplementary details on my code are needed, please tell me)


Solution

  • In your configuration for $routeProvider, try this:

    .when('/', { template: '<login-tag></login-tag>' })

    Remember to add your component.js to your index file.