AngularJS: Component fails to load controller

I am managing a directory structure that looks like this

--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js

Within index.html, I have the following setup


    <!DOCTYPE html>
<html en="us" ng-app="app">

<head>
    <title>Memory Game - DB1</title>
    <!-- bootsrap css-->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <script src="lib/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
    <!-- components -->
    <script src="js/components/header/headerComponent.js"></script>
</head>

<body>
    <div class="container" ng-controller="HomeCtrl as $ctrl">
        <h1>{{$ctrl.message}} </h1>
        <header></header>
    </div>
</body>

</html>

The content of js/app.js is:

    (function() {
       var app = angular.module('app', []);
       app.controller('HomeCtrl', function() {});
    })(); 

In component/header/headerComponent.js file:

    (function() {
    'use strict';
    var app = angular.module('app');

    app.component('header', {
        templateUrl: '/js/components/header/headerComponent.html',
        controller: 'headerController'
    });
})(); 

The code snippet from component/header/headerController.js looks like this:

    var app = angular.module('app', []);

    app.controller('headerController', ['$scope', function($scope) {
      $scope.titulo = "teste";
   }])

As for the content in component/header/headercomponent.html:

<h1>{{titulo}}</h1>

Despite the setup, there seems to be an issue with rendering the variable "titulo." I am trying to avoid using the controller: function () {} pattern within the component file. Additionally, I am encountering an error message: Uncaught Error: [$injector:modulerr]. How can I resolve this and call the external controller successfully?

Answer №1

You have declared your module twice, once in

component/header/headerController.js
.

var app = angular.module('app', []);

You should update it to:

var app = angular.module('app');

Additionally, it seems that

component/header/headerController.js
is not included in your index.html through a script tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve information from various tables in a SQLite database using Node.js

Is there a method to retrieve all data from multiple tables in a database? Currently, I have managed to fetch all data from a single table: router.get('/', function (req, res, next) { db.serialize(function () { db.all('SELECT id, name ...

differentiating between user click and jquery's .click() method

There are <a href=".. tags on a page with an inline onclick attribute. If a user clicks one without being logged in, they will be prompted to log in. After logging in and the page refreshes, jQuery will trigger .click() on the <a> element to redir ...

No spaces are being retrieved from the input field

After entering "test data" in the first input box and clicking the submit button, only "test" is displayed in another input box. The goal is to have "test data" appear in the script-generated input box as well. Sample HTML Code <input name="" type="te ...

How can we display or conceal text indicating the age of a patient based on the value returned from selectedPatient.age in a React application?

Hello, I am looking to dynamically display the age in years on the screen based on the value retrieved from selectedPatient.age, toggling between visible and hidden states. import React, { useContext } from 'react'; import { useHistory } from &ap ...

Tips for utilizing ng-checked and ng-disabled in conjunction with ng-repeat

I encountered a challenge with ng-repeat while incorporating ng-checked and ng-disable alongside it. <div ng-repeat="module in modulelist"> <input id="switch{{$index}}" ng-init="setState($index);" type="checkbox" ng-checked="switch.checked" ng-di ...

Attempting to store a specific h1 text.event as a variable, allowing it to be saved upon input of the initial letter

After typing the second key, you can continue to input more characters as desired. It is possible to customize the text displayed in the h1 using your own name or any other text of your preference without needing a textbox. $(document).keypress(functio ...

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...

Tips for updating the class name of a specific div element during runtime

I'm trying to dynamically update the class name for a specific div at runtime, and this div also includes support for image preview using JQuery. ...

What is the most efficient way to transfer a large search results array between NodeJS and AngularJS?

My application is built with NodeJS for the back-end and AngularJS for the front-end. I've run into an issue where sending a search query from Angular's $http to the back-end results in a bottleneck when there is a slow internet connection. Angul ...

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

Ways to display varied JSON information on a component in Angular 4

I am facing a challenge with a reusable component that fetches data from a JSON file. I want to customize the data displayed when this component is used as a subcomponent within other components. For example, let's say we have a Banana component: @U ...

Is there a way to apply the active class without relying on an anchor element?

After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...

Custom Angular directive for toggling button state during AJAX requests

I have an application with a form that has a save button. After submitting the form, a function save() is triggered to make an ajax request for form submission. Is there a way to create a directive that changes the text on the button from "Save" to "Loadin ...

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

Guide on automatically extracting table rows and generating an Excel spreadsheet

I am currently working on a script that dynamically adds the first row (TH) to a table and then exports it to an Excel sheet. However, I am facing an issue where instead of appending each row, the script keeps stacking on top of the next table row. Below ...

Tips for customizing the appearance of a React-Table header when sorting data

How can I change the header's background color in react-table based on a selected item? For example, if I click on ID, the ID header should change its background color to red. I have tried various methods to update the background color upon selection ...

Implementing custom validation in React to dynamically enable/disable buttons

I am working on a basic form that includes 3 input fields and one submit button. The submit button is initially disabled, and each input field has its own custom validation logic using regex. I am looking for a way to enable the button only when all the ...

Enhance the appearance of React.Fragment with custom styling

When working with React, my components adhere to a specific file structure schema: - componentName |- componentName.tsx |- componentName.scss Some of these components are wrapped with a <React.Fragment>, like this: render() { return ( &l ...

What is the simplest way to extract only the error message?

Having this code snippet. $('div#create_result').text(XMLHttpRequest.responseText); If we look at the content of XMLHttpRequest, it shows: responseText: Content-Type: application/json; charset=utf-8 {"error" : "User sdf doesn't exist"} st ...

Leveraging an AngularJS service within Angular framework

I am trying to incorporate an AngularJS service into my Angular project. Below is my main.ts file: import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {AppModule} from './app/app.module'; import {UpgradeMo ...