This should be simple but I'm fairly new to Angular and really can't understand the documentation for UI-Map form the Angular UI team.
https://github.com/angular-ui/ui-map
There are a few things I don't understand so it's probably easier for me to number them.
1) The docs talk about using Bower to install which I don't use. It says I have to load UI-map and UI-event but I'm loading Angular UI from cdnjs.com, So I think that bundles all the directives I need, or am I wrong?
2) The docs say that I have to listen to the callback parameter when loading the Google Maps API using the following code..
function onGoogleReady() {
angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
}
But I don't know what this is doing or where it is being called? Does google call this automatically when it's ready? Why is it attaching the map to an element with ID "map", surely I need to be able to dynamically use the map on many elements using the directive?
To add to the confusion, their own demo calls the function "initCall", instead of "onGoogleReady".
3) The docs say I have to add it as a dependency on my app module.
var myAppModule = angular.module('app.ui-map', ['ui.map']);
What is the app. before ui-map? My current app declaration looks like this and only has dependencies named in the array...
var portal = angular.module('portal', ['ngAnimate','ui.router', 'ui.bootstrap', 'restangular'])
Maybe I'm being really stupid, but I added 'ui-map' into the array but it didn't seem to work :(
I know this might seem easy to some but as I said I'm new to Angular and still don't totally get how dependency injection works or what order things are loaded/initialized in. Any help would really be appreciated.
It doesn't look like Angular UI maps is supported any more (I might be wrong), so I used Angular Google Maps instead.
http://angular-google-maps.org/
Related
I am trying to get a custom component working in Formio.js. I would love a complete, nontrivial working example.
I am not using angular, ng, react or the form.io service.
The documentation is terrible. I can copy out the Checkmatrix example code and run it (after much fiddling) but even it doesn't work correctly: in the formbuilder, the edit and delete controls don't show up. (There an bug issue open on this, but no resolution, which is distinctly worrisome.)
There are dead links all over the SDK reference documentation.. like for example for "Component" which seems particularly important.
There is no documentation of any of code used by the example. For example, it uses the 'renderTemplate' call, but the arguments are not described anywhere.
It appears that the only way to understand any part of this system to try to figure out all of the source code. There are no instructions for adding code.
It's not even clear what the best way to proceed is: whether I should fork the formio.js repo, learn TypeScript, and add components directly (creating a hassle if I ever want to keep formio.js up to date) or continue trying to work by registering components from add-on scripts in the browser.
** Can anyone give concrete advice on the best way to go? **
#nathaniel Tagg I couldn't find form.io proper form examples, so i would like to see your form.io examples if you are like to provide. Here is my email 'udara#staff.medicalwizard.com.au'
I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module?
The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation. I've looked at the code and don't see how to load the module without adding RequireJS to my project (which I don't want to do). Am I stuck with either not using this module or adding Require or is there a way to use this without Require?
OK, after help from those who commented (thanks everyone!), I was able to get this to work. There are a couple things that you need to do. First, I was bundling this module with the rest of my modules and trying to call it. That will not work because it needs to initialize with a parameter (angular). Therefore, you need to do the following:
Add a reference to angular-dragula.js (or the min version) to your index.html page below the declaration for angular but above where you create your app.
When you declare the dependencies for your app, specify angularDragula(angular) (not in quotes).
Use dragula as you normally would. If you need to access the service, the name would be angularDragula.
For example, here is my declaration of app:
var app = angular.module('app', [
'ngRoute',
angularDragula(angular)
]);
And then to get a simple list to be drag and drop capable, this is my html:
<div dragula='"bag-one"' dragula-model="vm.items">
<div ng-repeat="item in vm.items">{{ item }}</div>
</div>
Note that I do not declare angularDragula anywhere, unlike the examples. In the example the author gives, he requires angular and creates the angular variable and then he requires angular-dragula and creates the angularDragula variable. This is not needed if you are not using RequireJS as long as you load the scripts in the right order.
I've just started using AngularJs.
I need to use the SunCalc module to calculate sun positions for my app.
I have no idea on how to integrate the file to the app and how to access his different functions while respecting the AngularJs structure. Where to put the file? How to call a function? etc...
Here is a link so you can quickly see the structure of the SunCalc module and hopefully help me.
https://github.com/mourner/suncalc/blob/master/suncalc.js
Thanks a lot for your help!
Since this library exposes global SunCalc object with bunch of methods, what you can do is simply wrap this lib into custom service.
app.factory('SunCalc', function() {
return window.SunCalc;
});
Then you could use it like this in controller:
app.controller('MainCtrl', function($scope, SunCalc) {
$scope.position = SunCalc.getTimes(new Date(), 52.3667, 4.9000);
});
In this case you can event add your own methods to this service without messing with original library.
Note, that technically you could use globally accessible SunCalc without creating one more service for this. However using services offers sertain advantages: you can rename it easily, it allows to facade original library API, using global variables error-prone, etc.
Also remember to include script tag before Angular script tag.
Demo: http://plnkr.co/edit/rbATLGfGE2kx32tmEEoX?p=preview
I'm quite new to AngularJS so please bear that in mind when reading this question...
I have some functions that I would like to make globally available to different modules within my website, plan is to have pages performing their own functions in a single page app style (so a user list / create / modify would be one page, and a product list / create / modify would be another). I would like to have some shared logic, say utility functions, and also user authorisation that can be shared between the different page modules.
This leads to my question.
Assuming I have all the account functions encapsulated within a service (app.factory('account, etc etc...') for example) and separated into it's own JS file, is it better to place it within it's own module and using dependency injection like so:
var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);
Or just assume the name of the app variable will always be app and express it like so:
app.factory('account', ['dependencies', function (...) { }]);
Functionally both of these work, but I am trying to use best practices. The second option seems limited, I have never been keen on assuming variable are the same name throughout, for me the dependency injection method seems better but I have seen many examples of both styles out there!
Any help is much appreciated!
Really nice question. There are subtle things in this.
I think it would helpful to use following code, which is using module.
var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);
However with help of angular provider and adding module level config we can mock object or service. Eventually this will increase the test ability of code.
If there are multiple services under accounting, then I would prefer to group them inside module.
These are my aspect of to look at it. Please add more if you found.
Thanks.
Just my 2 cents on your code examples.
The following approach is not recommended:
var accountMod = angular.module('accountModule', ['dependencies']);
accountMod.factory('account', ['dependencies', function (...) { }]);
A best practice is to only have 1 component per file, therefore no need to define a variable. Take a look at this: https://github.com/johnpapa/angular-styleguide#definitions-aka-setters
If you are just starting out with Angular, I recommend that you go through the rest of John Papa's Style Guide.
I love the structure that angular fullstack generator for yeoman has.
https://github.com/DaftMonk/generator-angular-fullstack
You can see how each module and component is separated and inside, de factory, services, directives, etc. and their associate test are split in one file per functionality.
This probably is overkilling for your propose, you can take only the angular idea.
I have a small angular app that just has one directive.
It will be used on many other websites, simply by them including one JS file and then using the directive anywhere on their page.
The problem is that if I try to do this on a site that happens to also use angular, I get the classic
WARNING: Tried to load angular more than once.
This is because angular loads itself on the global namespace.
I have tried messing with the angular.js code, doing find-and-replace on instances of things like:
angular = window.angular || (window.angular = {})
to
angular = window.angularXYZ || (window.angular = {})
But it didn't work and it seems very hacky.
Any ideas for namespacing an entire angular app so that it can play nicely when initialized from within other angular apps?
A crazy but also the most realistic solution would be to load your code in an iframe.
I think the variable you're using may be incorrect, at least according to this blog post:
if (window.angular.bootstrap) {
// already loaded
} else {
// magic: somehow namespace the angular app!
}
I know it might be a pain, but if angular is already loading on one site, I would suggest you log the version of angularjs it's using and test your code against it. Otherwise you're loading up a relatively heavy framework twice.
Obviously if there's lots of versions of angularjs being used, you should only test against the most common version and the version you're currently using and suggest to the client to upgrade their version of angularjs.
what you can do is.
if (typeof angular === 'undefined') {
document.write('<script type="text/javascript" src=""angular.min.js""></script>');
}
this way angular would be loaded only if its not defined already...