I am developing an app, and in the app, there are some "utility" buttons that when clicked will, say, show the user some information.
For example, a question-mark button, that when clicked, shows the user some "quick tips".
The app is heavily data-driven, so I wanted to avoid having extra hidden elements that just show based on a flag whenever the user clicks a button.
So, I have a div element with an ng-view tag that will populate with quick-tips.html whenever the user clicks the question-mark button.
The routing code looks like this:
whiteboard.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/quick-tips', {
templateUrl: 'templates/quick-tips.html',
controller: mainController
});
}]);
Here's a shortened version of my HTML:
<!-- bootstrap question mark glyphicon -->
<div ng-view></div>
<!-- a bunch of other HTML markup (this refreshes for some reason when the route is called and the view is updated) -->
My issue is that when the link is clicked, the entire page refreshes, and then populates the view. It breaks the user-experience, I think. Is this supposed to happen? If so, is there a way to avoid it?
I looked into using $routeProvider resolve, but it didn't look like that would fix the issue. Any thoughts?
Here's the answer to my own question, in case anyone else has this issue.
I was using a base tag in my HTML:
<base href="<!-- etc. -->">
This caused the page to reload every time when using routes.
Related
What I'm working on an AngularJS website. A colleague has suggested that the downside to the dynamic solution is that whether you open a button in a new tab (for example an "About Us" tab), it takes you back to the first page and refreshes it. I'm using the ng-show directive like:
<div class="container marketing show-hide" ng-show="tab === 2">
to create dynamic pages. I want to achieve this:
Someone tries to click the "About Us" button to open it in a new tab. Instead of taking him to the frontpage in the new tab, it changes the ng-init value to 2, 3, or whatever is the value of the button clicked, so that upon opening it in a new tab, it defaults to the content assigned to the number, and not the first page, which is defined by ng-init="tab = 1"
OR
Instead of opening it a new tab, it somehow hijacks the request and just changes the ng value to the corresponding value, opening the element without opening a new tab.
Here is the website, if you are interested:
www.kreo-it.pl
The point of interest are the buttons in the top navbar. Bear in mind, it's a work in progress.
You may be able to take advantage of $routeParams, something like /:tabId and then in your logic for that view you would show whatever is related to that tabId.
So for example in your controller you can bring in $routeParams and assign a value to $scope.tab = $routeParams.tabId and then your ng-show would pick up that value from the url that the user is currently at.
However, this does seem like a good use case for implementing a router with a /about route and so on for the various information that you are trying to display. Or are you not using a router currently?
I'm working on an angular 2 application, to keep the explication short, I have a navbar on the left, and on the rest of the page, and I will display my content.
Those content will be blocks, as in the attached image, the navbar contains 4 actions (Form, test1, details ...)
The content in the middle will display everything, but when I click on form, form will be shown in the middle, when i click on Details, the details block will be shown in the middle.
The user can scroll down and up to see the blocks.
I saw that in Angular 2 we can user Fragment to precise anchor and what blocks we want to show, but the problem is that there is a bug on the fragment functionality.
At the moment, I have a router-outlet that changes the view depending on the url in the routerLink on each button of the navbar. Should I keep using it if i want to display all the blocks/components on the same page?
Thanks for your help,
here is the screenshot
So in essence, you want a multitude of components, with a menu that doesn't really navigate, but more so has toggle buttons that either display or hide content? What should a page refresh do? Does it matter if you see the same components then? If so, you either have to store state in local storage / session storage / using ngrx... or you have to add the displayed items to the route and resolve those.
Anyhow, in the end you want one component which decides what is displayed, and all the blocks in their own components with their own selectors which you show / hide using *ngIf.
Your html would basically look like this:
<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>
I'm currently working on a mobile application using Cordova.
When I click on the 'reviews' button on one page, I want it to open up the next page (which shows more about that particular company) and automatically scroll down to the 'reviews' div on that page.
I've tried adding a scrollTop within the onclick function, adding a # to it (this breaks the link completely) and many other different things.
How can I do that? Any help would be greatly appreciated!
***Edit
a onclick="' + showpage + '"
this url is bring created from json info that is being brought in depending on certain criteria.
The page that it is on is a list of businesses, then if you click on the name, it goes to a page about that particular business. Currently when you click on the reviews, it also goes to the particular business but I want it to load the business page then automatically scroll down to the reviews div (This is being created dynamically as the page is loaded).
div class="star-review' <-- this is the div that I'm wanting it to scroll into position to.
Avoid href in a tag....
Use this simple workaround in JavaScript
<a id="scrollToTop name="scrollToTop" value="Send">
Scroll To Top
</a>
<script>
$("#scrollToTop").scrollTop(
$("#scrollToTop")[0].scrollHeight);
});
</script>
The href was being built into a function and then showpage was spitting that link out, I solved the problem by rebuilding the href without showpage and then I was able to add my #reviews to the end of it. :)
Cordova creates application using single page architecture, so it creates a link between page using hastag.
data-role="page" id="mypage"
In your tag you need to pass data-role as page, and you need to pass its id.
When creating link on the page, you need to write link tag as mentioned below:
My Page Link
Thanks
Amit
We have decided to use ng-template as a popover container which loads the contents in the tags.
....
....
I also have this popup's controller and I am able to alert values from this controller. The only thing I am not able to do is route to different page when I say conversation/new
If I put a sample button or link in the home page then it routes to the second page but not from the popover.
One thing that is happening - URL which I want is flashing and then reseting to what it was.
Has any one faced such issue? Is it a known issue or there is a work around to this.
Thanks,
Ankit
I have an Angular JS project using Angular UI-Router which is going great but I am trying to implement the UI Bootstrap pagination directive and can't work out the correct strategy.
I have a table of data shown 1 page at a time and I have the pagination directive in place showing the correct number of page links. When you click a link it gets the new page number and makes a Restangular call to the api to get the new records and binds them to the table.
That's all working well, but obviously when you page through the data the URL doesn't change so the user can't use the browser back/forward buttons to navigate their history. Ideally I would like to use the following URLs:
/contacts
/contacts/page-2
/contacts/page-3
I would also like to include sorting in the URL but that's another question.
I could achieve this but by manually transitioning to a new state when one of the pagination buttons is clicked, but that would reload the controller and all of it's contents, making additional ajax calls to the server and making ugly flashes of un-styled content as it recreated the pagination control etc.
Ideally I would be able to change the URL and add a history state but without triggering an actual state change and reloading/running the controller for that view. I'm not sure if this is even possible, let alone how to do it.
Anybody got any ideas?
This is easily achievable with $stateParams
For example
$stateProvider
.state('contacts',{
url: '/contacts',
templateUrl: 'contacts.html'
}).state('contacts.paginated', {
url: "/contacts/page-:pageNum",
templateUrl: 'contacts.html',
controller: function ($stateParams) {
// If we got here from a url of /contacts/page-2
expect($stateParams).toBe({pageNum: 2});
}
})
I would choose a different pagination scheme however
Either /contacts/page/1 or /contacts?page=1
both are easily achievable with ui-router