I'm keep getting this exception in my console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=mainApp&p1=Error%3A…at%20g%20(http%3A%2F%2Flocalhost%2Fcinema%2Fjs%2Fangular.min.js%3A39%3A222)
........ angular.min.js:6
And the html file:
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
If I remove the mainApp.config(func.... then it's working. I don't know how to set up routes. An empty function with a route provider generates the exception?
According to the documentation:
$routeProvider requires the ngRoute module to be installed.
So, you have to include the following script to your html:
<script src="js/angular-route.min.js"></script>
and add the dependency to your module definition:
var mainApp = angular.module('mainApp', ['ngRoute']);
$routeProvider requires a separate angular module ngRoute. Download angular-route.js, add it to the page, and inject it into the angular.module method
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
You can try to using the $routeProvider without a ngRoute module.
See the documentation: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Try this:
<!DOCTYPE HTML>
<html ng-app="mainApp">
<head>
<title>This cinema...</title>
<!-- ... other tags -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var mainApp = angular.module('mainApp', ['ngRoute']);
mainApp.config(function ($routeProvider) {
});
</script>
<!-- REST of the HTML body, but no angular used below -->
Related
I am practicing Angularjs and made a simple module and controller. Im trying to display an elements data inside the controller on the HTML view page but the {{student.name}} only pops up. and im getting an error message saying:
angular.js:15697 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.8.2/$controller/ctrlreg?p0=MyController
Here is my js code:
var myApp= angular.module('myApp',[]);
myApp.controller=('MyController', function($scope){
$scope.student={
"name":"kevin",
"age":"21",
"school":"NYU"
};
});
Here is my HTML code:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-controller="MyController">
{{student.name}}
</body>
</html>
please help.
The way you have defined your controller is incorrect. You can do something like below:
angular.module('app').controller('MainCtrl', function ($scope){
$scope.student={
"name":"kevin",
"age":"21",
"school":"NYU"
};
});
Sample working code here:
https://stackblitz.com/edit/angularjs-controllers-eauszw?file=app.js
<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<head>
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used on diferent view -->
<body ng-controller="MainCtrl as main" class="{{$state.current.data.specialClass}}" landing-scrollspy id="page-top">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services/myService.js"></script>
</body>
</html>
I have an angularJS app which was working fine before adding a service.
I am getting the following error.
myService.js:3 Uncaught Reference Error: myApp is not defined
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?
I am tying all the controllers to the module. I have also added the myService file to the index.html
Below is the code that I have in controller:
function MainCtrl($scope, $rootScope, $http, $state, myService){
};
angular
.module('myApp')
.controller('MainCtrl', MainCtrl)
.controller('FinalViewCtrl', FinalViewCtrl);
This is what I have in myService.js
'use strict';
myApp.factory('myService', ['$http', function($http) {
}]);
Let me know if I am missing anything?
Add the myapp variable initiation just above the service code.
var myapp = angular.module('myApp');
myApp.factory('myService', ['$http', function($http) {
}]);
Without the html, it will be hard to tell, but are you adding your JavaScript files in the correct order? You have to make sure that your file with angular.module('myApp') is loaded before any controllers or services. I've had the same error you have when adding my service before my app.
I have an index.ejs page that has a slideMenu which inserts other HTML views in the index.ejs page.
Each html view has its own controller. Each controller is in its own .js file. I am including all these scripts in the index.ejs file, however this causes the following problem and the HTML views don't load properly.
<!DOCTYPE html>
<html ng-app="myapp" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body layout="column">
<!-- ANGULAR MATERIAL DEPENDENCIES -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- ANGULAR MATERIAL DEPENDENCIES END-->
<md-content>
<div ng-include="'/html/newCode/addCircleTimeSong.html'"></div>
</md-content>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeSongPage.js"></script>
<script src="javascripts/newCode/Controller_ObservationPage.js"></script>
<script src="javascripts/newCode/Controller_CircleTimeActivityPage.js"></script>
</body>
</html>
I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=CircleTimeSongPageController&p1=not%20aNaNunction%2C%20got%20undefined
If you have written this statement
var mainApp = angular.module("myapp", ['ngMaterial']);
in all the controller files. This is what causing this error. This statement creates and initializes the myapp module. So if you use this statement in all the controller files, you will be reinitializing the myApp every time hence the angular error.
Replace it with this statement in other controller files
var mainApp = angular.module("myapp");
The above statement means fetch/reference already created/initialized myapp module.
In the beginning of my html I've declare my application:
<html lang="en" ng-app="MyAppModule">
and at the bottom I have include all the necessary files, the Chrome does not complain for any missing file:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controllers/EventController.js"></script>
<script src="js/Services/EventService.js"></script>
<script src="js/filters.js"></script>
Here is my application:
'use strict';
// Declare app level module which depends on filters, and services
var MyAppModule = angular.module('MyAppModule', ['ngResource']).config(function($routeProvider){
$routeProvider.when('/mybooks',{
templateUrl:'/templates/mybooks.html',
controller:'EventController'
}
);
});
But when I am trying to see the page there is a Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.14/$injector/modulerr?p0=MyAppModule&p1=Err…js.org%2F1.2.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20...<omitted>...2) on the browser. Any help? Am I missing something?
Try replacing this:
['ngResource']
With this:
['ngResource', 'ngRoute']
It looks like you're not injecting the route provider.
I'm learning Angularjs and I'm doing the tutorial from http://angularjs.org/, but I'm unable to get what I want. I have a simple page, index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Home</title>
</head>
<body>
<ul>
<li>Hello World</li>
<li>Tasks</li>
<li>Projects</li>
</ul>
</body>
</html>
I want that when I click on projecst.html my url shows something like http://localhost:8080/Application/projects or http://localhost:8080/Application/#/projects or http://localhost:8080/Application/#!/projects or whatever, but I don't want that it shows http://localhost:8080/Application/projects.html
I've been testing with $routeProvider, $locationProvider and $location, but I don't undestand very well how they work, Can anybody explain it to me? Can anybody help me with this issue?
More information:
projects.html:
<!DOCTYPE html>
<html ng-app="project">
<head>
<title>AngularJS | Projects</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script type="text/javascript" src="http://firebase.github.io/angularFire/angularFire.js"></script>
<script type="text/javascript" src="js/projects.js"></script>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
project.js:
angular.module('project', ['firebase']).
value('fbURL', 'https://angularjs-projects.firebaseio.com/').
factory('Projects', function(angularFireCollection, fbURL) {
return angularFireCollection(fbURL);
}).
config(function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'list.html', controller:ListController}).
when('/edit/:projectId', {templateUrl:'edit.html', controller:EditController}).
when('/new', {templateUrl:'edit.html', controller:NewController}).
otherwise({redirectTo:'/'});
});
Thanks in advance!
Greetings.
You should define the URL using the $routeProvider http://docs.angularjs.org/tutorial/step_07 . don't point your href to *html. point them to the urls you defined.
then you can also configure the $routeProvider to be either in HTML5 mode or in hashbang (default) mode-
You can fix this using "index.html" as your host page and deploy on a real webserver.
You could also configure your webserver to accept "projects.html" as an index file or welcome file.
You then setup routing in your angular application like so:
var app = angular.module('app', [
'ngRoute'
]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/projects', {
templateUrl: 'partials/project-list.html',
controller: 'MyCtrl'
});
}]);
Make sure to link to that in a correct way, so your html should be
<li>Projects</li>