0

I'm trying to create Bootstrap 3 navbar on which when I tap an tab it's active, with this answer. However, when I tried to write the above code and run the app, then for some reasons $location.path() doesn't have any values.

When I tried to debug the output, using console.log($location); in my Angular function above, then it returned the following:


LOC =  
Ob {$$protocol: "http", $$host: "localhost", $$port: 3000, $$parse: function, $$compose: function…}
$$absUrl: "http://localhost:3000/blog"
$$compose: function (){var c=bc(this.$$search),e=this.$$hash?"#"+Bb(this.$$hash):"";this.$$url=Ac(this.$$path)+(c?"?"+c:"")+e;this.$$absUrl=
$$hash: ""
$$host: "localhost"
$$parse: function (d){var e=pa(b,d)||pa(c,d),e="#"==e.charAt(0)?pa(a,e):this.$$html5?e:"";if(!t(e))throw Nb("ihshprfx",d,a);Cc(e,this,b);d=this.$$path;var g=/^\/?.*?:(\/.*)/;0===e.indexOf(b)&&(e=e.replace(b,""));g.exec(e)||(d=(e=g.exec(d))?e[1]:d);this.$$path=d;this.$$compose()}
$$path: "" // set to path
$$port: 3000
$$protocol: "http"
$$replace: false
$$rewrite: function (a){if(Za(b)==Za(a))return a}
$$search: Object
$$url: ""
__proto__: Object

And since the above linked code uses $location.path(), I cannot toggle the active/inactive in my Bootstrap navbar.

Why does it return the undefined $location.path()? I use the latest Angular version and Bootstrap 3. And on what occasions/circumstances do the $location.path() return something and when nothing?

Community
  • 1
  • 1
Blaszard
  • 30,954
  • 51
  • 153
  • 233
  • Have you defined your AngularJS routes? – callmekatootie Apr 12 '14 at 09:38
  • What do you mean by "AngularJS routes"? ``? – Blaszard Apr 12 '14 at 09:39
  • I mean using AngularJS to load templates. Are you using `ng-view` directive? How will you display the page based on the active tab? – callmekatootie Apr 12 '14 at 09:42
  • I put `ng-view` in the `div`, much like the accepted answer of the linked post. My background is node.js, and I just returns my response from the server using `res.render()` function. The response is valid with 200 status code. – Blaszard Apr 12 '14 at 09:45
  • Ok. So you are using `ng-view` - Now, have you defined the routes - `$routeProvider.when('/', {templateUrl: "home.html"});`? – callmekatootie Apr 12 '14 at 09:46
  • I haven't. Does it require me to implement it? The accepted answer of the linked post doesn't. – Blaszard Apr 12 '14 at 09:48
  • `ng-view` directive is used to define your templates in separate files and at runtime, using AngularJS's `$routeProvider` you then define which template to be used for which route or path. I suggest you take the AngularJS tutorial - very easy to follow. It introduces the routes in step 7 - Routing and Multiple View. – callmekatootie Apr 12 '14 at 09:52
  • Thus, when you define the route or the paths and then define which template to be used for which path (so that when the user clicks the tab, the appropriate page loads_, `$location.path()` should return the correct path. – callmekatootie Apr 12 '14 at 09:53
  • Don't worry about having a background in Nodejs - take the AngularJS tutorial and you will love it. – callmekatootie Apr 12 '14 at 09:54
  • 1
    I just found [this answer](https://groups.google.com/forum/#!msg/angular/_KRRfMF6tcI/5RPwwTpOT_4J), where it looks like `$location.path()` doesn't work unless there's `#` included in the URL. And I just found that one of the answer of the linked page in my original post (Ender2050) uses ``, and when I tried to write in such a way, the controller works properly. What do you think about this? – Blaszard Apr 12 '14 at 09:57
  • As to the `$routeProvider`, I'll try it out. – Blaszard Apr 12 '14 at 09:58
  • Not necessarily. # is a non-html5mode of AngularJS. In html5mode, you can specify the prefix or remove it altogether. Just check the tutorial out and you will understand it all. It is the best tutorial I have ever seen so far for a javascript framework, you will definitely appreciate it. – callmekatootie Apr 12 '14 at 10:01
  • Actually I did read the tutorial (Android phone tutorial, right?), though since it's v1.0.7 when I read it (around last August IIRC) I would need to re-read it. Would check soon. – Blaszard Apr 12 '14 at 10:11
  • Correct. That's the one. Although the AngularJS version has changed, the concepts are still the same. You need to read the Routing and Multiple Views section of the tutotorial – callmekatootie Apr 12 '14 at 10:16
  • I've read the part 7 and 8 of the tutorial but still not sure why it's required. The accepted answer of the linked post don't use it. It completely makes no sense for only me to define it, but not for him. – Blaszard Apr 12 '14 at 20:18
  • OK, finally worked. You were right, that it looks like not working without `ngRoute` and `$routeProvider`. As I said, I'm still not sure why the accepted answer doesn't implement it... It might be that he only included the relevant part (though I doubt it, given that he got such a huge number of upvotes). Thank you for your great insight! – Blaszard Apr 12 '14 at 21:27

0 Answers0