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.
(1, 'Neovic', 'Devierte'),
(2, 'Gemalyn', 'Cepe'),
(3, 'Julyn', 'Divinagracia'),
(4, 'Tintin', 'Demapanag');
index.html
This is the main view of our app.
<!DOCTYPE html>
<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>
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"> <tr ng-repeat="member in members"> <td>{{ member.memid }}
</td> <td>{{ member.firstname }}
</td> <td>{{ member.lastname }}
</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>
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");
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
?>
That ends this tutorial. Happy Coding :)