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

我的代码存在一些问题。我在我的网站上制作了一些组件，当我放置该脚本时，它只出现在最后一个。我已经尝试将文件放在不同的文件夹中，但问题仍然存在。所有组件和主模块都在应用程序文件夹中。感谢您的帮助！我无法加载angular.js中的脚本组件

<!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

来源

2017-09-03 Pil

你在每个文件中启动一个单独的应用程序在这里。

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

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

来源

2017-09-03 02:55:41

我已经试过了。将其他组件的模块注入到one.module.js中，并在控制台中显示：模块'appone'不可用！您拼错了模块名称或忘记加载模块名称。如果注册模块确保您指定依赖关系作为第二个参数。 – Pil

@Pil：我已经用评论代码示例更新了我的答案，并改进了单词选择。 –

WOORKS！谢谢！ – Pil

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

回答

相关问题