In an angular js 1.2.22 version code, I saw this in the HTML
<div class="mainContent" ng-include="content"> </div>
and in its corresponding controller, I see this.
$scope.content = 'templates/contents/home.html';
I see its making an Ajax call to load the template.
I am working on improving the speed of the content display and I did some optimizations like minifying the javascript code and minifying css
My doubt is how to make this inline - without making the Ajax call. So, that I could check if there is visible difference in speed of the content showing up for this template?
I tried the gulp-angular-templatecache to cache templates but, it did not work.
Is there any workaround for this so that I can make this template inline ?
What you're looking for is Angular's $templateCache.
Depending on your task runner, you might want to give gulp-angular-templatecache or grunt-angular-templatecache a try.
Related
I am currently trying to build a website using a header.html template included in an index.html file.
I currently have the template working. I had been using jQuery Rotate (http://jqueryrotate.com/) to make the logo flip upside down on a mouseover.
Since Angular won't allow <script> tags in templates for security reasons I was wondering what the standard practice is to replicate script behaviors. I can still use ng-mouseover and ng-mouseleave. Is there a convenient way to call the jQuery Rotate functions from my controller?
Forgive me for my lack of MVC knowledge - still in the process of teaching myself.
Basically started a new job which they primarily use MVC, learning curve is steep. Iv'e been tasked with calling a Javascript file when required in a nested partial view, Whilst I'm comfortable with the former, I seem to be having trouble with loading the script. I've tried sections which didn't work to well and I believe cannot be done.
So I have:
Index.cshtml > Loads in AddressList.cshtml > which loads in Address.cshtml
When the address.chtml partial view has been loaded, I'd like to load the js file.
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>
This is very trivial to some but never the less cannot seem to get it to work.
The task at hand is part of a much larger feature which I've built and works great when loading the js file in the main layout view. Circumstances have changed and now the js file needs to be moved.
Any help greatly appreciated.
Javascript and PartialViews don't work well together, since you can use your PartialView multiple times and, if you add your PartialView twice, the script will also be.
One way to get around is moving your script section to your main view, which calls your PartialView later in the process.
Or, if you don't mind on using third party frameworks, there is ForLoop HtmlHelper which allows you to use javascript inside a PartialView and control the scripts to be added correctly.
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.