Angular JS Passing Parameters to URL in UI-Router

Submitted by nurhodelta_17 on Monday, January 15, 2018 - 18:52.

Getting Started

I've used CDN for Bootstrap, Angular JS and UI-Router so you need internet connection for them to work.

Creating our Database

First we are going to create our database and insert data. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `members` (
  `memid` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL AUTO_INCREMENT,
  `lastname` varchar(30) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `members` (`memid`, `firstname`, `lastname`) VALUES
(1, 'Neovic', 'Devierte'),
(2, 'Gemalyn', 'Cepe'),
(3, 'Julyn', 'Divinagracia'),
(4, 'Tintin', 'Demapanag');

index.html

This is the main view of our app.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <meta charset="utf-8">
        <title>Angular JS Passing Parameters to URL in UI-Router</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
</head>
<body>
<div class="container">
        <div ui-view></div>
</div>
<script src="app.js"></script>
</body>
</html>

app.js

This is our main angular js script.

var app = angular.module('app', ['ui.router']);
 
app.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
       
        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'homeCtrl'
        })
 
        //dis is our state where we put our id in url
        .state('view', {
            url: '/view/{member:json}',
            params: {member: null},
            templateUrl: 'view.html',
            controller: 'viewCtrl'
        })
    
});
 
app.factory('memberService', function($http){
        return{
                fetchAllMember: function(){
                        var members = $http.get('members.php');
                        return members;
                }
        }
});
 
app.controller('homeCtrl', ['$scope', '$state', 'memberService', function($scope, $state, memberService) {
        var allmembers = memberService.fetchAllMember();
        allmembers.then(function(response){
                $scope.members = response.data;
        });
        
        $scope.viewMember = function(member){
                $state.go('view', {member:member});
        }
}]);
 
app.controller('viewCtrl', function($scope, $stateParams) {
        $scope.details = $stateParams.member;
});

home.html

Per our router, this can be treated as our index view.

<h1 class="page-header text-center">Member Table</h1>
<div class="col-sm-8 col-sm-offset-2">
        <table class="table table-bordered table-striped">
                <thead>
                        <tr>
                                <th>Member ID</th>
                                <th>Firstname</th>
                                <th>Lastname</th>
                                <th>View Member</th>
                        </tr>
                </thead>
                <tbody>
                        <tr ng-repeat="member in members">
                                <td>{{ member.memid }}</td>
                                <td>{{ member.firstname }}</td>
                                <td>{{ member.lastname }}</td>
                                <td>
                                        <!-- using controller -->
                                        <button type="button" ng-click="viewMember(member)" class="btn btn-primary">Using controller</button>
                                        <!-- using ui-sref -->
                                        <button type="button" class="btn btn-primary" ui-sref="view({member: member})">Using ui-sref</button>
                                </td>
                        </tr>
                </tbody>
        </table>
        <tbody>
 
        </tbody>
</div>

view.html

This is the view where we show the object that we sent as parameters in url.

<h1 class="page-header text-center">Member Details</h1>
<div class="col-sm-4 col-sm-offset-4">
<h3>Member ID: {{ details.memid }}</h3>
<h3>Firstname: {{ details.firstname }}</h3>
<h3>Lastname: {{ details.lastname }}</h3>
<button type="button" ui-sref="home" class="btn btn-primary">Home</button>

members.php

This is our PHP api that fetches data from our MySQL database.

<?php
        $conn = new mysqli("localhost", "root", "", "angular");
 
        $output = array();
        $sql = "SELECT * FROM members";
        $query=$conn->query($sql);
        while($row=$query->fetch_array()){
                $output[] = $row;
        }
 
        echo json_encode($output);
?>

That ends this tutorial. Happy Coding :)

Add new comment

47 views