AngularJS：使用ngRoute进行路由时未加载组件控制器

Question

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)

Answer 1

In your configuration for $routeProvider, try this:

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

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