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".
Related
Many web frameworks such as AngularJS support "routing" whereby the user can visit the website, and have a template displayed to them based on their request URL. But these frameworks are entirely frontend JS, just simply a 'script src' import, so how does it manage to capture all requests to the website, and then redirect to a js file for processing, etc.
Any response is appreciated, since I have been trying to work out how exactly these frameworks execute the 'capturing' part of routing for some time, but with no luck.
Let me give you a simple model for it.
We can grab the current URL. We can then break that string and we can get different parts separated by '/' Based on which we can put condition which page and what data to show. And when we have decided that we can load our desired page using ajax.
For example my current url is https://www.example.com/module I can get "module" out of this url and then I can load inside the body of my page
$('body').load('module.html');
The following code is from my current work. See how different urls are captured and routed to my specified document. I also get the data from url to use into my ajax requests etc.
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : "home.html"
}).when("/logout", {
templateUrl : "logout.html"
}).when("/course/:id", {
templateUrl : "course.html"
}).when("/course/:courseId/assignment/:assignmentId", {
templateUrl : "assignment.html"
});
});
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
Is there a way to view (through the local url) partial html templates while incorporating the main index.html?
I am trying to quickly access my partial html templates on my local so I can view them without having to copy and paste them into the main html.
I know how to do this with a framework such as swig and Angular... but I was hoping there would be a way to access them through the url while incorporating the index.html at the same time (such as adding #include)...
example of what I was hoping would work:
http://localhost:8000/#include/partials/feature.html
Right now I can go to:
http://localhost:8000/partials/feature.html
But the css and js are not being pulled into the view (which are defined in index.html
Yes, I think u want something like this-
https://docs.angularjs.org/guide/templates
I currently am working on a Django project that allows a user to upload a file (i.e. a .dat, .json, or .tar.gz), which then gets converted into the appropriate database objects with their various relations. The file can be uploaded either by using the interface on the web browser or via curl to the appropriate REST API endpoint. The site is currently a single-page sort of site that utilizes Bootstrap.js. The URL in the browser does not change whether the user is on the home page (which displays the most recent uploads) or clicks on one of the "blackboxes" uploaded ("blackbox" being the primary database object formed from the uploaded file). Clicking on a blackbox takes the user to a page of the list of "datapoints" that are inside the blackbox.
What I now need is for each blackbox page to have its own URL that can be returned in a response when a user or script uses curl to upload a blackbox. This is the pattern I was thinking of using in the URLconf:
r'^bb/(?P<bb_id>[0-9]+)/$'
where bb is short for "blackbox". How can I systematically make each blackbox page have its own URL following this pattern, when right now each blackbox page and the home page all have the same root URL (in development, localhost:8000)?
I have made some attempts (most likely very misguided) at something like this. One thing I tried was making a separate template for a blackbox page, using the extends template tag. The frontend Javascript has a function display_points that takes in a blackbox id and renders the list of datapoints, so I tried various hacky ways to call that function (which was in a file home.html) from within the blackbox page template, but nothing was successful. One thing that I hoped would work was using jQuery $.getScript for something like this:
$.getScript('blackboxes.js', function() { //blackboxes.js is the Javascript from home.html that I copied and pasted--hacky, I know
display_points({{ bb_id }});
})
but I keep getting 404 errors from trying to use $.getScript like this despite trying different paths for the Javascript file.
Also, just in case this is an important detail for this question, the front end utilizes Clusterize.js to help load the datapoints, since the blackboxes usually have at least several thousand datapoints.
One of the key things to making something like this work was the use of the right template tags in our home.html which we renamed to base.html to be more descriptive of what the template is for. urls.py was also modified so that two different URL patterns would map to the same base view in views.py; the two patterns were a "blank" pattern (i.e. r'^$') for the default home page and a pattern to view a particular blackbox (r'^blackbox/(?P<bb_id>[0-9]+)/$'). Different views would be rendered based on whether a bb_id (blackbox id) was in the URL pattern. If none, the default home view of the recent uploads would be rendered; otherwise, the datapoints of that particular bb_id would be rendered instead. In the base.html template, the if template tag was used to see if a bb_id existed; if so, the JavaScript function display_bb would be called, which takes in the bb_id to know which datapoints to display. Otherwise, the function display_10_recent_blackboxes would be called instead.
Another issue was sending a response that contained info that could be used to find and view the blackbox that was just uploaded. Originally, the main database insertion function insertBlackboxIntoDatabase would create the Blackbox model instance first and then fill it with datapoints created from the file uploaded. However, since the response is sent before that function is called, it was necessary to refactor the upload and insertion code such that the blackbox instance would be created first so that its ID could be part of the response. The ID would then be passed to the different upload functions (based on the filetype) that each end up calling insertBlackboxIntoDatabase, which now locates the Blackbox instance based on the ID passed to it and then proceeds to create and insert the datapoints.
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.