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
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.,
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.
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>
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);
});
});
});
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() {}
}]);