gpt4 book ai didi

javascript - 我无法在 angularjs 中加载脚本组件

转载 作者:行者123 更新时间:2023-11-28 03:04:18 24 4
gpt4 key购买 nike

我的代码有一些问题。我在我的网站上制作了一些组件,当我放置脚本时,它只出现在最后一个。我已经尝试将文件放在不同的文件夹中,但问题仍然存在。所有组件和主要模块都在 app 文件夹中。感谢您的帮助!

<!DOCTYPE HTML>
<html ng-app="app">
<head>
<title>TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="public/css/main.css" />
</head>
<body>
<!-- Header -->
<header-component></header-component>

<!-- Banner -->
<banner-component></banner-component>

<!-- One -->
<one-component></one-component>


<!-- Scripts -->
<script src="public/js/jquery.min.js"></script>
<script src="public/js/skel.min.js"></script>
<script src="public/js/util.js"></script>
<script src="public/js/main.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/banner/banner.component.js"></script>
<script src="app/header/header.component.js"></script>
<script src="app/one/one.component.js"></script>
</body>
</html>

应用程序模块.js

(function(){
'use strict';
angular
.module('app', []);
}());

header.component.js

(function(){
'use strict';
angular
.module('app', [])
.component('headerComponent', {
bindings: {},
templateUrl : 'app/header/header.html',
controller : headerCtrl
})

function headerCtrl($scope){
console.log('header')
$scope.logo = "theory";
$scope.home = "Home";
$scope.generic = 'Generic'
$scope.elements = "Elements";

}
}());

banner.component.js

(function(){
'use strict';
angular
.module('app', [])
.component('bannerComponent', {
bindings: {},
templateUrl : 'app/banner/banner.html',
controller : bannerCtrl
})

function bannerCtrl($scope){
console.log('banner');
$scope.welcome = "Welcooome to Theory";


}
}());

一个.component.js

(function(){
'use strict';
angular
.module('app', [])
.component('oneComponent', {
bindings: {},
templateUrl : 'app/one/one.html',
controller : oneCtrl
})

function oneCtrl($scope){
$scope.articulos = [
{
titulos : "Magna tempus sed amet 1",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},
{
titulos : "Magna tempus sed amet 2",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},
{
titulos : "Magna tempus sed amet 3",
textos : "Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.",
btn : "More"
},


]


}
}());

enter image description here

最佳答案

您在此处的每个文件中引导一个单独的应用程序。

相反,只引导一个,然后将所有组件和 Controller 注册到一个。

// bootstrap just one app
var app = angular.module('app',[]);

// then register all your controllers to the same app
app.controller('oneCtrl', ['$scope', function($scope) {
// your controller code
}]);

// and register all your components to the same app
app.component('oneComponent', {
bindings: {},
templateUrl : 'app/one/one.html',
controller : 'oneCtrl'
});

您只会看到 <one-component></one-component>组件,因为它是您加载的最后一个组件,有效地覆盖了之前的应用程序声明。

关于javascript - 我无法在 angularjs 中加载脚本组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46019803/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com