I'm new to AngularJS. I'm attempting to convert a project I'm working on that used regular Javascript, jQuery, and Bootstrap into an AngularJS single page project and I'd like to keep using the Bootstrap library for it. I followed the instructions and downloaded the necessary files at http://angular-ui.github.io/bootstrap/ but when I try loading my project at http://localhost:5000 I get none of my page loaded and an error in the console. I downloaded angular-ui-bootstrap in my project with the command "npm install angular-ui-bootstrap" from my Node.JS command prompt
In index.html I have tried changing the order of the script and link tags in my head section to no success. I have also tried removing the 'ui.bootstrap' dependency in main.module.js to see if AngularJS works by only loading my 'recipeList' dependency and it does work.
From main.module.js:
angular.module('mainApp', ['ui.bootstrap', 'recipeList']);
From index.html:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="main.module.js"></script>
<script src="recipe-list\recipe-list.module.js"></script>
<script src="recipe-list\recipe-list.component.js"></script>
<title>Sousmate</title>
</head>
<body>
<div id="container">
<header>
<h1>Sousmate</h1>
</header>
<section>
<recipe-list></recipe-list>
</section>
</div>
</body>
</html>
Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.7.8%252F%2524injector%252Fnomod%253Fp0%253Dui.bootstrap%250AF%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A7%253A168%250AHe%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A453%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A227%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A496%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A43%253A27%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A46%253A460%250Ac%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A370%250AAe%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A21%253A45%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A348%253A494%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A38%253A444%250A%0AF%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A7%3A168%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A285%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A27%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Afb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A46%3A460%0Ac%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A57%0AUc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A370%0AAe%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A21%3A45%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A348%3A494%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A38%3A444%0A
The error is:
Module 'ui.bootstrap' 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.
From your html I don't see that you've included the angular bootstrap js. You need this file along side your bootstrap css. You can download it here.
e.g.:
<script type="text/javascript" src="ui-bootstrap-tpls-2.5.0.min.js"></script>
Hope this helps!
I am trying to inject dependency for my app on "ngRoute" as well as "pubnub.angular.service".
I have written to separate apps having this dependency injection separately and my codes are working.
Now I am trying to write an app which needs both routing and pubnub.angular.service.
But when I injected both dependencies, I am getting following error
"Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[ng:areq] Argument 'fn' is not a function, got string"
.....
return new ErrorConstructor(message);
The return statement is in anjular.js file.
Here is my index.html
<head>
<script data-require="angularjs#1" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://cdn.pubnub.com/pubnub-3.7.21.js"></script>
<script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-3.1.1.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
and here is the script.js entry
var app = angular.module("myApp", ["ngRoute"], ["pubnub.angular.service"]);
After adding the "pubnub.angular.service" dependency the error appears.
If I remove this dependency my code works fine (obviously no pubnub feature is there at that time.)
Can any one help on the mistake I am making?
var app = angular.module("myApp", ['ngRoute','pubnub.angular.service']);
try this
I want to use angular-slider module in my project, I downloaded git from https://github.com/venturocket/angular-slider and added the angular-slider.js and angular-slider.css in my project and included the link in the index page like this
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="../css/angular-slider.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="../js/angular-slider.js"></script>
and added the 'uiSlider' as dependency in app.js
var app = angular.module('app', ['uiSlider', ...]);
As soon as I add 'uiSlider' as dependency in app.js the app does not work. There are no error messages in the console. I tried adding another module in the same way but the same problem occurs.
Is there anything wrong with the way I am including the module in my project? Any help would be appreciated. Thanks in advance.
I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
For each directive it's trying to use from bootstrap, I get something similar to the following:
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
Here're my includes:
<html class="no-js" ng-app="hiringApp">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="layout" content="IRLayout">
<!-- styles IRLayout-->
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
<!-- BootStrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- font-awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="#Url.Content("~/content/css/layout.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/normalize.css")">
<link rel="stylesheet" href="#Url.Content("~/content/css/main.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/css/Upload.css")">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/styles.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/site-specific.css")">
<link rel="stylesheet" type="text/css" href="#Url.Content("~/content/css/rating.css")">
<!-- Upload -->
#*<link rel="stylesheet" type="text/css" href="#Url.Content("~/Content/Upload.css")">*#
<!-- Header Scripts-->
<!-- Jquery & Jquery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="#Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>
<!-- BootStrap -->
<!-- Validate -->
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<!-- Analytics -->
<script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<!-- Angular -->
<!--
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="#Url.Content("~/Scripts/app.js")"></script>
<script src="#Url.Content("~/Scripts/controllers.js")"></script>
<script src="#Url.Content("~/Scripts/directives.js")"></script>
<script src="#Url.Content("~/Scripts/filters.js")"></script>
<script src="#Url.Content("~/Scripts/services.js")"></script>
<script>
angular.module("hiringApp").constant("$userProvider", #Model.User.SystemRoles);
angular.module("hiringApp").constant("$jobProvider", '');
</script>
<!-- Upload -->
<script src="#Url.Content("~/content/js/plupload.full.js")"></script>
<script src="#Url.Content("~/content/js/UploadImage.js")"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
<script src="~/Content/js/audio/irAudioRecorder.js"></script>
#RenderSection("script", required: false)
</head>
Here's my app module:
var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
Here's the error:
GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)
I just wanna post my solution for this error.
include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
apparently the none tpls version doesn't include those templates.
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
for more info rtfm ;)
I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:
If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.
There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.
In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.
I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:
var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
/*
* Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
*/
$httpProvider.interceptors.push('ajaxNonceInterceptor');
...
.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});
var param_start = /\?/;
return {
request : function(config) {
if (config.method == 'GET') {
// Add a query parameter named '_' to the URL, with a value equal to the current timestamp
config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
}
return config;
}
}
});
Once I removed the interceptor, the modal dialogs were showing.
I also had this issue but I was only using the tpls version of ui.bootstrap.
In my case the issue was a cache busting module ngCacheBuster.
In the network tab I could see there was cachebuster parameter at the end of the resource call:
/template/window.html?cb=4889764132
In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.
I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.
I hope this will be helpful to anyone experiencing this problem and using cachebusting.
Include ui.bootstrap.tpls right below ui.bootstrap
make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js
For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:
if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0)
{
console.log('ignoring '+config.url);
return config;
}
Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js
angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);
However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..
I am new to AngularJS and am trying to build an Mobile Web application. As I started writing controllers, services and routes for various functionalities the index.html JS and CSS include seems to be growing day by day. For example, When I start writing controller, services for any functionality then am forced to include them in index.html. I am thinking there is a fundamental problem with the coding approach. If my home page route is "/home" or "/" then home.html should download only JS and CSS files related to home page. But home.html(view) seems to download the entire Javascript and CSS library for every page. How should I design my app in such a way only the functionality related controller, services, directives Javascript files should be downloaded for a page. I appreciate if anyone can explain with a simple example.
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/lib/angular/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/carousel.css">
<link rel="stylesheet" type="text/css" href="css/pdp.css">
<link rel="stylesheet" type="text/css" href="css/pdp_751_1.css">
<script src="js/lib/jquery-1.7.1.min.js"></script>
<script src="js/lib/jquery.cycle.all.js"></script>
<script src="js/lib/jquery.touchwipe.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<!-- This is the route provider for the main app... -->
<script src="js/app.js"></script>
<script src="js/controllers/c-home.js"></script>
<script src="js/controllers/c-browse.js"></script>
<script src="js/controllers/c-product-details.js"></script>
<!--<script src="js/directives/directives.js"></script>-->
<script src="js/directives/d-product-details.js"></script>
<script src="js/services/s-home.js"></script>
<script src="js/services/s-browse.js"></script>
<script src="js/services/s-product-details.js"></script>
<script src="js/lib/angular/angular-resource.min.js"></script>
<script src="js/lib/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="js/lib/iscroll.js"></script>
You should not worry so much about the combined payload size of your files, but more about the build process and making sure to reduce HTTP requests as much as possible (1 css, 1 js is all you should have in your home.html). This is more important. Also minify everything. I suggest you check out ng-boilerplate. Its a starting point for angular apps and has most of the best practices you should be employing.
https://github.com/joshdmiller/ng-boilerplate
Make sure to read all the readme files at the various directory levels.