There seems to be an issue: [ng:areq] - Please visit the following link for more information: http://errors.angularjs.org/1

Hey there! I'm in need of some assistance. Just started learning Angular and tried setting it up like this.

This is the structure of my files:

AboutController.js

function AboutController( $scope ){
  $scope.data = {
      "data" : {
          "name" : "nameku",
          "email" : "email.com"
      },
      "data" : {
          "name" : "nameku2",
          "email" : "email2.com"
      }
  }
}

about.html

<script type="text/javascript" src="controllers/AboutController.js"></script>
<div ng-controller="AboutController">
    <ul ng-repeat="d in data">
      <li>{{d.name}}</li>
    </ul>
</div>

index.html

<html ng-app="TestingAngular">
<head>
<title>TestingAngular Dashboard</title>
</head>
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="route.js"></script>
  <body>
        <div ng-view></div>
  </body>
</html>

route.js

angular.module('TestingAngular', ['ngRoute'])
  .config( function( $routeProvider ){
      $routeProvider
        .when(
          '/about' , {templateUrl: 'views/about.html'}
        )
        .when(
          '/contact' , {templateUrl: 'views/contact.html'}
        )
        .when(
          '/' , {templateUrl: 'views/home.html'}
        );
  });

I'm facing an issue where I receive the following error. Is there a way to make it work as intended?

When I move the

<script type="text/javascript" src="controllers/AboutController.js"></script>

to index, it seems to work fine. Please advise if I am on the right track.

Error: [ng:areq] http://errors.angularjs.org/1.2.25/ng/areq?p0=AboutController&p1=not%20aNaNunction%2C%20got%20undefined at Error (native)

Answer №1

In order for AngularJS to function properly, all controllers, services, directives, and filters must be registered during the config stage before the application can run. Dynamic or lazy loading is not inherently supported by AngularJS, so all scripts need to be included in the index pages beforehand.

If you are interested in implementing lazy loading functionality, you may want to explore custom components like these: https://github.com/ocombe/ocLazyLoad

https://github.com/nikospara/angular-require-lazy

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

Vue.js fails to display multiple uploaded images

I have been working on implementing a multiple image upload feature using vue.js. So far, everything seems to be functioning correctly. However, I am facing an issue where the HTML does not display thumbnails of the images I have selected. Additionally, I ...

TRPC fails to respond to the passed configuration or variables (e.g., when enabled is set to false)

Recently started using trpc and I'm trying to grasp how to utilize useQuery (which I've previously worked with in react-query): const IndexPage = () => { const { isLoading, data, isIdle } = trpc.useQuery([ "subscriber.add", { email: ...

Generate a new web component using JavaScript

My HTML table looks like this: <table id = "rpttable" name = "rpttable"> <thead> Column Headers here... </thead> <tbody id = "rptbody" name = "rptbody"> data here <3 .... </tbody> </table> And in my ...

Error encountered when attempting to run an Angular 2 application with 'ng serve' command

Initially, I installed angular-cli using the command npm install -g angular-cli and then proceeded to create an angular-cli project. Following that, I used the command ng new Angular2TestProject to create a project and changed the directory to Angular@Test ...

The import 'react-router' does not include an export called 'browserHistory'. This issue is coming from the /src/App.js file

I've recently started diving into the routing section of learning react, but I'm a bit puzzled by the error message I encountered. Error: Failed to compile ./src/App.js 31:19-33 'react-router' does not contain an export named 'bro ...

Saving an array within the Yii framework

The view contains the following form: <form method="POST" action="<?php echo Yii::$app->request->baseUrl;?>/telephone/addnow/" role="form" enctype="multipart/form-data"> <label>Upload your photo:</label><input type="fi ...

Unable to process jquery AJAX request

Hello, I've been attempting to make a simple ajax call to a method in my code behind. Despite keeping it straightforward for testing purposes, I keep encountering errors. It seems like a basic mistake, but I'm at a loss on how to proceed. The pro ...

assigning a variable using jQuery

<script> function update(elem) { var ele=$(elem).siblings('label#test').html(); var a=document.getElementById('test'); var htm = '<input type="text" name="modal" id="modal" style="width:70%;" value="'+$(elem).siblings ...

Is there a specific method or function that can effectively translate special characters such as into their corresponding representations?

When a user provides input for my script using shell arguments, it would look something like this: Kek kek\nkek\tkek\x43 After receiving the input, Javascript interprets my parameter in a specific way: var parameter="Kek kek\&bs ...

Approach to Using Bootstrap 4 with Intl-Tel-Input

I've been attempting to integrate intl-tel-input with bootstrap 4, but I'm facing an issue where the placeholder for the input is not showing up. I've tried various solutions found online, but none of them seem to work. Here's my HTML ...

Absence of receiving any HTTP error codes when making REST calls

In our application, it is crucial to differentiate between 400 and 500 range error codes for distinct processes. Let's consider three REST calls: The first returns a status code of 200, the second returns 401, and the third returns 502 Initially, ...

What is the best way to eliminate index.html and exclamation mark from a URL when using AngularJs ui-router?

Recently, I've been working on my state configuration in JavaScript Currently, my URL appears as follows: https://i.stack.imgur.com/FEgjx.png I am looking to eliminate 'index.html' and the exclamation mark from my URL, similar to this exa ...

Utilizing Javascript for a Stopwatch/Countdown in the Format: 00:00:00

I am currently working with this block of code: function startStopwatch() { vm.lastTickTime = new Date(); $interval.cancel(vm.timerPromise); vm.timerPromise = $interval(function() { var tickTime = new Date(); ...

connecting elements in an object's array to another array within a nested object

Is there a way to iterate through each string value in the imageKeys array and use it to create a URL for each object in the images array within the nested ImageList object, all without changing the original object? const myInitialStateFromParent = { ...

Is ES5 essentially the same as ES6 in terms of my lambda search?

After doing a search on an array using ES6, I am having trouble figuring out how to rewrite the code in ES5 due to restrictions with Cordova not allowing me to use lambda functions... $scope.Contact.title = $scope.doctitles[$scope.doctitles.findIndex(fu ...

Unable to fetch local file using ajax from a local HTML page

According to Same Origin Policy, the SOP should not be applied to the file:// protocol. However, I'm having trouble with my code. I am running a testing page from my local system, and both when I try to access abc.txt in the same directory as the HTML ...

Enhance Compatibility: IE11 URL Polyfill

While creating a URL in my angular app using new URL, I have encountered an issue that it works on all browsers except IE11. To resolve this problem, I attempted to add "url-polyfill" to my "package.json" and imported 'url-polyfill' in the polyf ...

Using JQuery to Update Text, Link, and Icon in a Bootstrap Button Group

I have a Bootstrap Button group with a split button dropdown. My goal is to change the text, href, and icon on the button when an option is selected from the dropdown. I am able to change the text successfully, but I'm having trouble updating the HREF ...

What is the best way to showcase the reading from a stopwatch on my screen?

Working on these codes has been quite a challenge for me. I have recently embarked on a JavaScript journey as a beginner and attempted to create a stopwatch project. However, it seems like I may have missed the mark with the logic or implementation somewhe ...

getting rid of the angular hash symbol and prefix from the anchor tag

I am having difficulty creating a direct anchor link to a website. Whenever I attempt to link to the ID using: where #20841 is my anchor tag. Angular interferes with the URL and changes it to: This functions properly in Chrome and Firefox, but i ...