I wish to inject two dependences in my module, but angular not accepts this very well , someone can help-me? i´m beginner in angular.
var app = angular.module('aplication', ['infinite-scroll','ngAnimate']);
sequence of scripts.
error:
Make sure you have loaded the references,
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<script src="app.js"></script>
<script src="infinite-scroll.js"></script>
And then,
app = angular.module('application', ['ngAnimate', 'infiniteScroll']);
Demo
I've changed my script to:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
and works fine!
Related
I have a angular app which I have used ng-route dependency. My app works fine with following code
var app = angular.module('myApp', ['ngRoute']);
Now am trying to implement angular.chosen in the app, which I have to inject angular.chosen in my module to work. I am unaware of injecting multiple dependencies in the module. I tried with the following code, but that did not work out.
var app = angular.module('myApp', ['ngRoute','angular.chosen']);
Please help me. thanks in advance
You need to include the necessary references in the index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src= "https://github.com/adityasharat/angular-chosen/blob/master/angular-chosen.js">
<script src="../modules/app.module.js"></script>
I was just going through the code of a online reppositoty using angular.js and came across the following example:
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<script src="js/ol.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script src="js/angular-openlayers-directive.js"></script>
<link rel="stylesheet" href="css/ol.css" />
<link rel="stylesheet" href="css/angular-openlayers-directive.css" />
<script>
var app = angular.module('demoapp', ['openlayers-directive']);
</script>
</head>
<body>
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
<ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place.">
</ol-marker>
</openlayers>
<h1>Adding a layer with markers with no javascript example</h1>
</body>
</html>
Now there is the below part:
var app = angular.module('demoapp', ['openlayers-directive']);
I am not quite sure about, the above line, I read about dependency injection HERE. But i am not quite sure what is the purpose of the above line ? what is it really doing ?
I have gone though a few online examples that have code like the below:
// Define a new module for our app. The array holds the names of dependencies if any.
var app = angular.module("instantSearch", []);
(See the comment) , Ok but i still don't get what ['openlayers-directive'] , is doing ?
It declares a module named 'demoapp' that is dependant on a module named 'openlayers-directive'. This, basically, means that all the angular components (directives, services, filters, controllers, constants, etc.) defined in the module 'openlayers-directive' will be usable in your angular application.
Read the documentation.
openlayers-directive is an angular module. When you are creating your demo app module, you are including a reference to the openlayers module.
So if you wanted to use other modules in your demo app module you would also include them here, where you are declaring your module for the first time.
For example:
var app = angular.module('demoapp', ['openlayers-directive', 'anotherModule', 'yetAnotherModule']);
In your code you can then pass in any services from these modules by simply including them as parameters.
So if you have a demoController you could pass in a service from one of the included modules and use it.
For example
angular.module('demoApp').controller('demoContoller', function($scope, anotherModuleService)
{
$scope.someFunctionFiredFromController = function()
{
//I have access to this service because the module it
//belongs to was referenced by the demoApp module, and the
//service was injected into the controller
anotherModuleService.doSomethingRelevant();
}
});
I'm injecting stripe angular into a module to create stripe tokens, but i seem to be having some dependecy injection issues:
i've got both the Stripe.js and the angular-stripe directive loading in index.html
<!-- Stripe includes-->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>
<!-- Ends Stripe includes -->
<script src="app.js"></script>
<script src="javascripts/form.js"></script>
<script src="factory/appointments.js"></script>
<!-- <script src="directives/datepicker.js"></script>
--><script src="controllers/main.js"></script>
<script src="controllers/form-controller.js"></script>
and I'm injecting correctly based on the docs:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Stripe.setPublishableKey('my-key-here');
}]);
what am i doing wrong?
here is my error
Error: [$injector:unpr] Unknown provider: stripeProvider <- stripe <- formController
http://errors.angularjs.org/1.3.14/$injector/unpr?p0=stripeProvider%20%3C-<div ui-view="" class="ng-scope">tripe%20%3C-%formController
You list stripe as a dependency, but never pass it into your function:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment) {
Just add a stripe parameter:
.controller('formController', ['$scope', 'Appointment', 'stripe' , function($scope, Appointment, stripe) {
By angular-stripe directive, do you mean https://github.com/gtramontina/stripe-angular ?
If so, you are misunderstanding its usage(yes its doc is poor). You should add stripe as a module dependency instead of a service to inject. Change the code in your app.js to something like this:
angular.module('formApp', ['stripe']);
And remove the stripe in your injection annotaion, then you are good to go.
You may also need to add Stripe.setPublishableKey('your-publishable-key'); into a suitable place, possibly a run block or a config block.
The docs are just fine.
First make sure that you are loading the required files:
<script src="https://js.stripe.com/v2/"></script>
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular-stripe/release/angular-stripe.js"></script>
Then add the angular-stripe module to your app:
angular.module('app', [ 'angular-stripe']...
In your config block load the stripeProvider and initialize it with your Stripe API key.
angular.module('app').config(function(stripeProvider) {
stripeProvider.setPublishableKey('yourapikey');
....
Finally you can use this in your controller:
angular.module('app').controller('CheckoutCtrl', function(stripe) {
stripe.card.createToken(card) ...
Ensure you do all these steps. My guess from your error message is that you did not load the angular-stripe' module in your app which would then cause any call tostripeProvider` to fail with that error.
Now that I have my script files referenced in my view template, I am having trouble injecting the first one into the second one.
If I unplumb the dependency that LearnerService has on SCORMService, everything displays according to plan, but is of course nonfunctional because LearnerService relies on SCORMService to accomplish its purpose. When I try to actually use my SCORMService within my LearnerService, I get Michael Bay explosions and sad trombones.
So, I'm using ngRoute. That might be important; maybe not.
I'll list my app.js, my script ordering in index.html, learnerServices.js, SCORMServices.js, and controllers.js
app.js
'use strict';
var app = angular.module('client', [
'ngRoute'
,'controllers'
,'services.proxy.scorm'
,'services.proxy.lms'
]);
index.html
...
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/SCORMService.js"></script>
<script src="js/LearnerServices.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
LearnerServices.js
'use strict';
var learnerServices = angular.module('services.proxy.lms',['scorm-service']);
learnerServices.factory('LearnerService', [ 'scorm-service', function(){
return true;
}]);
SCORMService.js
'use strict';
var services = angular.module('services.proxy.scorm', []);
services.factory('scorm-service',function(){
var foo = {};
foo.bar = "snazzy jazzy";
return foo;
});
I seem to be attempting to corner the market on stupid mistakes today. Can anyone see what stupid mistake I did this time?
This line should be:
var learnerServices = angular.module('services.proxy.lms',['services.proxy.scorm']);
Notice in your code you are saying the module has a dependency on scorm-service however the dependency for the module is on services.proxy.scorm
Load your dependencies first in your html. That'll help.
I am Jasmine/AngularJS unit testing newbie. I created a simple angular app to add two numbers so that I can learn how to write unit tests for Angular App. The Angular Doc on unit test is incomplete.Based on the blogs and stack overflow answers, I build my first test and I am running into 'injector' undefined error. I am using Jasmine framework for the unit testing.
HTML
<body>
<div ng-controller="additionCtrl">
First Number: <input ng-model="NumberOne"/><br/>
Second Number: <input ng-model="NumberTwo"/>
<button ng-click="add(NumberOne, NumberTwo)">Add</button><br/>
Result: {{Result}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/additionCtrl.js"></script>
</body>
Controller:
function additionCtrl($scope) {
$scope.NumberOne = 0;
$scope.NumberTwo = 0;
$scope.Result = 0;
$scope.add = function (a, b) {
};
}
Jasmine spec file.
describe("Addition", function () {
var $scope, ctrl;
beforeEach(inject(function ($rootScope, $controller) {
this.scope = $rootScope.$new();
ctrl = $controller('additionCtrl', {
$scope: this.scope
});
}));
it("should add two integer numbers.", inject(function ($controller) {
expect(ctrl.add(2, 3)).toEqual(5);
}));
});
Specrunner.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../App/Scripts/additionCtrl.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="spec/addition.spec.js"></script>
This is a failing test and once the test fails with the expected result then I can modify the code to make it pass, but I am facing the problem with somehow angular mock is not getting injector.
I saw an example where I can newup a controller instead of using injector, but I would like to try to learn on using injector so that I am set up more complex tests. I might be missing something simple here. Please direct me to any write up I might have missed.
Thanks
For future reference here's a Plunker with a full unit test setup (for the answer to your question I was about to post)
http://plnkr.co/edit/KZGKM6
Useful to have this setup available for sharing test scenarios.
Found the problem, the url I was using to access angular-mock was wrong. I changed it to "http://code.angularjs.org/1.0.6/angular-mocks.js" and also changed the order of the script tags to
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular-mocks.js"></script>
now it is failing on the method as it is supposed to be.