Rectangle 27 21

Your nested project.settings state needs to address the view in the higher state explicitly using an '@' suffix, ie.:

.state('project.settings', {
        url: "/settings",
        views:{
              "content@":{templateUrl: "partials/project.settings.html"},
              "header@":{templateUrl: "partials/header"}
        }
 })

I was wondering why I had seen the @ sign. I think this just opened my eyes. In my case I needed to use content@ because the ui-view I was using for content was in my index.html. It seems to be working; I am hoping this is the correct way to do this.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - In Angular ui-router nested state url changes,but templat...

javascript angularjs angular-ui-router
Rectangle 27 19

First of all change file name project.settings.html in templateurl and file name to projectSettings.html (remove dot).

.state('project.settings', {
         url: "/settings",
          views:{
               "content":{templateUrl: "partials/projectSettings.html"},
               "header":{templateUrl: "partials/header"}
           }
    })

Add two divs in the project template to load the sub pages (header abd projectSettings)

Note: Any content in this divs will be replaced with the page loaded here.

<div ng-controller="userController">
        <div class="details">
            <a ui-sref=".settings" class="btn btn-primary">Settings</a>
        </div>
        <div ui-view="header">( Project Page header will replace with projectSettings header )</div>
        <div class="container" ui-view="content">( Project Page content will replace with projectSettings Content )</div>

    </div>

Thanks! After maybe 6 other answers this is the one that got me through. What was I missing? Add two divs in the project template.

javascript - In Angular ui-router nested state url changes,but templat...

javascript angularjs angular-ui-router
Rectangle 27 2

I had the same issue, the solution was; open the project.html file (which is the parent page) and wrap everything within <ui-view>

<div ng-controller="userController">
  <div class="details">
    <a ui-sref=".settings" class="btn btn-primary">Settings</a>
  </div>
</div>

with these:

<ui-view>
 <div ng-controller="userController">
   <div class="details">
     <a ui-sref=".settings" class="btn btn-primary">Settings</a>
   </div>
 </div>
</ui-view>

and you will be good to go ;)

javascript - In Angular ui-router nested state url changes,but templat...

javascript angularjs angular-ui-router
Rectangle 27 186

If you want it to work in browsers that don't support history.pushState and history.popState yet, the "old" way is to set the fragment identifier, which won't cause a page reload.

The basic idea is to set the window.location.hash property to a value that contains whatever state information you need, then either use the window.onhashchange event, or for older browsers that don't support onhashchange (IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using setInterval for example) and update the page. You will also need to check the hash value on page load to set up the initial content.

If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports. I'm sure there are plugins for other libraries as well.

One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.

@Drew, as far as I know, there's no way for search engines to treat a part of a page as a separate result.

Instead of using setInterval to inspect the document.location.hash one can use the hashchange event, as it's much more adopted. Check here for what browsers support each standard. My current approach is to use push/popState on browsers that support it. On the others I set the hash and only watch the hashchange in supporting browsers. This leaves IE<=7 without history support, but with usefull permalink. But who cares for IE<=7 history?

@gabeDel Yes, although I don't think Analytics records the hash, so it would have the same URL. A better way would be to manually call _trackPageview with the "real" URL of the new page.

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 186

If you want it to work in browsers that don't support history.pushState and history.popState yet, the "old" way is to set the fragment identifier, which won't cause a page reload.

The basic idea is to set the window.location.hash property to a value that contains whatever state information you need, then either use the window.onhashchange event, or for older browsers that don't support onhashchange (IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using setInterval for example) and update the page. You will also need to check the hash value on page load to set up the initial content.

If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports. I'm sure there are plugins for other libraries as well.

One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.

@Drew, as far as I know, there's no way for search engines to treat a part of a page as a separate result.

Instead of using setInterval to inspect the document.location.hash one can use the hashchange event, as it's much more adopted. Check here for what browsers support each standard. My current approach is to use push/popState on browsers that support it. On the others I set the hash and only watch the hashchange in supporting browsers. This leaves IE<=7 without history support, but with usefull permalink. But who cares for IE<=7 history?

@gabeDel Yes, although I don't think Analytics records the hash, so it would have the same URL. A better way would be to manually call _trackPageview with the "real" URL of the new page.

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 185

If you want it to work in browsers that don't support history.pushState and history.popState yet, the "old" way is to set the fragment identifier, which won't cause a page reload.

The basic idea is to set the window.location.hash property to a value that contains whatever state information you need, then either use the window.onhashchange event, or for older browsers that don't support onhashchange (IE < 8, Firefox < 3.6), periodically check to see if the hash has changed (using setInterval for example) and update the page. You will also need to check the hash value on page load to set up the initial content.

If you're using jQuery there's a hashchange plugin that will use whichever method the browser supports. I'm sure there are plugins for other libraries as well.

One thing to be careful of is colliding with ids on the page, because the browser will scroll to any element with a matching id.

@Drew, as far as I know, there's no way for search engines to treat a part of a page as a separate result.

Instead of using setInterval to inspect the document.location.hash one can use the hashchange event, as it's much more adopted. Check here for what browsers support each standard. My current approach is to use push/popState on browsers that support it. On the others I set the hash and only watch the hashchange in supporting browsers. This leaves IE<=7 without history support, but with usefull permalink. But who cares for IE<=7 history?

@gabeDel Yes, although I don't think Analytics records the hash, so it would have the same URL. A better way would be to manually call _trackPageview with the "real" URL of the new page.

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 105

history.pushState
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

and a href:

<a href="#" id='click'>Click to change url to bar.html</a>

If you want to change the URL without adding an entry to the back button list, use history.replaceState instead.

GREAT TIP ! works on chrome but not in FF" :/

Sample code is cut and pasted from developer.mozilla.org/en/DOM/Manipulating_the_browser_history . Which actually bothers explaining what foo and bar mean in this case.

The foo and bar don't mean anything, it's an arbitrarily defined state object that you can get back later.

@Paul: yep, the article above provides that info.

AS of posting this comment it works on firefox chrome and safari. No luck with mobile safari on the ipad or iphone though :(

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 104

history.pushState
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

and a href:

<a href="#" id='click'>Click to change url to bar.html</a>

If you want to change the URL without adding an entry to the back button list, use history.replaceState instead.

GREAT TIP ! works on chrome but not in FF" :/

The foo and bar don't mean anything, it's an arbitrarily defined state object that you can get back later.

@Paul: yep, the article above provides that info.

AS of posting this comment it works on firefox chrome and safari. No luck with mobile safari on the ipad or iphone though :(

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 103

history.pushState
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

and a href:

<a href="#" id='click'>Click to change url to bar.html</a>

If you want to change the URL without adding an entry to the back button list, use history.replaceState instead.

GREAT TIP ! works on chrome but not in FF" :/

The foo and bar don't mean anything, it's an arbitrarily defined state object that you can get back later.

@Paul: yep, the article above provides that info.

AS of posting this comment it works on firefox chrome and safari. No luck with mobile safari on the ipad or iphone though :(

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 1

ui-sref="project.settings"
project.html

already tried replacing .setting with project.setting .Anyway thanks

The code in the plunkr is not a running one, I will improve it.I just thought, it will be helpfull to edit and compile,if anyone interested.thank you for your suggestions.

javascript - In Angular ui-router nested state url changes,but templat...

javascript angularjs angular-ui-router
Rectangle 27 37

window.location.href contains the current URL. You can read from it, you can append to it, and you can replace it, which may cause a page reload.

If, as it sounds like, you want to record javascript state in the URL so it can be bookmarked, without reloading the page, append it to the current URL after a # and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state.

If you use a ? instead of a #, you will force a reload of the page, but since you will parse the saved state on load this may not actually be a problem; and this will make the forward and back buttons work correctly as well.

recording javascript state in the URL is exactly what I'm trying to do

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 37

window.location.href contains the current URL. You can read from it, you can append to it, and you can replace it, which may cause a page reload.

If, as it sounds like, you want to record javascript state in the URL so it can be bookmarked, without reloading the page, append it to the current URL after a # and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state.

If you use a ? instead of a #, you will force a reload of the page, but since you will parse the saved state on load this may not actually be a problem; and this will make the forward and back buttons work correctly as well.

recording javascript state in the URL is exactly what I'm trying to do

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 37

window.location.href contains the current URL. You can read from it, you can append to it, and you can replace it, which may cause a page reload.

If, as it sounds like, you want to record javascript state in the URL so it can be bookmarked, without reloading the page, append it to the current URL after a # and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state.

If you use a ? instead of a #, you will force a reload of the page, but since you will parse the saved state on load this may not actually be a problem; and this will make the forward and back buttons work correctly as well.

recording javascript state in the URL is exactly what I'm trying to do

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 22

I would strongly suspect this is not possible, because it would be an incredible security problem if it were. For example, I could make a page which looked like a bank login page, and make the the URL in the address bar look just like the real bank!

Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...

Not so much of an issue if non-reload changes were restricted to the path, query string, and fragmenti.e. not the authority (domain and such).

You can only change the location.hash (everything after the #), as Matthew Chumley notes in the accepted answer.

Do you use Facebook? Facebook changes the URL without reloading, using history.pushState().

Paul Dixon, you should notice facebook inbox, when you click on names on left side, just URL is changed and new chat is loaded in chat box, page does not refreshed. also there are lots more site on WebGL they do the same

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 22

I would strongly suspect this is not possible, because it would be an incredible security problem if it were. For example, I could make a page which looked like a bank login page, and make the the URL in the address bar look just like the real bank!

Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...

Not so much of an issue if non-reload changes were restricted to the path, query string, and fragmenti.e. not the authority (domain and such).

You can only change the location.hash (everything after the #), as Matthew Chumley notes in the accepted answer.

Do you use Facebook? Facebook changes the URL without reloading, using history.pushState().

Paul Dixon, you should notice facebook inbox, when you click on names on left side, just URL is changed and new chat is loaded in chat box, page does not refreshed. also there are lots more site on WebGL they do the same

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 22

I would strongly suspect this is not possible, because it would be an incredible security problem if it were. For example, I could make a page which looked like a bank login page, and make the the URL in the address bar look just like the real bank!

Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...

Not so much of an issue if non-reload changes were restricted to the path, query string, and fragmenti.e. not the authority (domain and such).

You can only change the location.hash (everything after the #), as Matthew Chumley notes in the accepted answer.

Do you use Facebook? Facebook changes the URL without reloading, using history.pushState().

Paul Dixon, you should notice facebook inbox, when you click on names on left side, just URL is changed and new chat is loaded in chat box, page does not refreshed. also there are lots more site on WebGL they do the same

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 1

document.URL
$window.location
$rootScope.$on('$routeChangeStart', function(event, next, current) {
     console.log(document.URL);   
     console.log($window.location)       

});

document.URL holds the value needed only when listening to $locationChangeStart event.

javascript - AngularJS: Use route for given URL when loading page firs...

javascript angularjs url-routing single-page-application
Rectangle 27 8

Browser security settings prevent people from modifying the displayed url directly. You could imagine the phishing vulnerabilities that would cause.

Only reliable way to change the url without changing pages is to use an internal link or hash. e.g.: http://site.com/page.html becomes http://site.com/page.html#item1 . This technique is often used in hijax(AJAX + preserve history).

When doing this I'll often just use links for the actions with the hash as the href, then add click events with jquery that use the requested hash to determine and delegate the action.

I hope that sets you on the right path.

Sorry but your answer is not true. Yes you can change the URL.

Yes you can use the html5 history api but it's not cross-browser, though you can use a poly-fill that will fallback to hash urls.

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange
Rectangle 27 8

Browser security settings prevent people from modifying the displayed url directly. You could imagine the phishing vulnerabilities that would cause.

Only reliable way to change the url without changing pages is to use an internal link or hash. e.g.: http://site.com/page.html becomes http://site.com/page.html#item1 . This technique is often used in hijax(AJAX + preserve history).

When doing this I'll often just use links for the actions with the hash as the href, then add click events with jquery that use the requested hash to determine and delegate the action.

I hope that sets you on the right path.

Sorry but your answer is not true. Yes you can change the URL.

Yes you can use the html5 history api but it's not cross-browser, though you can use a poly-fill that will fallback to hash urls.

Change the URL in the browser without loading the new page using JavaS...

javascript url fragment-identifier hashchange