issue with dependency between factory and controller

Exploring angular js for the first time and attempting to establish a connection between my controller and factory. Here is the controller:

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

    app.controller('MainViewController',['MainViewFactory', function ($scope, MainViewFactory ,$location) {

           //codes here

    }]);

and this is the factory:

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

app.factory('MainViewFactory' , function () {
    var factory = {};
    //factory codes here

    return factory;
});

Encountering an injector error upon loading the page

Uncaught Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/public/css/style.css" rel="stylesheet"/>
    <link href="/public/css/style-blue1.css" rel="stylesheet" id="style_color"/>
    <link href="/public/css/jstree-themes/default/style.min.css" rel="stylesheet">
    <link href="/public/lib/toaster/toaster.css" rel="stylesheet">
</head>
<body ng-app="app" ng-controller="MainViewController" >
<div id="navbar">
    <span> </span>
</div>

<div id="container">
    <div id="tools">
        <button class="btn" ng-click="functions()"></button>
        <button class="btn" ng-click="setting()"></button>
        <button class="btn" ng-click="guide()"></button>
        <button class="btn" ng-click="contactUs()"></button>
    </div>
    <div id="content" ng-view=""> </div>
</div>
<script type="text/javascript" src="/public/lib/angular/angular.js"></script>
<script type="text/javascript" src="/public/lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/public/lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/public/app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="/public/app/controllers/MainViewController.js"></script>
</body>
</html>

Seeking assistance on resolving this issue!

Answer №1

Latest Update:

To ensure proper functionality, it is recommended to position the controller before the factory script in your code.

<script type="text/javascript" src="/public/app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="/public/app/factories/MainViewFactory.js"></script>

You do not need to redeclare the same module for the factory, simply define it as shown below:

var app = angular.module('app', ['ngRoute']);
app.controller('MainViewController',['$scope','MainViewFactory','$location', function ($scope, MainViewFactory ,$location) {

    }]);
app.factory('MainViewFactory' , function () {
    var factory = {};
    // add your factory logic here

    return factory;
});

For a working example, check out this Plunker

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

Validation based on the condition of the request body in Express using express-validator

I have a specific route in place for handling different scenarios, with only minor variations in logic between them. To keep things streamlined, I have decided to utilize a single endpoint and differentiate between cases using the parameter 'type&apos ...

How can I designate unreleased files as dynamic entries in a webpack configuration?

Here is the configuration for webpack.config.js: const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const fs = require('fs'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require(&apo ...

Using Typescript to mute audio elements within HTML documents

I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...

AngularJS: Launching various tabs within the panel featuring distinct perspectives for various tree nodes

I am in need of a solution that involves a navigation tree displayed on the left panel. When a specific node in the tree is clicked, it should trigger the opening of a tab on the right panel with relevant content inside. Users should be able to open multip ...

Vue JS version 1.0.26 flips symbols on the front-end

After purchasing the Socialite Social Network Laravel Script developed by BootstrapGuru, I encountered an issue with the chat feature on my website. Upon entering text and symbols into the chat window, such as "how are you?", the displayed text appeared as ...

Issues arise when attempting to transmit JSON data from JavaScript to the server using the POST method

I'm having trouble viewing the JSON data I sent to the server using XMLHttpRequest. It seems like the server isn't receiving it because when I run the JavaScript, the alert window pops up but doesn't display anything. Does anyone have a solu ...

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

JavaScript does not effectively validate emails when integrated with HTML

My goal is to enable users to check if their email address meets the RFC standard by comparing it with the regular expression provided below. I have tested a few examples in the console using a validation function. While I am aware that my regex may not c ...

Scouring: Gather up all textual content and links (including href and ng-href) from an AngularJs website and conduct a thorough crawl

Despite numerous challenges in crawling an Angular JS page with Single sign-on, I have managed to develop this code. The code successfully logs in, opens the desired page, and scrapes it; however, I am facing issues extracting all the links and text from t ...

JavaScript can be utilized to generate an array containing duplicated phrases from a given text

Here's a simple concept: you enter text in a textarea, click "send," and receive a list of recurring phrases. When I say phrases, I mean sequences of two or more words that repeat. While I can identify single words, detecting these phrases is where I& ...

The useEffect function is not being executed

Seeking assistance from anyone willing to help. Thank you in advance. While working on a project, I encountered an issue. My useEffect function is not being called as expected. Despite trying different dependencies, I have been unable to resolve the issue ...

Is there a different method I can utilize to create a conditional statement for assigning a value in JavaScript?

I have this code snippet that seems a bit unclear to me: if (!app.config.admin.examStatusId) { app.config.admin.examStatusId = exam.examStatus.dataPlus[0].id; } Do you have any suggestions on how I could rewrite this more clearly without using an if s ...

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

The incorporation of ASP.NET with Cors cookies enhances security and functionality

Currently, I am utilizing an MVC server with IIS express running on port x. My client code is executed using an express server on port y, and requests for data are sent to the server located at localhost:x. An issue arises as the SessionId cookie is not c ...

Angular's NgShoppingCart is designed in such a way that items stored in the localStorage are automatically cleared out

I am currently working on an Angular project using version 8.0.0. To integrate a shopping cart feature into my Angular project, I decided to incorporate the NgShoppingCart library by following the instructions provided here. After adding the library in m ...

adjusting the vertical axis scale on the Google Charts API

During my experimentation with setting the vertical axis scale in Google charts, I found that the automatic scaling was not satisfactory for comparing two results. I wanted both results to be on an equal scale for a fair comparison. Despite setting the ma ...

Having Issues with the ng-class Expression in AngularJS?

Currently, I have set up a simple table using ng-repeat to display the number of home runs versus away runs. I am using a snippet of code to apply a specific class based on which team is currently winning: <tr ng-class="{winning : game.linescore.r.home ...

Tips for sorting through a multi-dimensional array of objects

I'm looking to filter this array based on the attributevalue. For example, if I search for blue color, I want all shirts in blue color to be displayed. And then if I further search for cotton fabric in blue color, I want all cotton products with blue ...

The "angular2-image-upload" npm package encountering a CORS issue

Using the angular2-image-upload library for uploading files has been a smooth process until recently. After upgrading from version 0.6.6 to 1.0.0-rc.1 to access new features in future, I encountered issues with image uploads. The errors I faced were: htt ...

generating a dynamic string array containing particular elements

Given a string "hello @steph the email you requested is [email protected] for user @test" The goal is to transform it into: ['hello ', <a href="">@steph</a>, 'the email you requested is <a href="/cdn-cgi/l/email-protect ...