Question

我的代码存在问题。我在我的网站上制作了一些组件，当我放置脚本时，它只显示最后一个。我已经尝试将文件放在不同的文件夹中，但问题仍然存在。所有组件和主模块都在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>

app.module.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";


            }
 }());

one.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

Answer 1

您可以在此处为每个文件中的单独应用启动。

相反，只需引导一个，然后将所有组件和控制器注册到一个组件。

// 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>组件，因为它是您加载的最后一个组件，有效地覆盖了之前的应用声明。

我无法在angular.js中加载脚本组件

1 个答案: