I need to represent an image in time when it's needed without a spinner once controller is initialized.
I've found that Angular can cache templates by using $templateCache.
Can I use it in order to preload images when template has <img> tags and another question can it be used for DOM elements which were styled by CSS e.g.:
<div style="background-image:url(name.jpg)"></div>
Thx in advance.
Unless you render it directly through Angular, then, no. Angular only uses $templateCache for directive templates by default. If you wanted to do that you'd need to write your own directive that would look at $templateCache for those assets. That would involve writing your own img directly.
As for CSS, that's a definite no unless you parsed the CSS at runtime with Angular.
Angular does not intercept HTTP calls from outside of its framework.
Related
I'm trying to minimize js/css/html footrpint for the user and to load only the files really needed. I've utilized RequireJS for that.
For my templates I'm trying to implement someting similar to
using section in C# or ///< reference path='...' > in TypeScript
But somehow depending on my template content it does or doesn't instantiate depends-on directive depending on template I have:
Works:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
Doesn't work:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
<other-directive></other-directive>
Doesn't work:
<div>
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
</div>
I'm obviously missing the way Angular parses and processes templates.
Is there a way to achieve what I'm trying to do?
OK, the problem was that it didn't wait until all directive template depends on are loaded. To ensure dependencies are loaded, dependent code should be in callback passed to require function.
Quick Summary:
I need to allow two script files to handle different operations for the same angular app. One needs to initialize the app, the other needs to assign a templateCache object to a piece of JSON in localStorage.
Context:
I have several python files which compile/generate html and I have constructed an angular app with this emitted html for my site (which uses CGIs).
The basic construct of the site comes pieces of HTML, which fit together like so:
|------------Header---------------|
|-Navigation-|------Content-------|
|-Navigation-|------Content-------|
|-Navigation-|------Content-------|
|------------Footer---------------|
My Header creates the <head> tag, instantiates my ng-app and uses $templateCache to set up a template that I call from my Navigation code. I had to go with templateCache instead of ngView and ngRoute due to some limitations with how the CGIs emit the html, and the order in which this happens.
My "Navigation" python/html sets up my app with JS like so:
<script>
var responsiveCatalog = angular.module('responsiveCatalog', ['ngStorage']);
....controllers...
....config, etc....
</script>
This Navigation also includes my default templateCache object:
<div ng-include=" 'responsiveItems.html' "></div>
This is all working to show my first templateCache object in the Content section. However, I need to grab many pieces of information from the python generator for the "Content" section (a totally separate file from the "Navigation"), store this data as JSON in localstorage (hence the inclusion of the ngStorage module), and call that as my second templateCache option.
I am not actually sure that I can use two separate instances of Javascript to reference and influence the same Angular app. I know this seems like bad practice, but I am trying to prevent the need to tear down a huge piece of legacy architecture to influence the angular app from two Javascript files in harmony.
Thanks in advance.
You can do
angular.module('myAppName').controllers.... in different files, just make sure the myAppName the same. Bug I don't feel like it work with config, no time to test. If you need any communication between them, check $emit and $broadcast.
I'm writing an Angular directive that needs a template. Loading a template in Angular is done by either embedding the template itself in the source code with <script type="text/ng-template"> or by providing a url in the directive's configuration, like templateUrl: "/path/to/template.html".
The first way is completely unacceptable for a 3rd party directive, because people won't npm install my directive and then do include("node_modules/mydirective/template.html")(or equivalent), it just feels dirty.
The second way won't work for the same reason. The template would be located inside the node_modules directory, which is not publicly accesible after packing/deploying a website.
My idea is to allow the developer to just include the template the same way the directive itself is included:
<script type="text/javascript" src="/path/to/directive.js"></script>
<script type="text/ng-template" src="/path/to/directive.html"></script>
The problem is that the second line won't work (browser will complain about unexpected characters, I assume because it still tries to parse the fetched content as JS.
I found that using ng-include instead of script src actually fetches the template. The problem with that is that by the time the template is fetched, my directive has already ran the link function and crashed (because it couldn't find the template).
Is there a way I can either delay my directive until the template is fetched or provide any sane way of loading the template?
What about inline templating with just template, instead of templateUrl? If its a library, I feel it's the simplest way to bundle the directive and template for distribution
One way to delay evaluation of your directive is to write a wrapping directive that does the request for the template, then $compile and append the initial directive to the page in the request callback. Still, not so pretty.
We have a product that is a widget people load onto their site, which consists of a single JS file that also needs angular to run, so angular is bundled into the JS file.
However, if a site already is using and loading angular themselves, when they load our widget they get an error which kills everything with the following:
WARNING: Tried to load angular more than once
Which makes complete sense since angular was indeed loaded more than once.
What we'd like to do is either of the following:
In our script, rename / namespace angular so it does't conflict with
the host sites already loaded angular, or
Detect if angular is
already loaded, and if so don't load angular ourselves.
To show examples of our code would be difficult since it's spread over about 20 files etc, however it's based off the following angular seed project which uses requirejs to load everything, then we're compiling to a single file: https://github.com/tnajdek/angular-requirejs-seed
Would really appreciate any feedback / tips / solutions
NB This is not a duplicate of any "check if angular loaded correctly" type questions, angular is packaged inside our widget js, the issue comes when angular is also already loaded by the parent page. We need a way to rename angular inside our package.
I'd advise taking a look at this answer, it has to do with a chrome extension running in the same circumstance. The idea here is to separate your loading of angular from the website's, and it assumes that your widget will be loaded after the main content of the page has been loaded.
If you are loading in html content with an ng-app directive or ng-controller, wrap your html content in a container with ng-non-bindable as an attribute.
Angular looks immediately for an element with the ng-app attribute when you load in angular.js. If two ng-apps are present i.e., on your site, and the widget, it will cause errors. Defer the parsing with: window.name = "NG_DEFER_BOOTSTRAP!" + window.name; Then load in your script.
Once your script has loaded, set window.name to '' or whatever it was before.
Individually bootstrap (the term for angular finding an ng-app attribute) your html content using:
var appRoot = document.querySelector('#id');
angular.bootstrap(appRoot, ['angularModuleName']);
And that should do it... Caveat, I have no idea how this would work if your widget Angular is on a different version than the client website, and I've only made it work with extensions, which are a little bit different because they live in their own isolated 'worlds'.
That being said, I feel like this should get people going in the right direction when dealing with this problem.
When you have a GSP and then say you try to render a template into some part of it, if the template is sophisticated enough that it has to have its own CSS and JS, where is the best place to put the template's css and js? I currently have it inline with the template's markup in the same file such as but I feel it belongs with the parent GSP's css and js like maybe in the same files? Suggestions?
So right now the parent GSP looks like this.
<head>
reference to external file which has the parent GSP's css
inline JS
</head>
<body>
...
</body>
and the template which I render later into that GSP looks like this:
inline CSS
inline JS
inline markup
I know this isn't the cleanest, best strategy therefore I seek input as to what is. Thanks.
The answer is "It depends". It depends on how you are using the template.
More specifically are you reusing the template? If so, then it makes more sense to put the required CSS and JS within the template itself so it's self contained and reusable in such a manner.
If you are simply using the template for partial rendering then, and only within a specific parent GSP then it makes more sense to include the CSS and JS within the parent GSP and not the template.
The best way to handle this kind of scenario are using plugins like Grails Resource plugin or Grails Asset Pipeline Plugin, both of them provide ways to keep organisation in yours resources (css, JavaScript) files
For example using grails resource plugin you could create a module that include specific view resource and template resource as a dependency all this possible using this plugin and keep it clean.
You can find useful information about resource plugin in this Marc Palmer Post
About asset pipline plugin in this Bobby Warner Post
I hope this help