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>
Related
Portion of my index.html showing i have included angular and angular ui bootstrap both. And they are loading fine , have confirmed that
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
I am injecting 'ui.bootstrap' module in my admin module which is injecting just fine
var admin = angular.module('admin', ['ngResource', 'ui.router','ui.bootstrap' ])
.controller('UserController', UserController)
This is my controller class where i am injecting $uibModal and getting exception. Could not figure out the reason why...
export default class UserController {
// #ngInject
constructor(UserService, $uibModal) {
So turned out that i was on angular 1.2 angular ui-bootstrap supports
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!
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 have absolutely no clue anymore what could be wrong here.
Using the Version 1.1.5 everything works flawless.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
Upgrading to 1.3.8 screws my whole application.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
Getting this error Argument 'ContactControllerHeading' is not a function, got undefined
.html
<html ng-app="myApp" >
<body>
<div ng-controller="ContactControllerHeading">
...
lots of cool stuff here :)
</div>
</body>
</html>
.js
var myApp = angular.module('myApp', []);
function ContactControllerHeading($scope,$http) {
$scope.Home = function() {
...
lots of cool stuff :)
}
}
There's a breaking change in Angular 1.3: you no longer can create controllers using global function (function not associated with any module)
Just a minor change, instead of defining controller in global scope, just define it in your app:
myApp.controller("ContactControllerHeading", function ($scope, $http) {
//controller code
});
Angular 1.3 no longer supports functions to stand as controllers by default. See $controllerProvider.allowGlobals() (ref). You will have to call this function from a module config() function to enable this feature. Or better, convert your code to the current practice of using
angular.module(...)
.controller('ContactControllerHeading', ['$scope','$http',function($scope,$http){...}]);
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.