hi I'm doing a aplication with angular, well in this app I need show map and makers, but first step I need the map, now I'am having problem in this part ok, I'm very new in angular I make maps with jquery and javascript now I tried to make the same steps and nop work yet. well I thing that this part is the important. controller of map.
mapController.js
(function(){
angular.module('mapCtrl', [])
.controller('MapController', function($scope) {
function initialize() {
var options = {
googleApiKey: '',
locationColumn: 'geometry',
map_center: [-16.494898, -68.133553],
locationScope: 'La Paz'
};
var self = this;
options = options || {};
this.googleApiKey = options.googleApiKey || "";
this.locationColumn = options.locationColumn || "geometry";
this.locationScope = options.locationScope || "";
this.defaultZoom = options.defaultZoom || 13;
this.map_centroid = new google.maps.LatLng(options.map_center[0], options.map_center[1]);
this.myOptions = {
zoom: this.defaultZoom,
center: this.map_centroid,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//$scope.map = new google.maps.Map($("#map")[0], this.myOptions);
$scope.map = new google.maps.Map(document.getElementById('map'), this.myOptions);
//this.map = new google.maps.Map($("#map")[0], this.myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
});
})();
I tried with getElementById() and dont work. Now the view.
In the express framework the route is /public/app/views/index.html, the
route.app.js is:
(function(){
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/', {
templateUrl: 'app/views/pages/home.html',
controller: 'MapController',
controllerAs: 'main'
})
.when('/login', {
templateUrl: 'app/views/pages/login.html'
})
.when('/about', {
templateUrl: 'app/views/pages/about.html'
})
.when('/users', {
templateUrl: 'app/views/pages/users.html'
});
// get rid of the hash in the URL
});
})();
the app.js
(function(){
angular.module('myApp', [
'ngAnimate',
'app.routes',
'mainCtrl',
'userCtrl',
'mapCtrl',
'userService',
'authService'
]);
})();
in the index.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sociedad F</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='Team of competition' name='description' />
<meta content='FanaticCode' name='author' />
<script type="text/javascript" src="/app/controller/mainController.js"></script>
<script type="text/javascript" src="/app/controller/userController.js"></script>
<script type="text/javascript" src="/app/controller/mapController.js"></script>
<!-- services -->
<script type="text/javascript" src="/app/services/authService.js"></script>
<script type="text/javascript" src="/app/services/userService.js"></script>
<!-- main Angular app files -->
<script type="text/javascript" src="/app/app.routes.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
</head>
<body ng-app="myApp" ng-controller="MapController as main">
<div ng-view></div>
</body>
</html>
and the home.html
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--- more html code with bootstrap -->
</div>
<div id="container" >
<div id="sidebar">
<!--- more html code with bootstrap -->
</div>
<div id="map"></div>
</div>
Well can see that nothing is happend I tried but dont work yet some can help me please.
Related
I'm getting the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController
.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?
Here's my code: (Plunker link)
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config( function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/views/home.html',
controller: 'HomeController' })
.when('/login', { templateUrl: '/views/login.html',
controller: 'LoginController' })
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
resolve:{
_planets: function(myService)
{
console.log("asdas");
return myService.getRequestForPlanets();
}
}
})
});
SearchController.js
angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
$scope.message = 'This is Show orders screen';
$scope.planets=_planets;
console.log(_planets);
});
myService.js
angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{
$rootScope.loading = false;
this.getRequestForPlanets=function()
{
$rootScope.loading = true;
var deferred = $q.defer();
$http.get('https://swapi.co/api/planets')
.then(function(response){
$rootScope.loading = false;
console.log(response.data.results);
deferred.resolve(response.data.results);
})
.catch(function(response){
deferred.reject(response);
});
return deferred.promise;
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body ng-app="myApp">
<!-- ng-controller="myController" -->
<div class="spinner" ng-show="loading">
<div class="loader" ></div>
</div>
<div ng-view></div>
<section class="imgDiv">
<div class="container-fluid">
<!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
<div class="sn_scroll_btn slideInDown ">
<img src="images/scroll.png" alt="" class="test">
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/LoginController.js"></script>
<script type="text/javascript" src="controllers/SearchController.js"></script>
<script type="text/javascript" src="services/myService.js"></script>
<script type="text/javascript" src="controllers/HomeController.js"></script>
</body>
</html>
Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview
Your controller is being instantiated twice, once in your routes, in app.js here:
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
...
and again in your view in search.html here:
<div ng-controller="SearchController">
<p>{{message}}</p>
...
Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.
If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.
Hope that helps!
I am making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
I cannot see my index page till I uncomment my code in controller.What am i doing wrong.here is my sample code.I have tried all possible options, not getting where am i going wrong
`
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript">
var abc = angular.module('myApp', ["ui.router"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{
template: '<h1>This template is displayed with Ui route </h1>'
});
$urlRouterProvider.otherwise('/');
}).
controller('myNewCtrl',function($scope,$state){
// $state.go('home');
});
</script>
<title>My Angular App</title>
</head>
<body ng-app='myApp'>
<div ng-controller="myNewCtrl">
<ui-view></ui-view>
</div>
</body>
</html>`
DEMO
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl', ['$scope', function($scope) {
}])
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav>
<a ui-sref="home">Home</a>
</nav>
<div ui-view></div>
</body>
Working demo :
var myApp = angular.module('myApp',['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl',['$scope','$state', function($scope,$state) {
$state.go('home');
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="myApp" ng-controller="myNewCtrl">
<div ui-view></div>
</div>
I am new to Angular. I have been trying to load Google Maps, but it's still failing to work. I found a link on the web and followed all of the steps they used, but it still fails to load. I also tried other samples found on the net, but it still fails. Here is the link to the document I followed:
http://www.saintsatplay.com/blog/2015/03/using-google-maps-in-angular-js#.VmLTBaeIZCU
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<style>
.angular-google-map-container {
height: 300px; // Or whatever pixel value you require :)
}
</style>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="scripts/lodash.min.js"></script>
<script type="text/javascript" src="scripts/controllers/Drivermap_controllers.js"></script>
</head>
<body ng-app='driverapp'>
<div ng-view>
</div>
</body>
</html>
Drivermap_controllers.js
"use strict";
var app = angular.module('driverapp', ['uiGmapgoogle-maps'])
.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '***********',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
})
.controller("DrivermapController", function($scope, uiGmapGoogleMapApi) {
// Define variables for our Map object
var areaLat = 44.2126995,
areaLng = -100.2471641,
areaZoom = 3;
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: areaLat, longitude: areaLng }, zoom: areaZoom };
$scope.options = { scrollwheel: false };
});
});
main.js:
var app = angular.module('driverapp', ['ngRoute','ngResource']);
app.config(function($routeProvider){
$routeProvider
.when('/customers', {
templateUrl: 'views/customers/new.html',
controller: 'CustomersListController'
})
.when('/drivermap', {
templateUrl: 'views/drivermap/new.html',
controller: 'DrivermapController'
})
.otherwise({
redirectTo: '/customers'
});
});
views/drivermap/new.html:
<div ng-controller="DrivermapController">
<ui-gmap-google-map center="map.center" options="options" zoom="map.zoom"></ui-gmap-google-map>
</div>
error in the console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=driverapp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3DuiGmapgoogle-maps%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253DuiGmapgoogle-maps%250AG%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A23%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fangular%252Fangular.min.js%253A294%253A192%250An.Callbacks%252Fj%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A26920%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A27738%250A.ready%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29530%250AI%2540http%253A%252F%252Flocalhost%253A9001%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29721%250A%0AG%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A391%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A134%0An%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A331%0Ag%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A37%3A488%0Aeb%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A463%0Ayc%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fangular%2Fangular.min.js%3A294%3A192%0An.Callbacks%2Fj%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A26920%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A27738%0A.ready%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29530%0AI%40http%3A%2F%2Flocalhost%3A9001%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29721%0A
I suspect (in your comment you did not provided the complete console error) you are using version 2.2.X of angular-google-maps, this version has an additional dependency on angular-simple-logger. The solution would be to explicitly add reference to angular-simple-logger, modify index.html file:
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
Plunker
I'm new to AngularJS and I'm trying to declare a second controller to a new view in my page. I have a logincontroller and when I succeed the login I get to the Home.html.
When opening Home.html I get the following error below..It looks like it can't recognize my ModelController/ModalService..What am I missing here?
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-beta.1/$injector/unpr?p0=ModalServiceProvider%20%3C-%20ModalService%20%3C-%20ModalController
Index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-cookies.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Home.html:
<div class="container" ng-controller="ModalController">
<div class="col-xs-2">
<button class="btn btn-group-justified" ng-init="testfunc()">press me</button>
</div>
</div>
MyApp.js:
angular.module('MyApp', [
'Authentication',
'Modal',
'ngRoute',
'ngCookies'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
ModalController.js:
angular.module('Modal')
.controller('ModalController',
['$scope', 'ModalService',
function ($scope, ModalService) {
$scope.testfunc = function() {
alert('weeee');
}
}]);
ModalService.js:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService'
['$http',
function ($http) {
var service = {};
return service;
}
]);
You need to include app.js after including services and controllers. And controllers after services.
it should be like this:
<script src="Scripts/Services/ModalService.js"></script> <!--ModalService is being defined here -->
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script> <!-- ModalService is being injected here -->
<script src="Scripts/MyApp.js"></script> <!-- All of the things are set in place here -->
In fact, the best practice is to include all of them in the bottom of your <body>.
I found the answer..The problem was that I was missing a comma :(
ModalService.js should look like this:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService', <------ COMMA MISSING :(
['$http',
function ($http) {
var service = {};
return service;
}
]);