I'm learning AngularJS, and I'm now trying the $routeProvider, but I can't get it to work.
index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
view.html:
<p>Hello World!</p>
controllers.js:
var app = angular.module('App', ['ngRoute']);
app.config(
function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
}
);
function MyController($scope){
}
Whenever I run this, I get an error message that says
Uncaught Error: [$injector:modulerr]
How can I solve this?
Change .otherwhise to .otherwise.
A good practice when you run into these issues is to try the un-minified version of Angular.
The un-minified error is much more helpful:
Uncaught Error: [$injector:modulerr] Failed to instantiate module App
due to: TypeError: Object # has no method 'otherwhise'
Solution: Create a $inject property on your route config as follows: -
var app = angular.module('App', ['ngRoute']);
(function (app) {
var routeConfig = function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
};
routeConfig.$inject = ['$routeProvider'];
app.config(routeConfig);
})(angular.module("App"));
AngularJS will now be able to inject $routeProvider successfully when js is minified.
Related
Do the newest versions of angular/angular-route 1.6.1 use hashbang by default? Take this piece of code for example, I have to use #! when linking to partials because #/ or #/partial2 does not work. I thought that you'd have to set a hash prefix but it looks like it's defaulting to that behavior:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<title></title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"</script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'partials/view1.html',
})
.when('/partial2',{
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('view1Controller', function ($scope) {
$scope.sports = ['golf', 'basketball', 'hockey', 'tennis', 'football'];
});
myApp.controller('view2Controller', function ($scope) {
$scope.message = 'We are using another controller';
});
</script>
</head>
<body>
<div ng-app='myApp'>
Partial 1 | Partial 2
<div ng-view="">
</div>
</div>
</body>
</html>
Starting angular 1.6.0, #!/ becomes defaults in routes. I basically worked down versions until #/ worked, which was 1.5.11.
I am getting this error:
ncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available!
You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.9/$injector/nomod?p0=ngRoute
This is the code that causes it:
<!Doctype html>
<html data-ng-app="myApp">
<head>
<title>Basic Angular</title>
</head>
<body>
<!-- Placeholder for views -->
<div ng-view="">
</div>
<script src="scripts/angular/angular.js"></script>
<script >
var myApp = angular.module('myApp',[]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'views/view1.html',
controller: 'SimpleController'
})
.when('/view2', {
templateUrl: 'views/view2.html',
controller: 'SimpleController'
})
. otherwise({
redirectTo: '/view1'
});
}]);
var controllers = {};
controllers.SimpleController = function( $scope ) {
$scope.cars = [
{brand:'Audi', type:'SUV', name:'Q5'},
{brand:'Audi', type:'Sedan', name:'A7'},
{brand:'Audi', type:'Hatchback', name:'Compact'},
{brand:'BMW', type:'SUV', name:'X5'},
{brand:'BMW', type:'Sedan', name:'X1'},
{brand:'BMW', type:'Hatchback', name:'C3'}
];
$scope.addCar = function () {
$scope.cars.push(
{
brand : $scope.newCar.brand,
type : $scope.newCar.type,
name : $scope.newCar.name
});
};
};
myApp.controller(controllers);
</script>
</body>
How do I fix it?
The answer by cdhowie is partially correct. After downloading the angular route libraries and linking it in the html, you need to inject it's dependency in the angular module.
Something like this..
var myApp = angular.module('myApp',[ngRoute]);
Just as the error message says, that service isn't available. You didn't include the script that provides this service:
<script src="scripts/angular/angular-route.js"></script>
You need to download this script to your development environment if you don't already have it there.
I am using angularjs to make a MVC web application...But it gives an error when i'm opening it on internet explorer... But I don't receive an error in other browsers and views are not loading either when click on the links.
This is the error received in Internet Explorer
Unhandled exception at line 33, column 487 in //localhost:18012/Scripts/angular.min.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] http://errors.angularjs.org/1.2.27/$injector/modulerr?p0=sampleApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.27%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A196)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A273)%0A%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A487)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A386)%0A%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A7%3A288)%0A%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A207)%0A%20%20%20at%20ec%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A307)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A168)%0A%20%20%20at%20dc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A380)%0A%20%20%20at%20Wc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A17%3A415)
I have attached my angular model below. Please help me to solve this.
app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/homeContent.html',
controller: 'AddOrderController'
}).
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
when('/players', {
templateUrl: 'templates/playersMen.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/'
});
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
you are inject $routeProvider
please make sure you loaded:
angular-route.js
cdn:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js
when u loaded,then
add dependency to your app with ngRoute
angular.module('app', ['ngRoute']);
Firstly you have to inject 'ngRoute' in your angular module in the way:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Another thing is include angular-route.js in your index.html file
This will resolve your problem
Your module is missing ngRoute dependency.Make sure first you add angular-route.min.js
Then added ngRoute dependency inside your app
Your app should look like below.
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Add script reference to html exact after angular.min.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>
Hope this is helpful to you.
My answer to another case with similar error, if you do not VS2015 US cord that will find it: references the Angular after platformOverrides.js
<body>
<div class="app">
<p id="deviceready" class="event">Connecting to Device</p>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"</script>
<script src="angular/angular.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
I'm new in angularjs and I want to load new content from another html file I use this below codes but I don't know why I get this errors
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector......
app.js
var app = angular.module("boors", ['ngRoute']);
app.config(boorsRouter);
function boorsRouter($routeProvider){
$routeProvider
.when('#/', {templateUrl: 'partials/news.html',
controller: function ($scope) {
$scope.setActive('news');
}})
;
}
I add this script in html file
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
where I go wrong?
Remove # in the when method.
$routeProvider
.when('/', {templateUrl: 'partials/news.html',
controller: function ($scope) {
$scope.setActive('news');
}
});
First I've to say that I've looked every existing question relating to my problem, but I've found nothing dealing with my problem.
Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to:
Error: [$injector:nomod] Module 'Arrows' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that you specify ...
<omitted>...2)
my index.html:
<html ng-app='Arrows'>
<head>
<title>Arrows</title>
<script data-main="app" src="modules/require.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="modules/angular-1.2.21/angular.js"></script>
<script src="modules/angular-1.2.21/angular-route.js"></script>
</head>
<body ng-controller='menuController'>
<div ng-view>
{{ message }}
</div>
</body>
</html>
my app.js:
define([
'./controller/menu',
'./controller/game'
], function(
menu,
game
) {
var Arrows = angular.module('Arrows', ['ngRoute']);
Arrows.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/menu.html',
controller : 'menuController'
})
.when('/game', {
templateUrl : 'pages/game.html',
controller : 'gameController'
})
.otherwise( {
redirectTo: '/',
controller: 'menuController'
});
});
Arrows.controller('gameController', function($scope) {
$scope.message = 'hello! Its working!';
});
Arrows.controller('menuController', function($scope) {
$scope.message = 'hello! Its working!';
});
});
No clue what to do there. I mean, I loaded angular-route.js, what is the answer to most questions concerning this error. And I made sure to write ng-app='Arrows' inside the html-tag.
As you are using require.js you have to bootstrap your AngularJS application in a special way. Read this article - https://www.startersquad.com/blog/angularjs-requirejs/ - and try to incorporate what is described there for your specific case.
In the end you will use something like
define([
'require',
'angular'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['Arrows']);
});
});