Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change anchor hrefs to ui-sref when using ui-router #331

Closed
jpstone opened this issue Jul 11, 2014 · 5 comments
Closed

Change anchor hrefs to ui-sref when using ui-router #331

jpstone opened this issue Jul 11, 2014 · 5 comments
Labels

Comments

@jpstone
Copy link

jpstone commented Jul 11, 2014

When spinning up a new app w/ ui-router, I find myself having to find and change each href to ui-sref. Would be preferable to have this automatically set when using the ui-router option.

@remicastaing
Copy link
Contributor

Is it all href or just the ng-href?

All ng-href are in the navbar files.

@jpstone
Copy link
Author

jpstone commented Jul 11, 2014

The navbar uses href, not ng-href. I find myself changing this to ui-sref in order to properly navigate to the desired $state.

Also, when logging in, login.controller calls '$location.path('/')'. I think if using ui-router, this should be something like $state.go('main') instead.

@remicastaing
Copy link
Contributor

I don't understand. I went through the generator and just found this:

Searching 150 files for "ng-href" (regex, case sensitive)

/Users/remi/Workspaces/JS/generator-angular-fullstack/app/templates/client/components/navbar/navbar(html).html:
   13        <ul class="nav navbar-nav">
   14          <li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
   15:             <a ng-href="{{item.link}}">{{item.title}}</a>
   16          </li><% if(filters.auth) { %>
   17          <li ng-show="isAdmin()" ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li><% } %>

/Users/remi/Workspaces/JS/generator-angular-fullstack/app/templates/client/components/navbar/navbar(jade).jade:
   12        ul.nav.navbar-nav
   13          li(ng-repeat='item in menu', ng-class='{active: isActive(item.link)}')
   14:           a(ng-href='{{item.link}}') {{item.title}}<% if(filters.auth) { %>
   15  
   16          li(ng-show='isAdmin()', ng-class='{active: isActive("/admin")}')

2 matches across 2 files

@jpstone
Copy link
Author

jpstone commented Jul 11, 2014

Ok, so ng-href is only for $scope.menu in navbar.controllers. The rest of the menu li's use href.

I think they both should be ui-sref if using ui-router. For example, I changed ng-href to ui-sref="main" for "Home", and obviously all the other hrefs as well (to their proper states).

@remicastaing
Copy link
Contributor

To avoid such code in several place all over the files:

<% if(filters.ngroute) { %>
href='/'
<% } %><% if(filters.uirouter) { %>
ui-sref='main'
<% } %>

they may be better to write separate files for ui-router:

  • navbar(html).html
  • login(html).html
  • signup(html).html
  • main(html).html

and also the four associated jade file.

In following files:

  • login.controller(js).js
  • signup.controller(js).js

$location.path('/'); may be replaced by $state.go('main'). Same thing for the cofffescript files.

@JaKXz JaKXz added the bug label Jul 16, 2014
kingcody added a commit to kingcody/generator-angular-fullstack that referenced this issue Sep 8, 2014
Changes:
- Use `ui-sref` instead of `href` or `ng-href` when ui-router is chosen
- Use `ui-sref-active` instead of `ng-class='{active: isActive()}'` when ui-router is chosen
- Use `$state.go()` where applicable, when ui-router is chosen
- Use `$scope.menu[n].state` instead of `$scope.menu[n].link` when ui-router is chosen (attempt to remove possible confusion)
- Omit `$scope.isActive` when ui-router is chosen
- Simplify `navbar(jade).jade` templating (remove extra `<% if (filters.auth) %>` tag)
- Add `/logout` route for both ng-route and ui-router
- Use `$routeChangeStart` or `$stateChangeStart` to pass refering route or state to `/logout`
- Add `stateMock` for testing `$state` transitions
- Use `stateMock` in main.controller for expecting template requests from state transistions

Closes angular-fullstack#331
DaftMonk pushed a commit that referenced this issue Sep 17, 2014
Changes:
- Use `ui-sref` instead of `href` or `ng-href` when ui-router is chosen
- Use `ui-sref-active` instead of `ng-class='{active: isActive()}'` when ui-router is chosen
- Use `$state.go()` where applicable, when ui-router is chosen
- Use `$scope.menu[n].state` instead of `$scope.menu[n].link` when ui-router is chosen (attempt to remove possible confusion)
- Omit `$scope.isActive` when ui-router is chosen
- Simplify `navbar(jade).jade` templating (remove extra `<% if (filters.auth) %>` tag)
- Add `/logout` route for both ng-route and ui-router
- Use `$routeChangeStart` or `$stateChangeStart` to pass refering route or state to `/logout`
- Add `stateMock` for testing `$state` transitions
- Use `stateMock` in main.controller for expecting template requests from state transistions

Closes #331
@Awk34 Awk34 closed this as completed Jul 6, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants