Uncaught Error: Unknown provider: $rootScopeProvider <- $rootScope - javascript

My problem is with template Url in angularjs.
So when i put this code in my editor and run it it works perfectly:
HTML:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
Js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
template: 'page',
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
That worked fine but as soon as i try to put a templateUrl It goes of here is my example code for that:
index.html
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Angular Js</title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-view></div>
</body>
</html>
page.html:
Hello World
main.js:
var app = angular.module('app', [])
app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'page.html'
})
.when('/helloUser', {
template: "ds"
})
.otherwise({
redirectTo: '/'
})
})
EDIT:
1
down vote
accept
You must inject the ngRoute module:
var app = angular.module('app', ['ngRoute'])
Not work:

You must inject the ngRoute module:
<script src="angular-route.js">
var app = angular.module('app', ['ngRoute'])

Related

AngularJS $routeProvider doesnt show template in ng-view

So when i click the links in index.html the path in browser changes but it doesnt show the content of sivu1.html and sivu2.html
Here is my index.html
<html ng-app="appi">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="appi.js"></script>
</head>
<body>
Sivu ykköne
Sivu kakkone
<div ng-view></div>
</body>
</html>
Here is the appi.js
var appi = angular.module("appi", ["ngRoute"]);
appi.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when
("/sivu1", {templateUrl: "templates/sivu1.html", controller: "sivu1controller"});
$routeProvider.when
("/sivu2", {templateUrl: "templates/sivu2.html", controller: "sivu2controller"});
$routeProvider.otherwise({redirectTo: "/home"});
$locationProvider.html5Mode({enabled:true, requireBase:false});
}]);
appi.controller("sivu1controller",["$scope", function($scope){
$scope.viesti = "Tässä sivu ykkönen(1)";
}]);
appi.controller("sivu2controller",["$scope", function($scope){
$scope.viesti = "Tässä sivu kakkonen(2)";
}]);
sivu1.html and sivu2.html both have the same content
<h2>{{ viesti }}</h2>
Folder structure
Change your href from
Sivu ykköne
\Sivu kakkone
To
Sivu ykköne
Sivu kakkone
It should be working now.

Issue - AngularJS Uncaught Error: [$injector:modulerr]

Am completely new to AngularJS. So am trying the flow of sample application before I start the development of a new app in my project. Below is what I have tried.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script type="text/javascript" src = "js/app.js"></script>
</head>
<body>
<h1>Student Registration!</h1>
<div ng-view></div>
</body>
</html>
registerStudent.html
<table>
<tr>
<td><input type="button" value="Save" ng-click="save()"></td>
<td>{{message}}</td>
</tr>
</table>
app.js
var app = angular.module("app", ['ngRoute', 'app.services', 'app.controllers']);
/**routing*/
app.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/editStudent', {
templateUrl:'html/editStudent.html',
controller:'studentReg'
});
$routeProvider.when('/viewStudent', {
templateUrl:'html/viewStudent.html',
controller:'studentReg'
});
$routeProvider.when('/registerStudent', {
templateUrl:'html/registerStudent.html',
controller:'studentReg'
});
$routeProvider.otherwise({
redirectTo: '/registerStudent'
});
}]);
services.js
var app = angular.module('app.services', []);
app.service('restService', function(){
this.save=function(){
return 'saved';
};
});
controller.js
var app = angular.module('app.controllers', []);
app.controller('studentReg', function($scope, restService){
$scope.result=restService.save();
$scope.save=function(){
console.log($scope.result);
$scope.message=$scope.result;
};
});
When I tried to run the application, I got the below error.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…2Flocalhost%3A8080%2FEnhancedStudentform%2Flib%2Fangular.min.js%3A20%3A421)
You forget to load your controller.js and services.js, that's my guess. Try this after you include you app.js in index.html:
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>
Try to Include all js files in you index html like:
<script type="text/javascript" src = "js/app.js"></script>
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>

AngularJS route with routeprovider not working

I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">

AngularJS Route Not Displaying

I'm getting into Angular JS, and am having a bit of a an issue with routes not displaying. Here's the index file:
<!doctype html>
<html lang="en" ng-app="backupApp">
<head>
<meta charset="UTF-8">
<base href="some/subdiretory/">
<script src="//code.angularjs.org/1.2.10/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">
</head>
<body ng-app="backupApp">
<div ng-view class="view-frame">
</div>
</body>
</html>
And here's my app.js. In one file, as I was debugging:
var backupApp = angular.module('backupApp', [
'ngRoute',
'backupControllers'
]);
backupApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl'
});
}
]);
backupApp.controller('IndexCtrl', ['$location', '$window',
function($location, $window) {
console.log('hi');
debugger;
if ($window.sessionStorage.loggedin) {
$location.path('/backups');
} else {
$location.path('/login');
}
}
]);
The issue is, no redirection occurs. Not errors are throw. The console.log never displays. I can't figure out what's wrong. Any ideas?

Angular error: 'argument 'Controller' is not a function, got undefined'

I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..
Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<!--Library/Framework JS-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->
<!--App JS-->
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view class="view-frame"></div>
</body>
</html>
app.js
'use strict';
var angcomApp = angular.module('angcomApp',[
'ngResource',
'ngRoute',
'angcomControllers',
'angcomServices',
]);
angcomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'partials/items.html',
controller: 'itemsController'
}).when('/categories', {
templateUrl: 'partials/categories.html',
controller: 'categoriesController'
});
}]);
controllers.js
var angcomControllers = angular.module('angcomControllers', ['angcomServices']);
angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {
}]);
angcomControllers.controller('categoriesController' ['$scope', function($scope) {
}]);
items.html
<div data-ng-controller="itemsController"></div>
If I need to post any more code please let me know, thanks!
You are missing ,:
angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){
}]);

Categories