Angularjs module not being recognized

Question

0.00/5 (No votes)

See more:

Hi, i'm making an angular app so far I have made a module with controllers views and route provider.. However i'm getting an error at the beginning saying

"angular.js:4588 Uncaught Error: [$injector:modulerr] Failed to instantiate module mainM due to: Error: [$injector:nomod] Module 'mainM' is not available!"

I put an alert in both scripts so they are being ran and I imported anguler and anguler-route before importing my java script so i'm not sure why it's not being recognized?

I'm new to angular JS sohelp getting passed hello world would be vastly appreciated! :)

Thanks in advance

What I have tried:

//Javascript

JavaScript

var mainM = angular.module('mainM', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) 
{
        $routeProvider
            // route for the home page
            .when('/', {
                controller: "homeController",
		templateUrl : '../index.html'
            })

            // route for the about page
          $routeProvider.when('/signIn', {
                controller: "controllSignIn",
		templateUrl : '../Public/partials/MainPage/signIn.html'
            })
	  $routeProvider.when('/signUp', {
                controller: "controllNewProject",
		templateUrl : '../Public/partials/MainPage/newProject.html'
            })

            // route for the contact page
         $routeProvider.when('/newProject', {
                controller: "controllSignUp",
		templateUrl : '../Public/partials/MainPage/signUp.html'
            });
	    
	$locationProvider.html5Mode({enabled: true, requireBase: false});
    }]);

HTML

<!-- HTML CODE -->

<html lang = "en" ng-app ="mainM">

<head>
	<title>Project Buddy</title>
	<link rel = "stylesheet" href = "bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel = "stylesheet" href = "bower_components/font-awesome/css/font-awesome.min.css">
	<link rel = "stylesheet" href = "Public/css/mainPage.css">
	
	<meta name ="viewport" content = "width=device-width, initial-scale = 1.0 ">
	<meta charset=utf-8 />
</head>

<body background = "img/background.jpg">	

<div class="dropDown">
	<ul id="drop-nav">
  <li><a href="#">New Project</a>
  <ul><li><a href="#">Search For Project</a></li></ul>
  </li>
  <li><a href="#">My Account</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Design Documents</a>
    <ul>
      <li><a href="#">Create Document</a></li>
      <li><a href="#">Upload Document</a></li>
    </ul>
  </li>
</ul>

<!-- Logo goes here -->
<img src="img/Logo.jpg" alt="Logo" style="width:auto; height:150;" align="left" class = "make-it-fit"></img>

	<ul id="drop-nav">
  <li><a href="#">.  About</a></li>
  
  <li><a href="#">.  Forum</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Chat</a>
    <ul>
      <li><a href="#">Create Document</a></li>
      <li><a href="#">Upload Document</a></li>
    </ul>
  </li>
</ul>
</div>

<!-- End of drop down menu -->
	<!-- Test links-->
	<a href="#//">Root</a>
	<a href="#/signIn">Sign In</a>
	<a href="#/signUp">Sign Up</a>
	<a href="#/newProject">New Project</a>
	<ng-view></ng-view>
 <div class="chatBox">Back ground chat</div>
 
	<script src="bower_components/angular/angular.js"></script> 
	<script src="bower_components/angular-route/angular-route.js"></script> 
	<script src="scripts/module.js"></script>
</body>

</html>

Posted 4-May-16 0:55am

Steven Stapleton

Updated 15-Aug-17 21:46pm

CHill60

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-05-04T01:01:00

Solution 1

check this[^]

Posted 4-May-16 1:01am

Karthik_Mahalingam

Comments

Steven Stapleton 4-May-16 7:11am

Im still getting this error "angular.js:4588 Uncaught Error: [$injector:modulerr] Failed to instantiate module mainM due to:
Error: [$injector:nomod] Module 'mainM' is not available! "

Karthik_Mahalingam 4-May-16 7:15am

try ng-app for body
<body ng-app="mainM">

Steven Stapleton 4-May-16 7:14am

It's working now. Thanks!!

Karthik_Mahalingam 4-May-16 7:15am

welcome :)

Member 13022729 13-Aug-17 6:18am

I have the same problem.

Do not write ng-app into body
I am getting the same life though. How can I solve this problem?

Karthik_Mahalingam 16-Aug-17 2:49am

post as question

Member 13022729 16-Aug-17 3:46am

Hi Karthik,

I solved the problem mentioned above.

The main thing I want to do is to add the angular page under each html page in the mvc project. For example, indexConttoller.js for index.cshtml,
I want to do about.cshtml to aboutController.js.

Bundle is the way to go.

bundles.Add(new ScriptBundle("~/bundles/home").Include(
"~/Views/Home/aboutController.js",
//"~/Scripts/indexController.js"
"~/Views/Home/indexController.js"
));

I will render on the Layout page.

@Scripts.Render("~/bundles/home")

Despite that, I am taking that life.

Failed to load resource: the server responded with a status of 404 (Not Found) -> for aboutController and indexController

What is the way to run Angular.js script files as I tell you?

Member 13022729 16-Aug-17 3:49am

It works in the bundle when I activate the indexController in the Scripts path. It does not work when I activate it in Views / Home. I want to run the script files under Home

Karthik_Mahalingam 16-Aug-17 4:31am

create a new bundle for that page and try

Member 13022729 16-Aug-17 5:04am

I do not understand what you mean

Karthik_Mahalingam 16-Aug-17 5:24am

else try adding the particular js file to the corresponding cshtml file
bundle should be added when the reference is across many pages

Member 13022729 16-Aug-17 5:31am

Again failed. Can you help me with the TeamViewer connection?

Karthik_Mahalingam 16-Aug-17 6:16am

post a new question else the user will be getting notifications.