I'm really new to Angular and I was trying to add a routeProvider to my app but it keep giving me this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app
due to: Error: [$injector:nomod] Module 'app' 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.
This is what my index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
My app.js looks like this:
var myApp = angular.module('app', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('segmentListCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('data/segments.json').success(function (data){
$scope.segmentList = data;
});
}]);
This is the content of the splash.html that i'm using as template for my routing:
<div id="splash" class="row" ng-controller="segmentListCtrl">
<div class="columns segment" ng-repeat="segment in segmentList">
<a href="#">
<h2>{{segment.title}}</h2>
<h5>{{segment.sub}}</h5>
</a>
</div>
</div>
Before I tried to add the ng-route everything wos working fine. But since I've tried to split it up I keep getting the error and I don't know how to fix it.
Thanks for the help guys!
In your myApp.config you forgot the closing brace ] at the end.
Also since you're new to angular in your .when('/' ....) when you specify the controller it's equivalent to putting an ng-controller at the top of your template so there's no need to do it again in the template itself.
So this:
<div id="splash" class="row" ng-controller="segmentListCtrl">
would be fine as
<div id="splash" class="row">
It apears to me that you have a syntax error in your app config declaration:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Should be:
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'components/splash.html',
controller: 'segmentListCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
AS you can see, the final ']' is missing.
Tell me if this solved for you. Thanks
Related
Making a very simple application in angular, and everytime I try to do this I run into this problem and never know how to solve it.
App.js is this:
angular.module('Euclid',
['ui.bootstrap',
'ngRoute'])
.controller('mainController', function($scope){
})
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
});
}]);
Just some basic routing, nothing in the controller.
Now, that 'HomeController' is set up like this:
var HomeController = function($scope){
var self = this;
// code here
};
angular.module('Euclid').controller('HomeController', HomeController);
And my index.html is set up like so:
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The error in all it's glory is "Argument 'HomeController' is not a function, got undefined". I can not for the life of me figure out where it is getting undefined.
I created a plunker to make things more clear . https://plnkr.co/edit/dL1DPa50mdZtmaJCwcIO?p=preview
As far as I can Understand ,there is no error other than missing some script files.
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="../angular-route.js"></script> //missing
<script src="/ui-bootstrap-tpls-2.1.2.js"></script> //missing
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
As Phil said ,it is clear that the reason for the
error is the missing of angular-router and angular-bootstrap.
I am trying to develop an application using angular js .it a simple routing .when i add the angular by url like this :
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
My application works fine ,but when i add like this :
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/js/app.js"></script>
I got this error :
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module sampleApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvide
Here is my app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
//Define Routing for app
//Uri /AddNewOrder -> template add_order.html and Controller AddOrderController
//Uri /ShowOrders -> template show_orders.html and Controller AddOrderController
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
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';
});
Here is my html code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="~/js/app.js"></script>
</body>
</html>
You will need to add the reference to the module (angular route module) that your module is dependent on. The error says that $routeProvide is unknown to it and that is available in the angular route module.
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Having an issue using the ng-view to render a template from my controller.
The index.html file is initially served to the client and looks like.
<!doctype html>
<html lang="en" ng-app="hlmApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="#Model.Root.Resource/bower_components\\/bootstrap/dist/css/bootstrap.css">
#RenderSection("BootScript")
<!-- app.js will load the angular module -->
<script src="#Model.Root.Resource/bower_components/angular/angular.js"></script>
<script src="#Model.Root.Resource/bower_components/angular-route/angular-route.js"></script>
<script src="#Model.Root.Resource/app/app.js"></script>
<script src="#Model.Root.Resource/app/controllers/controllers.js"></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>A link here</li>
</ul>
</div>
</div>
<div ng-view></div>
#*<div ng-controller="tempController">{{Heading}}</div>*#
</div>
#RenderBody()
</body>
</html>
the server pushes down my app.js and controllers.js file along with the deps.
/// ap.js ///
var hlmApp = angular.module('hlmApp', ['ngRoute', 'MyTempControllers']);
hlmApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/Holdings', {
templateUrl: 'templates/temp.html',
controller: 'controllers/tempController'
});
}]);
the controller is pretty simple and is as follows
var MyTempControllers = angular.module('MyTempControllers', []);
MyTempControllers.controller('tempController', ['$scope', function () {
console.log("stuff happening");
$scope.Heading = "Hello World";
}]);
then the html template is as follows
<div>
<h3>{{Heading}}</h3>
</div>
When I use the ng-view nothing ever renders. the controller is never triggered in the debugger. If I specifically call out the controller via the ng-controller then everything shows up. can someone point out my error here?
You need these 3 changes:
1) add $scope as a parameter in your controller function
MyTempControllers.controller('tempController', ['$scope', function ($scope) {
...
}]);
2.
Change
controller: 'controllers/tempController'
to
controller: 'tempController'
FYI, the naming convention for a controller is to begin with a capital letter for Controller.
3. In addition, you should add a
.otherwise({
template: templates/temp.html,
controller: 'tempController'
});
so that when no route matches, it goes to default-page-name.html. This is what's happening in your case, when you first load the page, no route matches. If you want to see temp.html, you have to 1) either click on a link that goes to #/Holdings, or 2) use '/Holdings' as the "otherwise" route, as indicated above.
Try this:
hlmApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/Holdings', {
templateUrl: 'templates/temp.html',
controller: 'tempController' // just the name
});
}]);
and also $scope is missing in parameters:
MyTempControllers.controller('tempController', ['$scope', function ($scope) {
console.log("stuff happening");
$scope.Heading = "Hello World";
}]);
I used older version of angularJS (1.1.4) for my test project (I want to learn angularJS). When I change angularJS script version to latest I got this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contactsManager&p1=…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A38%3A435)
I don't know what is causing this error... Does someone knows where's the problem?
UPDATE:
After removing .min from angularJS.js I got cleaner error message so here is it:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=%24routeProvide
Here is code:
JS:
//application.js
var app = angular.module('contactsManager', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/contacts',
{
controller: 'ContactsController',
templateUrl: './application/templates/contacts.html'
})
.when('/add-contact',
{
controller: 'ContactAddController',
templateUrl: './application/templates/addContact.html'
})
.when('/edit-contact/:contactId',
{
controller: 'ContactEditController',
templateUrl: './application/templates/editContact.html'
})
.when('/display-contact/:contactId',
{
controller: 'ContactDetailsController',
templateUrl: './application/templates/displayContact.html'
})
.otherwise({ redirectTo: '/contacts' });
});
HTML:
<!DOCTYPE html>
<html data-ng-app="contactsManager">
<head>
<title>Contacts</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-top">
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-resource.min.js"></script>
<script src="application/application.js"></script>
<script src="application/controllers/controllers.js"></script>
<script src="application/services/contactsService.js"></script>
</body>
</html>
Newer versions of Angular have ngRoute as a separate module that you have to include in your project.
<script src="//code.angularjs.org/X.Y.Z/angular-route.js"></script>
https://docs.angularjs.org/api/ngRoute
And update your app initialization with an injection of ngRoute
var app = angular.module('contactsManager', ["ngRoute"]);
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo