I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache
Related
I want to create generic feature that allows me to change background image of any section. After going through options provided I found these two approaches. Want to choose best approach to change image because on single page I want multiple times change background facility. It will be available to four to five sections.
Approach
Using Directive check this stack overflow link.
Also there is another approach of angular scope variables that we can updates at runtime.
<div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div>
Required Usage ( With respect of Directive )
<body>
<section backgroundImage url="{{backgroundImageUrl1}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl2}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl3}}">
...
</section>
<section backgroundImage url="{{backgroundImageUrl4}}">
...
</section>
</body>
As shown above I am going to update background-image attribute for each section. If these property is set inside CSS file, it will reduce time to load images i.e. If we directly add inline css styling in HTML, all images will loaded on DOM load. It will make extra request to server to get images and load them in DOM. I wanted to follow strategy that will reduce loading time in my SPA(Single Page Application).
I think going with <div ng-style="{'background-image': 'url(/images/' + backgroundImageUrl + ')'}"></div> should be more effective.
You dont introduce another layer of complexity, directives create scopes, which are watched and digested, also directives must be compiled in the begining.
Using symple ng-style together with some specific url from controllers property shoudl only do request for that particular active image. Because of that i think it should be the optimal solution.
Situation
I started an app with Playframework (Scala) and AngularJS v1.3.
(Exactly the template Play Silhouette Angular Seed)
Goal
Loading difference templates using ng-include or a directive.
Problem
Always that I put a reference in Angular code, it doesn't work.
Example:
<div ng-include="'/tpl.html'"></div>
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
Result: works!!
Now, if I put the template tpl.html in a file in the same directory:
<div ng-include="'tpl.html'"></div>
Result: Doesn't work!! (And in other directories, I tried all the possible routes...)
The same problem occurs in directives, if I put the template inside the directory it works well, but if I try to put in another file it doesn't work.
Question
I used Angular in other projects and never occurs something like this. I think that this happens because Scala (language of Playframework) needs to be compiled and the files .scala.html are converted in .html.
How can I create some templates .html and then with ng-include
put the correct reference?
The root directory is the same that index.htmlfile (path: ui/app).
If the file view1.html is in the path ui/app, the ng-include will be like this:
<div ng-include="'./view1.html'"></div>
Because ui/app is the root path.
I'm using Angular JS and Angular IU-Router in my project and using a lot of ui-views. I have a situation where I need to change the language of the site, therefore I need to swap my ui-view's model to another model with the relevant language. I already have a service that detects the relevant model and passes it into the ui-view's controller. So if I can reload the ui-view, then in theory my problem would be solved.
I recall reading something about automatically reloading a ui-view (or possibly an ng-view) and re-instantiating its controller, but after much searching I haven't been able to find that information again.
Does anyone know what it is I'm looking for?
1 Take a look at angular-translate
https://github.com/PascalPrecht/angular-translate
2 In your case, add some if-else control ( ng-if, ng-switch etc. ) in the outer div, use the same subview in the inner div. Then change the settings.currentLang when the language changes may cause the subview reload (not tested).
<div ng-controller="containerCtrl">
<div ng-if="settings.currentLang=='en'">
<div ui-view='subview'></div>
</div>
<div ng-if="settings.currentLang=='ja'">
<div ui-view='subview'></div>
</div>
</div>
I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.
Say I have this 3 anchor tags
<li>View1</li>
<li>View2</li>
<li>View3</li>
Before
<div data-ng-include="" data-ng-src="default.html"></div>
Now when I click #/view1
//the ng-src of the html will change depending on the link clicked
<div data-ng-include="" data-ng-src="view1.html"></div>
Perhaps you are trying to do something as below:
HTML:
<!-- Dont use # in the hrefs to stop the template from reloading -->
<li>View1</li>
<li>View2</li>
<li>View3</li>
<div data-ng-include="selectedTemplate.path"></div>
JS:
$scope.selectedTemplate = {
"path":"view1.html"
};
ng-view is the main view of any Angular app, and is affected by the route changes. So all you anchor tags will only affect the ng-view template.
To load other partial views based on the main ng-view, ng-include is the correct way to go as you have mentioned already.
To load a view based on the main view (view shown in ng-view), you need to write mapping logic which depending upon the main view should load other partials (ng-include elements for page).
So your partial becomes like
<div data-ng-include='templateNameVariable'></div>
This variable has to be set whenever the ng-view changes on location change.
You can watch for $route $routeChangeSuccess event and change the templateNameVariable based on the active route (hence the view).
So there should a controller out side the ng-view directive which will orchestrate this, and you would do
$scope.$on('$routeChangeSuccess',function(event,current,previous) {
//Change the templateNameVariable to point to correct template here, based on current route.
});
I'm new to AngularJS, coming from a PHP background where I do all the template aggregation on the server. With PHP I would grab several templates, mash them together, then send it to the clients browser. AngularJS allows me to insert a template using ng-view. This is great, but it doesn't handle the case where the template that I insert may include tags that are placeholders for other templates. For example, I may have the following as one of my templates:
<div class="some_class">
<div class="another_class">
{content}
</div>
</div>
In PHP I would insert this template, then replace the contents of {content} with another template. In AngularJS I know how to insert the main template (using ng-view), but I'm not sure how to dynamically load my "partial template" into the {content} tag. How is this suppose to be done with AngularJS?
A straightforward approach would be to use the ngInclude directive:
<div class="some_class">
<div class="another_class">
<ng-include src="templatePath"></ng-include>
</div>
</div>
Then, in Controller that is associated with this template you can define the templatePath variable dynamically:
function MyCtrl($scope){
$scope.templatePath = // define this var dynamically here
}
Using ng-view to nest multiple templates is not currently supported natively in Angular.js. There are, however, multiple options to emulate that functionality. See the answers in this SO question for several of those options, including the ui-router suggested by akonsu.