Pass state parameter from url in angular-ui-router


URL parameters are automatically sent as state parameters in angular-ui-router. All we need to do is declare the parameter names in state configuration. Here is an example of state configuration:

.state('home.profile', {
    url: '/profile?id',
    templateUrl: 'templates/profile.html',
    controller: 'ProfileCtrl'
})

Here we've declared a parameter id in url attribute. 

Now if we hit the url with parameter id e.g /profile?id=1234343, we'll be able to receive id=1234343 in state params. 

We'll also be able to pass state parameter through ui-sref like the following:

<a ui-sref="home.profile({id:'1234343'})">Go to profile</a>

Here is an example controller that demonstrates how to receive the parameter:

.controller('ProfileCtrl', ['$scope', '$stateParams',
    function ($scope, $stateParams) {
        $scope.id = $stateParams.id; // id will be 1234343    
    }
])

Comments

Post a Comment

Popular posts from this blog

Run tasks in background in Spring

Why background task? There are tons of examples where we often need to run a task in background e.g. sending an email, sms or notification, writing some log in file etc. If a task is not required to maintain atomicity and can be executed after some delay, it's a good candidate to run in background.   How to run tasks in background in Java? In Java, the easiest way to run a task in background is to create a new thread and execute it. It's quite simple. Here is how to do this: new Thread(new Runnable(){ @Override public void run(){ // your background task } }).start(); It's easy! But there are some maintenance problem with the above code. The major problem is - there is no way to control how many background tasks we want to run simultaneously. For example, if 1000 users registers in your application at a time and you create 1000 background threads to send them a confirmation email, maybe you'll be in trouble. So you ne
Read more

How to configure Wildfly 10 to use MySQL

Follow these steps to configure MySQL in Wildfly 10 Step 1 : Download MySQL connector jar from mysql downloads page . Step 2 : Go to modules\system\layers\base\com of your Wildfly home Step 3 : Create folder like mysql\main and go to mysql\main Step 4 : Place the downloaded connector jar in the main folder  Step 5 : Create a file named module.xml in the main folder and put the following content in it. Set the path variable so that it matches the name of the jar file. <?xml version="1.0" encoding="UTF-8"?> <module xmlns="urn:jboss:module:1.1" name="com.mysql">     <resources>         <resource-root path="mysql-connector-java-5.1.39-bin.jar"/>                  </resources>     <dependencies>         <module name="javax.api"/>         <module name="javax.transaction.api"/>     </dependencies> </module> Step 6 : Go to standalone\configuration dir
Read more

Conditional field inclusion in Jackson and Spring Boot

When we write JSON API with spring boot, we often need to customize which fields should be included in our response JSON and which should not. For example, suppose we've a Model like the following: public class User {     private Long id;     private String name;     private String password;     private List<String> children;     // getters and setters here } Now we've the following controller: @RestController @RequestMapping("/api/users") public class UserController {     @GetMapping     public List<User> userList(){         User user = new User();         user.setId(10L);         user.setName("Rafiqunnabi Nayan");         user.setPassword("abcd");         user.setChildren(Arrays.asList("Child 1", "Child 2"));         return Arrays.asList(user);     }     @GetMapping("{id}")     public User userDetails(@PathVariable Long id){         User user = new User();         user.set
Read more