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
var mainM = angular.module('mainM', ['ngRoute'])
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$routeProvider
.when('/', {
controller: "homeController",
templateUrl : '../index.html'
})
$routeProvider.when('/signIn', {
controller: "controllSignIn",
templateUrl : '../Public/partials/MainPage/signIn.html'
})
$routeProvider.when('/signUp', {
controller: "controllNewProject",
templateUrl : '../Public/partials/MainPage/newProject.html'
})
$routeProvider.when('/newProject', {
controller: "controllSignUp",
templateUrl : '../Public/partials/MainPage/signUp.html'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
}]);
<!--
<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>
<!--
<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>
<!--
<!--
<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>