current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I am making an angularjs app and I have to push user's company name to url. For example, www.myapp.com/samsung or www.myapp.com/toyota.

My strategy to achieve was that first retrieve user's company information and get company's name and push the name to url using ui-router's $stateParams.

I am able to push the parameters, but it doesn't change the shape of url. The url just stays the same like www.myapp.com.

Is there any one who knows how to figure out this? Thanks

//main controller
$rootScope.$on('$stateChangeSuccess', function (e, toState, toParams, fromState, fromParams) {
 toParams = {company: $scope.user.company.nickname};//$scope.user.company.nickname contains company's name
});

//$stateProvider configuration
$stateProvider
.$state('home', {
  url: '/:company',
  ...
  ...
})
share|improve this question
1  
Where is the piece of code – Azola Jan 16 at 14:43
    
You just want to append a String to the URL? Load a state? Make all states work with the dynamic String? – DevDig Jan 16 at 14:44
    
I am going to attach company name string to the url. Here are some examples. www.myapp.com/samsung. www.myapp.com/samsung/posts/create. www.myapp.com/samsung/posts/view/hello. – Supergentle Jan 16 at 14:47
up vote 1 down vote accepted

UI-Router 1.0 and above can achieve this with an onEnter Transition Hook.

The hook checks if the parameter value is set or not. If it's not set (is null), it redirects the transition to the same state but with the parameter value set.

  $stateProvider.state({ 
    name: 'company', 
    url: '/:companyName', 
    params: { companyName: null }, // default to null
    onEnter: function ($transition$, $state, company)  {
      let params = $transition$.params();
      if (params.companyName === null) { // check if null. Get resolve and redirect
        return $state.target("company", { companyName: company.name });
      }
    },
    resolve: { 
      company: ($http) => 
          $http.get('company.json').then(resp => resp.data)
    },
    component: 'company',
  });

Here's a working plunker: http://plnkr.co/edit/aSJh6QyBUymKmaFNsOS8?p=info

share|improve this answer
    
Thanks it seems like the most promising answer! However, in my code, '$transition$' is not recognized. Does it come from other package other than ui-router? – Supergentle Jan 16 at 20:10
    
It's in UI-Router 1.0 and above – Chris T Jan 16 at 20:10
    
Well... it seems like my original codes conflicts with the 1.0 version. I am kinda afraid of rebuilding all my codes to make it work. By the way, I really appreciate for your answer. It could be really good resource when I do the similar project in future! – Supergentle Jan 16 at 20:32
up vote 0 down vote

If all you want to do is change the URL without reloading the page you can use:

var nameOfCompany = "toyota";
$location.url('/nameOfCompany');

$location is Angular's equvilant of window.location it can be used to observe and change the url without reloading. Check the documentation for more info.

share|improve this answer
    
I am going to push the company name to all the other urls to dynamically. – Supergentle Jan 16 at 14:52
    
@Supergentle ahh I misunderstood, as far as I am aware this isn't possible you will need either seperate states for each company name or the parameters for the url need to be given before routing to the state not after. – Callum Jan 16 at 15:02
    
That's sad news... but I have to. Is there any other alternative way to achieve this? – Supergentle Jan 16 at 15:15
    
As far as I am aware only multple states can achive this. – Callum Jan 16 at 15:19
up vote 0 down vote

I could achieve what I wanted with ui-router 0.3x version. The code might look dirty, but it works as I imagined. Hope it could help someone who's finding the same feature. 

.state('home', {
    url: '/:company',
    params: {company: null},
    templateUrl: '/templates/home.html',
    onEnter: ['error', 'auth', '$state', 'company', '$stateParams', function (error, auth, $state,     company, $stateParams) {
        if (!auth.isLoggedIn()) {
            return error.flash('Login is required.', 'login');
        }
        try {
            if ($stateParams.company === null || $stateParams.company !== company.nickname) {
                $state.go('home', {company: company.nickname});    
            }
        } catch (err) {
            console.log('mop');
        }
    }],
    resolve: {
        company: ['auth', 'error', function (auth, error) {
            return auth.getMyCompany().then(function (res) {
                return res.data;
            }, function (err) {
                error.flash(401, 'login');
            });
        }],
    },
})
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.