I'm trying to add some data structures (linkedList, Graph) implemented in pure js and use them in a Service.
I'm sure there is a better way than statically include libraries in your html page and attach them to the window object.
what's is the most clean way to 'inject' pure code in a Service?
Related
In my angular application, back-end users can create custom templates. Those custom templates need to be loaded in the angular application at specific positions. I have a custom directive which gets templates
( based on the routes) from the CMS and inject it to my angular application. If I put it into the innerHTML the components will not get rendered correctly. I need componentFactoryResolver and compiler to properly show the components.
The above solution does not work with AOT compilation. Is there any other way I can achieve the same and make use of AOT? Is server side rendering is only solution to this?
Angular doesn't encourage using Compiler to create dynamic template.
Could/would/will code using COMPILER_PROVIDERS be supported by AOT?
But maybe in future it will be possible with without shipping the compiler because new View Engine open new capabilities.
Properties
the generated code relies on very few internals.
we can make the API public and stable
users could ship the generated factory files on npm
this makes calls to ngc in applications faster as it does not need
to compile the code of libraries like Ionic any more.
users could implement their own ViewEngine
this way we can drop the Renderer abstraction, as we already have an indirection via the ViewEngine
users could create templates programmatically during runtime
without shipping the compiler
eg for a dynamic form / ....
we might want to provide a builder for this that calculates indices correctly and can already be used in tests
we could create a new kind of directive that transforms a ViewDefinition, e.g. wraps elements into new ones, ... (similar to the compile in Angular 1).
needs some helpers that maps indices from new to original indices
Read more in Design Doc for View Engine
What I am trying to do is my own angular directive. In this angular directive I would need a third party library.
Just to put an example I want to create a directive for tag clouds with d3.
In that case I have d3 accessible via d3 and then I would need to require the library d3.layout.cloud.js
I don't want to put my app plenty of scripts in the index so my questions is how to achieve that?
I mean, what is the correct way to inject a library only in a directive or at least just to load it only when I needed it
rather than loading it from the beginning?
Thanks
You need to get the script dynamically - that is when your directive is executed. The most basic way to do it is using pure JS.
var js_script = document.createElement('script');
js_script.type = "text/javascript";
js_script.src = "http://www.example.com/script.js";
document.getElementsByTagName('head')[0].appendChild(js_script);
Also you can use JQuery getScript.
If you need to go pure Angular, use $http to get the script and new Function to execute it.
Note
Please note that you can only inject an angular dependency in to an angular module. What you are talking about here is loading the script needed by the directive only when it is needed. You can't call that dependency injection. It is lazy loading.
To use a library, provide a src path of that library in base.html. After it, the library is going to be available throughout the application and you can use that library directly, without injecting or referencing it from anywhere
e.g.
To use lodash.js library, provide srcpath of library inside main.html.
In directive, controller and services function, use lodash directly using _(underscore) variable provided by lodash library.
You should create a module, inject the 3rd party library module into the module and then create your custom directive in that same module, and you will be able to access the 3rd party library from your directive just by injecting the 3rd party library (provider, service, etc) directly into the directive.
Regarding the part of not loading everything at the beginning, you might be interested in lazy loading.
We are creating a single page app with Angular routing.
The problem is that the Javascript with the controller(s) need to be referenced.
I want the js file to be downloaded dynamically on demand.
Is it mandatory to use a system like RequireJS ? Is there an alternative ?
AngularJS is just a wrapper over pure JS to make a system that's defined in its documentation (MVC, two-way binding, directive and so on). So, you can download the JS and bind the controller defined in the file to the angular app (ng-app). You don't need to use RequireJS to load the file, rather you can use pure JS to do the work.
Most people use requirejs but you can do it in pure JS.
stackoverflow.com/questions/7718935/load-scripts-asynchronously
I'm trying to manage the bootstrap process of a large AngularJS/Grails application. Here's what I've come up with, but I'm not so sure it's as clean as it could be, or as efficient. Thoughts?
Load angular-loader in a one-line minified /script
Load jquery explicity in another /script
Load a third-party async loader ($script) and all of the remaining dependencies
When the dependencies have loaded, call angular.bootstrap(document, ['myApp]);
Load my minified, concatenated app-specific javascript in another /script
This seems clunky. What alternatives might there be? I did consider RequireJS, but I don't like how intrusive it is, and I like using a grunt task to concat+uglify my app into a single script.
The general approach that I use is to load the basic components upfront and only load the controller and associated services on demand using RequireJS. Obviously, this is only applicable if you are dealing with large application.
As AngularJS does not natively support on-demand loading and delegate such task to async loader such as RequireJS, I encapsulated the logic need in something I call angularAMD.
Here is a sample site I created to illustrate how angularAMD works:
http://marcoslin.github.io/angularAMD/
So I have a project that I am working on and it requires that I use jsPlumb for graphical elements connections and I am building my app entirely using AngularJS.
What is the procedure to follow if I want to include another library's code into my controller (to fire up some jsPlumb code, say on ng-click) or any other part of my AngularJS code? Should I do that or why should I not do that?
Take a look at this well-commented jsPlumb/angularJs integration example:
https://github.com/mrquincle/jsplumb-example
I don't see an easy way to establish two way data binding between Angular and jsPlumb.
What I ended up doing on my project is creating a custom Angular service which serves as a bridge between controllers and jsPlumb. Such service contains methods specific to application, such as:
removeElementFromFlow
addElement
getElements
getConnections
isElementConnected
etc.
It allows to keep all jsPlumb plumbing code outside of controllers, keeping them clean.
JSPlumb has put out a tutorial on how to use JSPlumb with Angular:
https://jsplumbtoolkit.com/docs/toolkit/demo-angular.html