I started using angularjs to create a single page application and wanted to add dynamic templates (views and controllers). I read on the web that I should use requirejs for doing this so I did.
I followed this tutorial # https://github.com/marcoslin/angularAMD and tried to follow the steps.
When I wanted to open the page I get those two errors on my console:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DWebApp%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A20%3A1%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A267%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A
and this one
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=WebApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3Dwebapp%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253Dwebapp%250AD%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A6%253A450%250AZc%252Fb.module%253C%252F%253C%252Fb%255Be%255D%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250AZc%252Fb.module%253C%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A20%253A1%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A267%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Ae%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A284%250Ar%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A7%253A288%250Ae%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A33%253A207%250Agc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A36%253A309%250Afc%252Fc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A170%250Afc%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A18%253A387%250Ac.prototype.bootstrap%252F%253C%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252FangularAMD.min.js%253A7%253A3485%250Aa%2540http%253A%252F%252Flocalhost%252Fpollit%252Fapp%252Flibs%252Fangular.min.js%253A145%253A67%250A%0AD%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A6%3A450%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A34%3A97%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Ae%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A284%0Ar%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A18%3A387%0Ac.prototype.bootstrap%2F%3C%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2FangularAMD.min.js%3A7%3A3485%0Aa%40http%3A%2F%2Flocalhost%2Fpollit%2Fapp%2Flibs%2Fangular.min.js%3A145%3A67%0A
I think they are both similar errors. I guess the error is coming from app.js file and this is my code:
define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", ['webapp']);
app.config(function ($routeProvider) {
$routeProvider.when("/",
angularAMD.route({
templateUrl: 'app/src/home/index.html',
controller: 'index',
controllerUrl: 'app/src/home/'
})
);
});
return angularAMD.bootstrap(app);
});
and main.js
require.config({
baseUrl: "app",
paths: {
'jquery' : 'libs/jquery.min',
'general' : 'libs/general',
'angular' : 'libs/angular.min',
'angularAMD' : 'libs/angularAMD.min',
'ngload' : 'libs/ngload.min'
},
shim: {
'angularAMD' : ['angular'],
'ngload' : ['angularAMD']
},
deps: ['app']
});
and now my template files
index.js:
define(['app'], function (app) {
app.factory('MainController', function (...) {
});
});
index.html
<div class="appheader">
<div class="container" style="text-align:right">
<a><span class="glyphicon glyphicon-refresh"></span></a>
<a><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
So as you can see I have those two files in app/src/home/index.(html/js)
And other files are located at app/ while ./ is the path of index.html (main page)
I really hope for help for my project and thanks in advance. :)
EDIT EDIT EDIT EDIT
Here we go:
./index.html
<!DOCTYPE html>
<html ng-app="WebApp">
<head>
<title>Index Index Index :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> -->
<meta name="viewport" content="width=100%, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="app/css/bootstrap.min.css" />
<link rel="stylesheet" href="app/css/yadbocss.css" />
<script data-main="app/main" src="app/libs/require.min.js"></script>
</head>
<body ng-controller="mainController">
<div class="row">
<div class="col-md-12">
<div id="main">
<div ng-view>
</div>
</div>
</div>
</div>
</body>
./app/main.js
require.config({
baseUrl: "app/",
paths: {
'jquery' : 'libs/jquery.min',
'general' : 'libs/general',
'angular' : 'libs/angular',
'angularAMD' : 'libs/angularAMD',
'ngload' : 'libs/ngload',
'ngRoute' : 'libs/ngRoute'
},
shim: {
'angularAMD' : ['angular', 'ngRoute'],
'ngRoute' : ['angular'],
'ngload' : ['angularAMD']
},
deps: ['app']
});
./app/app.js
define(['angularAMD'], function (angularAMD) {
var app = angular.module("WebApp", []);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/",
angularAMD.route({
templateUrl: 'src/home/index.html',
controller: 'index',
controllerUrl: 'src/home/index'
})
);
$locationProvider.html5Mode(true);
});
return angularAMD.bootstrap(app);
});
Error report
1
Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:nomod] Module 'WebApp' 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.
...
2
Error: [$injector:modulerr] Failed to instantiate module WebApp due to:
[$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=%24routeProvider
minErr/<#http://localhost/pollit/app/libs/angular.js:68:12
...
You are using routeprovider without adding it.
Angular is made up of lost of modules so you should include it in the module like
angular.module('app', ['ngRoute']);
and link it in your html
<script src="angular-route.js">
Google CDN
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
also change your version of angular so you dont use min. min.js is used for production and gives you crappy errors like the one you have there.
Related
I want to load or resources in my header with require.js. How can i do this? Here is my current code for my controller and index. I am new to angularjs and will appreciate your help in solving this challenge.
Require.js: located in js/require.js
require.config({
baseUrl: "js",
paths: {
'angular': '.../lib/angular.min',
'angular-route': '.../lib/angular-route.min',
'angularAMD': '.../lib/angular-animate.min.js'
},
shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
deps: ['app']
});
Index.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>App Demo</title>
<script data-main="js/main" src="js/require.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
App.js:
define(function () {
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListContrIndex.htmloller'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
return app;
});
Controller.js:
define(['app'], function (app) {
var artistControllers = angular.module('artistControllers', ['ngAnimate']);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.whichItem = $routeParams.itemId;
if ($routeParams.itemId > 0) {
$scope.prevItem = Number($routeParams.itemId)-1;
} else {
$scope.prevItem = $scope.artists.length-1;
}
if ($routeParams.itemId < $scope.artists.length-1) {
$scope.nextItem = Number($routeParams.itemId)+1;
} else {
$scope.nextItem = 0;
}
});
}]);
});
use data-main="path/file.js" to specify the file to load scripts..
<script data-main="path/file.js" src="js/require.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>App Demo</title>
<script data-main="js/main" src="js/require.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
and in main.js
require.config({
baseUrl: "js",
paths: {
'angular': '.../lib/angular.min',
'angular-route': '.../lib/angular-route.min',
'angularAMD': '.../lib/angular-animate.min.js'
},
shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
deps: ['app']
});
require(['requireModule,'requireModule2'],function(requireModule,requireModule2){
//code to start the application
})
Your code doesn't allow to start the application through requirejs . You need to define AngularJS Components as RequireJS Modules
RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page. The data-main attribute is a special attribute that require.js will check to start script loading. This example will end up with a baseUrl of scripts:
<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"/>
For more information on this, check Loading JS Files - Require.js
I am getting these errors shown below after defining the URL routes - following the sportsStore app from an AngularJS book for learning purposes.
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
Error: [$injector:cdep] Circular dependency found: ngViewDirective
I've read all the posts related to this type of error and I checked the versions of the angular.js and angular-route.js to be the same (the last stable version).
I've read also the documentation on the AngularJS API and make sure that the causes described there are not the case.
I don't know what to do next since it is impossible for me to understand the error from the browser's developer tools shown in the image. Please point me to the right direction.
Here is the app.html where the routes are defined to display the specific views:
<!DOCTYPE html>
<html ng-app="sportsStore">
<head>
<title>SportsStore</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("sportsStore", ["customFilters", "cart", "ngRoute"])
.config(function($routeProvider) {
$routeProvider.when("/checkout", {
templateUrl: "/views/checkoutSummary.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/productList.html"
});
$routeProvider.otherwise({
templateUrl: "/views/productList.html"
});
});
</script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
<script src="ngmodules/angular-route.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
<cart-summary />
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{data.error.status}}). The product data was not loaded.
Click here to try again
</div>
<ng-view />
</body>
</html>
Without changing the code I have another error. This is so strange:
Your writing your routes before loading your angular-route.js file. So you need to move your routes between <script></script> to the end.
This will solve your problem.
Move
<script>
angular.module("sportsStore", ["customFilters", "cart", "ngRoute"])
.config(function($routeProvider) {
$routeProvider.when("/checkout", {
templateUrl: "/views/checkoutSummary.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/productList.html"
});
$routeProvider.otherwise({
templateUrl: "/views/productList.html"
});
});
</script>
to the end of the 'head', cause angular and ngRoute still are not loaded.
Better to keep scripts at the bottom of 'body'
#uamanager showed me the solution -> to remove the '/' right before the views in the templateUrl
<script>
angular.module("sportsStore", ["customFilters", "cart", "ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/checkout", {
templateUrl: "views/checkoutSummary.html"
});
$routeProvider.when("/products", {
templateUrl: "views/productList.html"
});
$routeProvider.otherwise({
templateUrl: "views/productList.html"
});
});
</script>
change your syntax for your route provider, you only need one $routeProvider
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
check out this codepen https://codepen.io/CarterTsai/pen/tfjqu
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 running Angular under Requirejs, but I have this multiple occurrence where the data in the controller class is repeated twice. Unless I remove ng-app="myApp" from the div. Why?
welcomeController.js,
define(['app'], function (app) {
app.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
console.log($scope.message); // it is repeated twice here.
}]);
});
HTML,
<head>
<link rel="stylesheet" href="style.css">
<script data-main="scripts/main.js" src="scripts/vendors/requirejs/require.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
main.js,
require.config({
//baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'domReady': 'vendors/requirejs-domready/domReady',
'angular': 'vendors/angular/angular',
'angular-route': 'vendors/angular-route/angular-route',
'jquery': 'vendors/jquery/dist/jquery'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
exports: 'angular'
}
}
});
define([
'controllers/welcomeController',
'bootstrap'
]);
bootstrap.js,
define([
'require',
'angular',
'app'
], function (require, ng) {
'use strict';
require(['domReady!'], function (document) {
ng.bootstrap(document, ['myApp']);
});
});
app.js,
define([
'angular'
], function (ng) {
'use strict';
//For single module retrun.
return ng.module('myApp', []);
});
But it works ok on Angular without Requirejs. I don't need to remove remove ng-app="myApp" from the div. Why?
<head>
<link rel="stylesheet" href="style.css">
<script src="scripts/vendors/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('welcomeController', ['$scope', function($scope) {
$scope.message = "Message from WelcomeController";
console.log($scope.message); // It occurs only once.
}]);
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="welcomeController">
{{message}}
</div>
</div>
</body>
What have I done wrong under Requirejs with Angular?
You are bootstrapping Angular twice: once with the ng-app directive and once with the ng.bootstrap(...) code in bootstrap.js! Go either for automatic (ng-app) or for manual (angular.bootstrap) bootstrapping.
Also, like Josep mentioned in his (deleted) answer, it is better to shim angular-route as:
shim: {
'angular-route': {
deps: ['angular']
}
}
This is NOT the cause of the problem, but will prevent potential future problems (i.e. route being loaded before Angular).
angular-require-lazy may contain some useful ideas for Angular-RequireJS integration with lazy loading
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']);
});
});