Html angularJs组件和控制器

我已经创建了角度组件，代码如下所示：

（函数（）{
"严格使用",；
有棱角的
.module（'App'，['ngMaterial'））.component（'autoComplete'{
模板：'\
\
\
\
\
{{item.display}\
\
\
未找到与“{$ctrl.searchText}}”匹配的状态\
创建一个新的\
\
\

\
\
\
',
控制器：函数DemoCtrl（$timeout、$q、$log、$http）{
$log.info（'Called'）；
var self=这个；
self.simulatequaly=false；
self.isDisabled=false；
//“状态”值/显示对象列表
self.states=loadAll（$http）；
self.querySearch=querySearch；
self.selectedItemChange=selectedItemChange；
self.searchTextChange=searchTextChange；
self.newState=newState；
函数newState（state）{
警报（“对不起！您需要先为“+州+”创建一个宪法！”）；
}
// ******************************
//内部方法
// ******************************
/**
*搜索状态…使用$timeout模拟
*远程数据服务调用。
*/
函数querySearch（查询）{
//var results=query？self.states.filter（createFilterFor（query））：self.states，
//推迟；
//if（自模拟）{
//递延=$q.defer（）；
//$timeout（函数（）{deferred.resolve（results）；}，Math.random（）*1000，false）；
//回报。承诺；
//}否则{
//返回结果；
//}
所有国家；
返回$http.get（“/Home/GetStates”，{params:{q:query}）
.然后（功能（响应）{
所有状态=响应；
返回allStates.data.split（/，+/g）.map（函数（状态）{
返回{
值：state.toLowerCase（），
显示：状态
};
});
})
//$http({
//方法：“GET”，
//url:“/Home/GetStates”
//}).then（函数成功回调（响应）{
//所有状态=响应；
//}，函数errorCallback（响应）{
//警报（响应）；
//返回false；
//});
}
函数searchTextChange（文本）{
$log.info（'文本更改为'+文本）；
}
功能selectedItemChange（项目）{
$log.info（'Item改为'+JSON.stringify（Item））；
}
/**
*生成键/值对的“状态”列表
*/
函数loadAll（$http）{
//所有国家；
//$http({
//方法：“GET”，
//url:“/Home/GetStates”
//}).then（函数成功回调（响应）{
//所有状态=响应；
//返回allStates.split（/，+/g）.map（函数（状态）{
//返回{
//值：state.toLowerCase（），
//显示：状态
//        };
//    });
//}，函数errorCallback（响应）{
//警报（响应）；
//返回false；
//});            
}
/**
*为查询字符串创建筛选器函数
*/
函数createFilterFor（查询）{
var lowercasequaly=angular.lowercase（查询）；
返回函数filterFn（状态）{
返回（state.value.indexOf（lowercasequaly）==0）；
};
}
}
})
})();您正在处理模块声明，要么声明一次，要么正确执行

做对了
声明模块后，可以使用

angular.module('App')

因此，在html文件中没有任何更改，但在两个其他文件中，将
angular.module（'App'，[…]）替换为
angular.module（'App'）

这是实现它的最佳实践，将每个组件保持在隔离的
（function（）{..}）（
块中

申报一次
对于您的问题，我通过将第一个调用的脚本（html内联）更改为：

然后我使用这个变量，而不是每次重新定义一个新模块：

(function(app){
   // controller or component here
}(app));

这就成功了，不过这可能是更复杂的模块覆盖。此外，您应该避免全局变量

我的TestController：
（功能（应用程序）{
var TestController=函数（$scope）{
$scope.Display=“测试显示”；
};
app.controller（“TestController”，[“$scope”，TestController]）；
}（app））您正在处理模块声明，要么声明一次，要么正确执行

做这件事
(function(app){
   // controller or component here
}(app));

(function () {
    var app = angular.module("App");
    var TestController = function ($scope) {
        $scope.Display = "Test Display";
    };
    app.controller("TestController", ["$scope", TestController]);
}());

var app = angular.module("App");