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

Posted 2023-03-13

【中文标题】AngularJS：使用ngRoute路由时未加载组件控制器

【英文标题】：AngularJS: Component controller not loaded when routing with ngRoute

【发布时间】：2017-03-29 18:41:53

【问题描述】：

我是 AngularJS 初学者。我有以下代码：

由以下js文件定义的组件：

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

我的app.js文件的内容，我也在其中配置了路由：

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'
        );
);

我的问题是控制器未加载（未出现警报窗口）。有人可以指出我做错了什么吗？ （如果需要我的代码的任何补充细节，请告诉我）

【问题讨论】：

你的路由模板应该指向你的组件被调用的html。基本上你正在加载没有变量的html。

【参考方案1】：

在 $routeProvider 的配置中，试试这个：

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

记得将你的 component.js 添加到你的索引文件中。