cannot inject datepickerConfigProvider from ui.bootstrap - javascript

I'm trying to inject datepickerConfig inside the run phase, but angular says that it's unable to find the provider: Unknown provider: datepickerConfigProvider <- datepickerConfig.
this is the code:
(function () {
angular.module('app', ['ngAnimate', 'ngCookies', 'ngRoute', 'ngSanitize', 'pascalprecht.translate', 'ui.bootstrap', 'ui.select']);
// config phase is omitted, it only configures the i18n async loading
function runFn($translate, datepickerConfig) {
datepickerConfig.currentText = $translate('label.today');
datepickerConfig.clearText = $translate('label.clear');
datepickerConfig.closeText = $translate('label.close');
}
runFn.$inject('$translate', 'datepickerConfig');
angular.module('app').run(runFn);
})();
I also tried to inject datepickerConfig inside the config phase, but angular gave me the same error.
I really can't figure out what is the problem.
In the index.html i have all the .js I need
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
what's wrong?
Thanks

Related

Angular: Controller is undefined when adding a directive

I get the following error when adding a directive to my site:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
The error only occurs when I include the welcome-directive (welcome.js) in my site. If the import is removed the controller works.
Body of my index.html
<body ng-app="my-app">
<div ng-controller="MainController">
<welcome></welcome>
</div>
<!-- Angular -->
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<!-- Without this line the controller works -->
<script src="js/directives/welcome.js"></script>
</body>
app.js
(function() {
var app = angular.module('my-app', []);
})();
mainController.js
angular.module('my-app', [])
.controller('MainController', ['$scope', function($scope) {
console.log('Controller working');
}]);
welcome.js
angular.module('my-app', [])
.directive("welcome", function() {
return {
restrict: "E",
template: "<div>Test test.</div>"
};
});
You are redefining the module. Define module only once.
when used as angular.module('my-app', []) it defined the module this should be used only once. When you want retrieve it. then use angular.module('my-app')
Use
angular.module('my-app') //Notice remove []
.directive("welcome", function() {
});
passing a 2nd argument like this angular.module('my-app', []) creates a new module, use it only once.
To retrive a module use var module = angular.module('my-app') and use module.controller(... or module.directive(.... etc.,

How to import module and display on view in angular?

I am trying to load my first view in angular. But I make a project in modular fashion to learn good coding style.
I will show how I make a directory to create a module
Or look at full image here...
I write this on my index.html page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="lib/angular.js" type="text/javascript"></script>
<script src="lib/angular-ui-router.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body >
<div ng-app="firstApp">
<div ui-view="app"></div>
</div>
</body>
</html>
in app.js
var app= angular.module('firstApp',['ui.router']);
in controller firstcontroller.js file I write this
(function() {
'use strict';
angular
.module('firstApp')
.controller('firstcont', firstcont);
firstcont.$inject = ['$scope'];
function firstcont($scope) {
$scope.clickEvent=function(){
alert('---')
}
}
})();
on router.js file I write this
(function() {
'use strict';
angular.module('firstApp.firstdir').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
// Default
$urlRouterProvider.otherwise('/app');
// Application
$stateProvider
.state('app', {
url: '/app',
views:{
app: { templateUrl: 'firstdir/templates/firstpage.html' }
},
controller:"firstcont"
});
}
})();
in module.js file I write this
(function() {
'use strict',
angular.module('firstApp.firstdir', [
'ui.router',
]);
})();
on template.html I write this
<div ng-controller="firstcont">
<h1>First page</h1>
<button ng-click="clickEvent()"> go to second page</button>
</div>
I don't know why it doesn't display first view. Actually, I am not able to make plunker, because there is no way to make directory?
angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' 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.2.21/$injector/nomod?p0=firstApp.firstdir
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)
First include the js files (the module declaration always come first, and first submodules)
<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
Declare your 'firstcont' as a firstApp.firstDir controller:
var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);
Put your submodule as a dependece of your firstApp module:
//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);
UPDATE:
Here's the code example http://goo.gl/xxvIvB (to run click in preview)
You've defined your routes in another module: firstApp.firstdir.
To import the module, use the following syntax:
var app= angular.module('firstApp',['firstApp.firstdir']);
You don't need to import ui.router, because its imported from firstApp.firstdir.

Failed to instantiate module ngAnimate due to:

I am getting problems with building my Angular JS project.
It says
Failed to instantiate module ngAnimate due to:
I have put all my services into [] but the ngAnimate is not working.
Here is the app
Failed to instantiate module ngAnimate due to:'use strict';
/* global app:true */
var app = angular
.module('angNewsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ngAnimate',
'firebase'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/posts.html',
controller: 'PostsCtrl'
})
.when('/posts/:postId', {
templateUrl: 'views/showpost.html',
controller: 'ViewPostCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.constant('FIREBASE_URL', 'https://scorching-fire-4068.firebaseio.com/');
app.directive('post', function() {
var controller = function($scope) {
$scope.showAnswer = false;
};
return {
restrict: 'C',
scope: false,
controller: controller
};
});
app.animation('.answer-animation', function(){
CSSPlugin.defaultTransformPerspective = 1000;
TweenMax.set($("div.back"), {rotationX:-180});
$.each($("div.box"), function(i,element)
{
console.log(element);
var frontCard = $(this).children("div.front")
var backCard = $(this).children("div.back")
var tl = new TimelineMax({paused:true})
tl
.to(frontCard, 1, {rotationX:180})
.to(backCard, 1, {rotationX:0},0)
this.animation = tl;
});
return {
beforeAddClass: function(element, className, done){
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.play();
}
else {
done();
}
},
beforeRemoveClass: function(element, className, done) {
if (className == 'answer') {
var el = element.find('.box')[0];
el.animation.reverse();
}
else {
done();
}
}
};
});
And the index.html script tags
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/firebase-simple-login/firebase-simple-login.js"></script>
<script src="bower_components/angularfire/angularfire.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="scripts/app.js"></script>
<script src='scripts/services/posts.js'></script>
<script src="scripts/filters/url.js"></script>
<script src="scripts/controllers/posts.js"></script>
<script src="scripts/controllers/postview.js"></script>
<script src="scripts/controllers/nav.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
<!-- endbuild -->
Ok so this is the answer,
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script>
Were both external library loads, which meant they couldn't go through the minification process.
I solved this by installing the libs through bower, and adding them like it.
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/greensock/src/minified/TweenMax.min.js"></script>
Just adding this in case it helps someone else!
I had the same problem but my cause was that I had the src in the script tag for angular-animate incorrect - I'd pasted bower_components/angular/angular-animate.js not the correct reference which was:
<script src="bower_components/angular-animate/angular-animate.js"></script>

End-to-End Testing AngularJS app with Jasmine

I have an AngularJS app. I would like to implement some end-to-end testing that I can run on-demand. In an effort to do this, I've built a basic test screen with the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Results</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-mocks.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css" />
<!-- Load the Test Files-->
<script type="text/javascript" src="e2e/tests.e2e.js"></script>
</head>
<body>
run tests
</body>
</html>
My tests.e2e.js file looks like the following:
'use strict';
describe('MyApp', function() {
browser.get('http://localhost:11000/index.html');
describe('Welcome Screen', function () {
});
});
When click "run tests" in my test runner, I get an error that says:
MyApp encountered a declaration exception
ReferenceError: browser is not defined
My question is, what am I doing wrong? The examples I've seen use browser to basically start the app. However, I can't seem to figure out how to do end-to-end tests on-demand.
Thank you for any help you can provide.
(function (module) {
var myController = function ($scope, $http) {
$http.get("/api/myData")
.then(function (result) {
$scope.data= result.data;
});
};
module.controller("MyController",
["$scope", "$http", myController]);
}(angular.module("myApp")));
describe("myApp", function () {
beforeEach(module('myApp'));
describe("MyController", function () {
var scope, httpBackend;
beforeEach(inject(function ($rootScope, $controller, $httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
httpBackend.when("GET", "/api/myData").respond([{}, {}, {}]);
$controller('MyController', {
$scope: scope,
$http: $http
});
}));
it("should have 3 row", function () {
httpBackend.flush();
expect(scope.data.length).toBe(3);
});
});
});

Jasmine test for Angular can't find my controller

I'm having trouble setting up Jasmine tests for an Angular app. Jasmine can't find my controller (I suspect it can't find my app at all).
Here is a sample that demonstrates the problem I'm running into:
angular.module('testMod', [])
.controller('testController', ['$scope', function($scope) {
$scope.person = {name: 'Jim', age: 14};
function innerFunction() {}
}]);
Test:
describe('testMod suite', function() {
var $rootScope, myController;
beforeEach( inject(function($injector) {
angular.module('testMod');
$rootScope = $injector.get('$rootScope');
var $controller = $injector.get('$controller');
myController = $controller('testController', {$scope: $rootScope});
}) );
it('works', function() {
expect( typeof myController.innerFunction).toBe('function');
});
});
It fails on the line
myController = $controller('testController', {$scope: $rootScope});
The error I'm seeing is:
Error: [ng:areq] Argument 'testController' is not a function, got undefined
I'm using the standalone SpecRunner.html for Jasmine, with my app and spec loaded:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<!-- angular-mock must be loaded AFTER Jasmine -->
<script type="text/javascript" src="../src/angular-1.2.5.min.js"></script>
<script type="text/javascript" src="../src/angular-mock-1.2.5.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../src/testMod.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/testMod.Test.js"></script>
</head>
<body>
</body>
</html>
Any suggestions are appreciated - I've been struggling with this for a while now.
There are several problems with your test:
You are not injecting scope properly.
You are not using scope properly.
There is a toBeDefined() method to check if function is defined no need to type check.
Change the code in your test to
describe('testMod suite', function() {
var $rootScope, testController;
beforeEach(module('testMod'));
beforeEach(inject(function($controller, $rootScope) {
myScope = $rootScope.$new();
ctrl = $controller('testController', {
$scope: myScope
});
}));
it('works', function() {
expect( myScope.innerFunction).toBeDefined();
});
});
Also, change your angular controller code to:
angular.module('testMod', [])
.controller('testController', ['$scope', function($scope) {
$scope.person = {name: 'Jim', age: 14};
$scope.innerFunction = function() {}
}]);

Categories