Click here to Skip to main content
15,938,325 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 15-Aug-17 21:46pm
v2

1 solution

check this[^]
 
Share this answer
 
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?

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900