After injecting ui.bootstrap into my module the application is loading a blank page without throwing any errors.
If i remove the injection that page loads fine.
angular.module('app',['ui.bootstrap'])
I have all the necessary includes
<script type="text/javascript" src="/ev2/lib/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/ev2/lib/bower_components/angular-animate/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
Related
I need some help with firebase. I have an app with ionic, angularjs and firebase and works fine with browser. When I deploy to emulator or device I get the below error message.
Error: [$injector:nomod] Module 'firebase' 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.
I have included the header files as follows
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"> </script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
Can someone tell me if I missed anything?
I am having issue with ngMaterial while including it in project then its showing error Uncaught Error: [$injector:unpr]
My app.js file look like
angular
.module('app', ['ui.router','ngMaterial','objectTable'])
.config(config)
.run(run);
and in view, I have included files in this order
<!-- external scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- bower plugins -->
<script type="text/javascript" src="app-content/scripts/object-table.js"></script>
<!-- application scripts -->
<script src="app.js"></script>
<script src="app-services/user.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="home/index.controller.js"></script>
<script src="account/index.controller.js"></script>
Can anyone help me to solve this? I tried to change the order of files but still, the issue is same.
It should be like this.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
Import angular-animate and angular-aria before angular-material.
see this code. switch angular-animate import and see the difference.
http://codepen.io/next1/pen/NNRMeQ
For posterity: I installed using Visual Studio and NuGET. I first installed my angularjs.core package (only the angular file). This was version 1.5.8. I then installed angular material afterwards. This was installed in version 1.1.3. What i didnt notice at first was that when iu installed angular material was that it included its own version of angular.
The point is - i was using my first installed "angularjs.core" in a way to high version (i think this was the problem). I then switched to using the angular version shipped with material NuGet package. Then then everything worked.
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngGrid due to:
Error: [$injector:nomod] Module 'ngGrid' 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.
Above is the error message I received.
I have loaded the ng-grid script AFTER angularjs, jquery.
I injected it into app like this:
var myApp = angular.module('myApp', ['ui.bootstrap','ngRoute', 'ngResource','ngGrid'])
.controller('myAppCtrl', myAppCtrl);
I wonder where did I do wrong?
===UPDATE
Here is my header
<!-- Angular Libs -->
<script type="text/javascript" src="/library/angularjs/1.2.9/angular.js"></script>
<script type="text/javascript" src="/library/angularjs/1.2.9/angular-route.js"></script>
<script type="text/javascript" src="/library/angularjs/1.2.9/angular-resource.js"></script>
<!-- jQuery Libs -->
<script type="text/javascript" src="/library/jquery/2.1.1/jquery.js"></script>
<!-- Third-party Libs -->
<script type="text/javascript" src="/library/angular-ui/bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/library/angular-ui/ng-grid3/2.0.7/ng-grid.js"></script>
They are all found. No error of 404 return in Chrome Inspector
USE ui.grid not ngGrid
yea. as stupid as it is. Confused by its official GetStarted lol
I was facing an error with ui-grid, I used the following ng-grid to solve.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
I am learning Angularjs and Restangular. I am following this page http://www.ng-newsletter.com/posts/restangular.html
== app.js==
angular.module('app', ['restangular']);
angular.module('app')
.controller('TestCtrl', ['$scope','Restangular',
function($scope,Restangular) {
this.product="gem";
}]);
== index.html ==
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/restangular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="TestCtrl as test">
{{test.product}}
</div>
</body>
</html>
When i open index.html, it just opens {{test.product}}. But when i remove restangular references from app.js, it works fine. Paths to .js files are correct.
Please help me in getting this sorted.
==Solution==
This stackoverflow answer told me that i should NOT be using minified version of angular.js as it doesn't show error in detail. I was getting this error:
Error: Failed to instantiate module restangular due to: '_' is
undefined
From this answer i came to know that i was missing underscore/lodash which is a dependency of restangular. I included lodash in my html and everything worked fine then.