I have found an app online using AngularJS with Lodash.
The way Lodash is included is simply by adding to the body the following line (after having included angular):
<script src='vendor/lodash/3.3.1/lodash.min.js'></script>
<script src='myApp.js'></script>
Inside myApp.js, the first line is :
/* global angular, _ */
And then you have access to Lodash (using _)
I am not sure to understand why it works...
Lodash includes itself on the global scope level. It does so by attaching _
to the window object (see code here).
That comment line you're seeing has nothing to do with this. It's a configuration line for a linter like JSHint, so it doesn't throw errors at you because it thinks those variables are undefined.
I would include lodash the following way.
Include it in index.html before angular, just like You did (although I prefer using bower command,which would make it available globally). And Have constant in your module
angular.module('sampleApp', [])
.constant('_', _);
Inject it into your controller or angular component. Hope this helps.
.controller('sampleAppController', function ($scope) {
$scope._ = _;
})
Also, You can attach it to rootScope, I wouldn't prefer doing it though.
Related
I am trying to add 'base64' module to my Angular page controller.
Until now I have declared my controller like this:
angular.module('app').controller('newProjectController', newProjectController);
now what I should be doing looking at the git (https://github.com/ninjatronic/angular-base64) is
angular.module('app', ['base64'] ).controller('newProjectController', newProjectController);
However, what happens is that my view is just empty. It does not give any error message, but the view is rendered empty. I have included the js file in my index.html page, before using the controller.
The same problem persists when I use
angular.module('app', [] ).controller('newProjectController', newProjectController);
so the 'base64' module cannot be the problem in this...
Any ideas of what's going wrong? I am on Angular version 1.4.1.
first define module
angular.module('app',['base64'])
second define controller by referencing to defined module
angular.module('app' ).controller('newProjectController', newProjectController)
third make good tea ))
I've found the following directive to select objects from checkboxes:
https://vitalets.github.io/checklist-model/
My problem is that we are using typescript and i have absolutely no idea how to write the given directive in typescript.
I know that the basic style is the following
module myModule {
'use strict';
export function checklistModel(): ng.IDirective {
return {...};
};
};
My problem is that I need the $parse and $compile services to get injected. I've tried to put the code from the directive in the link but I have no idea how to get the directive working.
Could someone please give me a hint on how to inject services and which part of the given code goes in the link and/or the compile?
There is no specific issue with TypeScript regarding dependency injection. Simply define the dependencies you want to inject as parameters of checklistModel. If you want to ensure that the dependencies can be resolved after a minification of the javascript files, you can define the dependencies additionally via the $inject property (This will work in normal js as well):
module myModule {
'use strict';
checklistModel.$inject = ['$parse', '$compile'];
export function checklistModel($parse, $compile): ng.IDirective {
return {
link: function() { ... }
};
};
angular.module('myModule').directive('checklistModel', checklistModel);
};
Everything else is normal angular stuff. (Beside that, the type IDirective will tell you how the return-value should look like)
I hope this will help.
I have two files in which I define services in my angular app, but when I try to use them both in my directive, I get an error saying the service provider is not found for whichever directive I define second. It seems like one service is overwriting the other. If I change the module definition in service2.js to myapp.services2, then it works. I would think I could add multiple factories to the same module this way. Can someone point out what I'm doing incorrectly?
service1.js:
var services = angular.module('myapp.services',[]);
services.factory('Service1', function() {
// service code
});
service2.js:
var services = angular.module('myapp.services',[]);
services.factory('Service2', function() {
// service code
});
mydirective.js:
angular.module('myappdirective', []).directive('myapp', ['Service1', 'Service2',
function(service1,service2) {
// directive code
}]);
This is from the docs:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Found here:
https://docs.angularjs.org/guide/module
This is possible, however will be error prone, hence not recommended
Make small modification to what you are already doing
Just do not re-declare the module variable in other files other than service1.js or put the module definition to a file of its own and include these JS file in the order of Module.js, services.js, directive.js then it will work
I have several directives and factories spread over several files but I want all of them to be included inside the same module. For example:
user-account.js
var userModule = angular.module("user", []); //I create the module here
userModule.directive("userPicture", ...);
user-transactions.js
var userModule = angular.module("user"); //I use the module here
userModule.directive("userPayment", ...);
The problem I have is for this to work I need to include the files in the right order, otherwise it won't work since the creation of the module is only done in user-account.js. I don't like this since users for these modules would need to know the proper order for it to work.
So my question is, how can I structure my modules creation + usage in an elegant way? I was thinking on creating some kind of Singelton helper to create the module if it doesn't exist but I don't love the idea. Any other ideas?
Don't mix the user module and the user-account in the same file.
app.js:
angular.module('myApp', ['user']);
user.js:
angular.module('user', []);
user-account.js:
angular.module("user").directive("userPicture", ...);
user-transactions.js:
angular.module("user").directive("userPayment", ...);
And then in your index.html:
<!-- modules -->
<script src="js/app.js"></script>
<script src="js/user.js"></script>
<!-- directives -->
<script src="js/directives/user-account.js"></script>
<script src="js/directives/user-transactions.js"></script>
I would suggest using requirejs in that case. Then you won't have to worry about ordering of your script files.
I am following the style from the book Mastering Web Application Development with Angularjs, the link is the whole example explained in the book.
The main idea of this style is
1. Dived code by businsess feature instead of by type;
2. Put everything from one module into one file, like:
// myApp.js
angular.module('myApp', ['user']);
//user.js
angular.module('user', [])
.directive("userPicture", ...);
.directive("userPayment", ...);
//index.html:
<script src="js/app.js"></script>
<script src="js/user.js"></script>
Why doing that is no matter directives, service or controllers, they are talking to each other, in one file you don't need to switch files.
Yes, you may bloat up the model file, but it is good sign to separate into another model.
I am using that style in my projects, and I found the code much readable than before.
I'm trying to implement the code from https://github.com/Ciul/angular-facebook or more specifically the code from http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview
I included the Javascript code from http://rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js and script.js
In script.js, I replaced:
angular.module('CiulApp', ['facebook'])
with
angular.module('app', ['facebook'])
because I already have a module called 'app' and it is the one for the entire site:
<html data-ng-app="app">
However, I get the following error in the browser console:
Error: Unknown provider: app.configProvider <- app.config
at Error ()
at http://localhost:8888/bower_components/angular-complete/angular.js:2652:15
...
...
I cannot figure out why I'm getting this error.
I do have a module called 'app.config' in my app.js file:
angular.module('app.config', []).value('app.config', { .... })
However, I don't think my app.config module is the source of the problem because I've changed the name of it and I still get same error. (I did not get any errors before I tried to implement http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview)
Can anyone help?
So, are there more than 1 line like this in your code now:
angular.module('app', [...
?
One for initializing the module, another one for handling Facebook auth? If yes, try this:
Locate the 1st occurrence of the code (that is, where you declare the module) and put all dependency declarations there:
angular.module('app', ['facebook', 'other dependencies...'])
Then, locate the other line, where you are dealing with the FB auth, and replace it with:
angular.module('app').doYourStuff(
This way you will declare the module only once, and when you want to alter it, you'll get the already initialized version instead of creating another module over and over.
It would be easier if you would provide jsFiddle/plunker of the non-working code. Anyway it seems that you are initializing your 'app.config' module with itself
angular.module('app.config', []).value('app.config', { .... })
and because your are not giving enough information I'm guessing that your trying to inject your 'app.config' somewhere in your code?
If you want to configure you 'app' you should do in this way
angular.module('myModule',[]).value('foo'{bar:'abc'})
angular.module('app',['myModule']).config(function($routeProvider){
$routeProvider.when('/',{templateUrl: 'partials/phone-list.html', controller:'SomeCtrl')
}).run(function($foo){
alert($foo.bar)
})
Also checkout the documentation how to use modules. AngularJS : module