I want to use Angular Datetimepicker without bower and npm.
I include datetimepicker.js into my index.html
<link href="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css" type="text/css" rel="stylesheet" >
<script src="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js"></script>
My app.js
var app = angular.module('myApp', [
'ui.router',
.....
'datetimepicker', // I try ui.bootstrap.datetimepicker and other names
]);
Also I have view and controller but now they are empty.
I get error:
Uncaught Error: [$injector:modulerr]
How to inject this library?
Addition 1:
And get error:
Uncaught Error: [$injector:modulerr]
Given this plunkr linked in the GitHub repo I think you need to add both
angular.module('myApp', [...'ui.bootstrap', 'ui.bootstrap.datetimepicker']);
Related
I have this piece of code from a mobile website that used to work perfectly.
document.addEventListener('deviceready', function() {
// launch
}, false);
var app = angular.module('app', []);
app.config(function($routeProvider){
$routeProvider
when('/home', {templateUrl: 'views/home.html'})
.when('/about', {templateUrl: 'views/about.html'})
.otherwhise({redirectTo: '/home'})
});
I updated to a newer version of angular, and I got a error.
I found out on other threads that ngRoute is now separate from angular.js so I've added it.
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
Now my error is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I don't understand why $routeProvider is still unknow now that I've added the angular route script.
I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?
Thank you.
ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:
var app = angular.module('app', ['ngRoute']);
as for the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider
Usually, this error appears when angular-route.js is not loaded for some reason.
The said project has mismatched versions for angular and its module, for example:
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js
I am trying to add angular material to a project that i have generated using jhipster. I have added the dependencies for angular-aria, angular-animate and angular-material in index.html like this:
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
I created the module like this:
angular
.module('clinicPortalApp', [
'ngStorage',
'tmh.dynamicLocale',
'pascalprecht.translate',
'ngResource',
'ngCookies',
'ngAria',
'ngCacheBuster',
'ngFileUpload',
'ui.bootstrap',
'ui.bootstrap.datetimepicker',
'ui.router',
'infinite-scroll',
'angular-loading-bar',
'ngAnimate',
'ngMaterial'
// jhipster-needle-angularjs-add-module JHipster will add new module here
])
And when I run the server using maven and I am trying to access the application I am receiving the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module clinicPortalApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
In the bower_components folder I have the angular material dependency. I do not know how to solve this issue. Could you please help me?
Thanks.
This is driving me up the wall! I am trying to use angular-animate.js but some reason the line $$selectors property of $$animateProvider (line 451) is undefined. Can someone explain how this property gets populated?
This situation is causing the lookup function at line 617 to throw "TypeError: Cannot read property '' of undefined"
My js includes look like this:
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
CSS includes like this:
<link rel="stylesheet" href="app/css/bootstrap.css" />
<link rel="stylesheet" href="lib/animate-css/animate.css"/>
and my app.js like this:
var app = angular.module('app', [
// Angular modules (dependencies)
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
'ngAnimate', // animations
'ui.bootstrap' // ui-bootstrap (ex: carousel, pagination, dialog)
]);
The frustrating thing was that this was working but I've somehow broken it. I've tried cleaning and downloading all the libraries again. Any help greatfully received!
I am using Gulp and Bower to download/import. All the files are present and being loaded by the browser:
TypeError: Cannot read property '' of undefined
at lookup (angular-animate.js:617)
at animationRunner (angular-animate.js:681)
at performAnimation (angular-animate.js:1284)
at angular-animate.js:959
at angular-animate.js:539
at Scope.$get.Scope.$digest (angular.js:15606)
at Scope.$get.Scope.$apply (angular.js:15824)
at done (angular.js:10263)
at completeRequest (angular.js:10435)
at XMLHttpRequest.requestLoaded (angular.js:10376)
This is due to a version conflict with angular 1.4 and angular-material master, which depends on 1.3.
Probably updating your angular version ""angular": ">=1.4."," in bower.json should solve this problem.
My app.js looks like below:
//app.js
var angular = require('angular');
angular.module('app', []);
angular.module('app').controller('MainCtrl', function ($scope) {
$scope.test = "abc";
});
//index.html
<body ng-app="app" ng-controller="MainCtrl">
{{test}}
<script src="dist/app.js"></script>
</body>
The directory structure is as follows:
app/
index.html
app.js
node_modules/
angular/
Angular was installed using npm install.
I then compile the code using the following command:
browserify --entry app.js --outfile dist/app.js
Then upon opening the file index.html in the browser I get the following errors:
Uncaught TypeError: undefined is not a function
angular.module('app', []);
Further errors:
2014-11-30 19:44:46.345app.js:4082 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
What could i be missing ?
.
Finally figured it out.
What had to be done is as below:
Create a angular-index.js file in node_modules/angular folder
Contents of this file are as below:
require('./angular.min.js');
module.exports = angular;
Then include this file in the browser option of the package.json file.
How exactly this makes things work I am not yet sure.. but this got the code rolling.
I've an running an web application with angular.js (1.2.9)
i want to extend it with some animation stuff.
For this i i referenced the ng-animate js-file:
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<script src="https://code.angularjs.org/1.2.9/angular-animate.js"></script>
<script src="~/Scripts/ng/restangular.js"></script>
and I extended my module creation with ng-animate
var crApp = angular.module('crApp', ['ng-animate','restangular', 'ui.bootstrap', 'ui.router'])
but from then on i got a "uncaught object" error without changing anything else.
For me this looks like the ng-animate module could not be resolved.
What am I doing wrong?
Try
var crApp = angular.module('crApp', ['ngAnimate','restangular', 'ui.bootstrap', 'ui.router'])
Edit: The problem for the author was that he spelled 'ngAnimate' incorrectly, and thus the module could not be loaded.