I have a index.html page with page-header, navigation-bar, page-body sections (DIVs).
I use angular routing for change the content of the page-body section.
Now what I want to implement is to change the the content of the navigation-bar and page-body at same time, from a controller.
My scenario is:
Login content is displayed in the page-body section. After the successful login request I want to switch two contents somehow at same time:
the menu which locates between the navigation-bar div element
the application body content, locates in page-body div element
If you are using ng-route, you should take a look at UI Router. It allows you to define multiple views in your page.
Related
I am trying to work out how some code is working, it uses angular throughout the front end.
When the page first loads a div with ng-include should be in the dom but its src url is a call to a js function that returns undefined on page load.
<div id="test_div" ng-include="getUrl()"></div>
When I check the dom the entire element is not on the page. After a search button is pressed some other calls happen and the call to getUrl() will return a valid url from that point on, which returns html content from the server.
It is only then that the div appears in the dom and it now has a class added to it of class="ng-scope".
I dont understand how this is happening, does ng-include continue to request a resource until it is avilable?
I couldnt find this information in the documentation.
Is it possible for AngularJS to change your page without changing your location path/url?
Like for instance I have a table page that has the path/url <host>/<app>/table and when I click on the entry in the table, it goes to an element detail page but the path/url stays the same (since this operation is confined anyway to the /table path) ?
you can always use ng-include to load a template on a specific part of your page.
that would change the content of that part without changing the url of the page.
I'm using Angular UI router in my app. This is what I'm doing.
A main view contains a child view and a div container for "pagination"
By default, initially, a first set of contents is loaded
When a user clicks on "next page", next set of contents is loaded (with the URL also being changed to /content/2 (where 2 indicates the next page number)
All is working well, but each time the contents are loaded, it goes "blank" before it loads. So it seems like it's reloading the view (which is obvious).
What I would like to do is reload the content without having that "blank" page. How can I achieve this?
At first thought, I think you could you the same approach as infinite-scroll, which is what I'm using. So you make a GET request to the server to get new content and push it to the list on clicking 'next'. However, since the URL changes also. This will cause the controller to be reloaded. You can actually bypass this by setting reloadOnSearch to false.
I have an unusual question.
I have this old page that I want to convert to angular.js.
http://transience.me/TD/
I have 5 pages worth of html loaded on one page and the only visible portion is the part that has been navigated to. i.e. home is at x position 0, about is at x position, 1024, projects is at x position 2048, etc...
Right now though there's no way to link to the individual sections. You have to land at the home and then navigate to the section you want to visit.
However I want to add a deep linked url: url/#/home, url/#/project, etc.. to correspond with the navigation which triggers a change in page position.
Is there a way to link the router in angularjs to a directive so that instead of loading an html template it triggers a new dom behavior?
Thanks for any help!
I think ui-router would help you greatly.
It uses a $stateProvider which allows you to change the url without reloading the entire template. You can add transition effects and to move between pages and it will keep all back buttons, page refreshes, etc.
Check out the ui-router demo
I'm currently working on a single-page scrollable website (5 pages displaying as a single page) using CakePHP. I have worked on each controller action and everything runs well. I have one layout for the entire app and a view for each action. My challenge is finding a way to load the view of each action without reloading the page inside the layout. Should I just put all the view content inside the layout (without echoing $content_for_layout) or could there be a better way to do it?
Considering the div you want to update has the id #content:
$.ajax({
url:"http://yourdomain.com/controller/action",
context:document.body,
dataType:"html",
data:{id:123}, // in case you need to pass some params
success:function(data){
$("#content").html(data);
}
})
The action must return the HTML you want to display inside that div. If you want to have each pags loaded in different div's, you will have to create one div for each page and call AJAX for each one.
When the page is loaded for the first time, you can just pull the data for whatever default action you defined. Then, when you want to change the content, just call AJAX.