Loading Angular View - javascript

Whenever we load .html files serving some controller in angular.
Does angular makes an ajax call to retrive that html.
Like this piecec of code.
.state('home', {
url: '/',
templateUrl: '/Modules/Signin/signin.html',
controller: 'SigninCtrl'
})
I mean to ask while fetching signin.html
Is an ajax call made?
Or are they loaded as normal resources?
If an ajax call is made where can i find some documentation written about it.

When your that code executes, Angular first lookup the HTML template in $templateCache with the id /Modules/Signin/signin.html.
If it doesn't find that in the $templateCache then yes, Angular will do an AJAX call using $http to get the HTML content and it will be loaded as normal resource which should be located at the URL like:
http://example.com/Modules/Signin/signin.html
You can verify it in your browser's developer's console that an AJAX call was performed.
Read more about $templateCache.
Basically, every template get's stored in the $templateCache when it is not stored already in the cache. So if you define the following in your index.html or any place (like where your angular is installed):
<script type="text/ng-template" id="/Modules/Signin/signin.html">
<p>This is the content of the template</p>
</script>
Now as your Angular bootstraps, there will be a data in your $templateCache with id /Modules/Signin/signin.html so now your state code will not make any AJAX instead it will simply load the content defined above.

I think a call is made, when I look into my own project. You have in the inspect element
the network tab, as you reload you can see that every html part is loaded separately

In ui-router at least (assuming the view is not in the templateCache) view HTML files are retrieved with a GET to the URL of the file, rather than with an AJAX call to an endpoint. In your case, it'll be a GET to <your root URL>/Modules/Signin/signin.html - you can see this in your browser's development tools.

Related

Angularjs: Does all code (html, js) loads initially or it happens based on request

Confused about when Angularjs application is bootstrapped, then all of the code js files(controllers, services, etc) and html(templates for controllers) are loaded initially before rendering any page or it is loaded based on request like lazy loading.
According to me all javascript code gets loaded and templates are rendered based on request. Please correct me. And also clear if answer for this changes if routing is implemented or not.
In an Angular 1 app, all JavaScript is loaded immediately. Code in functions which is not called immediately is run later on. But still all code is parsed immediately.
Controller code is executed asynchronously when its DOM is activated on the page. For instance via ng-if (not ng-show). Same applies to link callbacks. Here is a detailled description of the execution order:
Practical Guide to PreLink, PostLink and Controller Methods of Angular Directives
The DOM is changed asynchronously and dynamically.

need understanding for Angular routing's when method

Hi All I am new to angularJs , I am finding it hard to understand the routing concept, I learnt from many sources , but still it's not quite clear specially the when method. What i understood is routing helps us to achieve single page application , which means browser loads only one .html file and then other contents are removed or added based on user's interaction, no other file gets loaded. But in the following definition from the link angular routing
templateUrl: When the HTML to be displayed is complex and large, it’s better to break them into separate templates/files, and give the URL to the HTML file as the templateUrl. AngularJS loads the HTML file from the server when it needs to display the particular route.
It says angularjs loads the HTML file as the templateUrl. Could someone please explain this to me ?
1.The templateUrl property tells which HTML template AngularJS should load and display inside the div with the ngView directive.
2.It can be path (or) function and .when() method takes a path and a route as parameters.
3.It can be use as function with returning generated URL. We can manipulate url with passing argument which takes route.
.when('/:screenName/getAll',{
templateUrl: function(route){
return route.screenName +'/getAllList'
}
})
So, it is not like reloading the whole html page.Only the html content is loaded inside the div.. Hopes this help.!!!
For example:
//main.js
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});
//./views/computers.html
<ul>
<li>Computer 1</li>
<li>Computer 2</li>
</ul>
When the route is http://example.com/#/computers, AngularJs will loads the ./views/computers.html file by ajax, and cache it for the others requests. So, it's not only one (the main) html file that will load in your SPA.
Angular loads the html file as the template url means that it use the path you provide to load the html. This would be more organized compared to writing the html in angular components.
Single page app does not means angular loads just only one file. When users interacts, routing may be executed, more data will be loaded, and more html or some portions of html will be loaded combined with data to render to users.
The "when" method means that when users visit a defined route, things followed will be proceed, including the "templateUrl".

XDK redirect to template file won't work correctly

I am trying to redirect to a template file after an Ajax call using:
window.location.href = "templates/somepage.html";
It goes to the page, however, on that page, the buttons won't load properly and the JavaScript won't get called when I click the buttons. I probably need some sort of callback because index.html needs to get called as well as templates/somepage.html.
NB: We are using the Ionic framework but I am not experienced with it, as I am a php developer. Also, I would prefer a non-jquery solution. Thanks.
The reason nothing works or displays correctly because the file you are redirecting to is missing all the core include (the CSS and JavaScript) files as can be seen below:
about.html
This is a base Ionic template file and as you can see it has no <script></script> or <link> tags.
<ion-view title="About" id="page9">
<ion-content overflow-scroll="true" padding="true" class="has-header">
</ion-content>
</ion-view>
Thus none of your CSS or JavaScript is working correctly.
Ionic is built on top of AngularJS so you can use the the state changer instead of directly accessing or redirecting to a template file as you are doing.
What you have to do is inject the $state in to your controller as can be seen in the example below:
routes.js
You should be already familiar with all of this, but you'll be referring to the state using myView.
[...].state('myView', {
url: '/my-url',
templateUrl: 'my/template/location.html',
controller: 'myViewCtrl'
});
controllers.js
In your controller, you'll inject the $state which will be used to change the view.
[...].controller('myCtrl', function ($state) {
/** This will be used to change to the route that we created above. **/
$state.go('myView');
});
I struggled with this too when I first started using Ionic and I stumbled across the solution and thought I'd help out.
Reading Material
Activating a State
$state.go() Reference

How to render or go to a page loaded via an angular $http.get call?

I have an authentication provider injected into my angular app such that all $http calls get the proper auth headers set on them.
I'd like to have a link or a button that loads an entirely different page than the app, but also utilizes the authentication headers that are automatically set in $http.get, etc. Unfortunately, straight link doesn't get the headers set from angular automatically.
If I call $http.get("/some/url/that/needs/auth.html"), the response contains the actual html, but I don't know how to render it. (I've only ever used this to get json data to render in the angular app, no idea if it can be used to render a page).
What would be the best way to do this?
edit: I don't want to render partials/templates. I want to load an entire page starting with <html>...
You can use $sce and ng-bind-html to render a HTML string in your view.
You can use
$scope.html = "<h1>Hello</h1>";
and
<div ng-bind-html-unsafe="html"></div>
For Angular 1.x, use ng-bind-html in the HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that.
$sce
Use $sce.trustAsHtml() in the controller to convert the html string.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngSanitize
There are 2 steps:
include the angular-sanitize.min.js resource, i.e.:
<script src="lib/angular/angular-sanitize.min.js"></script>
In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

render / call .aspx page html into another .aspx page

in my application, i have implemented ajax 4.0 client templates
currently my templates resides on same .aspx page. (say Main.aspx)
but i want to externalize them.(ie all the HTML would go on another page)
for that i have used $.get() like
$.get("/Module/getTemp/" + TemplateName, function(result) {...
now, i want getTemp function in Module to return the HTML (ie whatever that page contains) of the page having same name as Parameter 'TemplateName' has
into Main.aspx page (use c# in controller)
its like.. copy what other .aspx page contains and return it in calling (above)function from Main.aspx page
pls help
Have you tried using a partial view to return the html? You can setup a "templates" controller that serves up these templates. You can then have action methods for various templates. You would then be able to use routes like "/Templates/TemplateName" to fetch the html in your $.get call. If the template is only going to change once per page load, then I would be tempted to push parameters to my action method to be used in a view model.

Categories

Resources