Repository
AngularJs GitHub Address
https://github.com/angular/angular.js
My GitHub Address
https://github.com/pckurdu
This Project GitHub Address
https://github.com/pckurdu/State-Service-s-Properties-and-Events-in-ui-router
What Will I Learn?
- You will learn what is state data and how to use it.
- You will learn how to use the state params parameter and what are the properties.
- You will learn what is the state current parameter and how to access the state data.
- You will learn state events.
Requirements
Difficulty
- Advanced
Tutorial Contents
In this tutorial, I will tell you the state service properties and events in the ui-router. For more information on the $state service, please see How to Use $state Service with ui-router named tutorial.
I will first write our routing codes using the ui-router, and I'll show the state property when routing then I will inform about state events. We will examine event and parameter properties on the console.
I split the screen into two for example. I will list the cleaning materials category on the left of the screen. On the right side of the screen I will show you the cleaning materials in the category clicked when you click on these cleaning materials.
I will do the routing operation, but I'll be using state.go () when I use the parameter during routing. I showed the state.go () function in the tutorial named How to Use $state Service with ui-router.
Let’s start.
We will use bootstrap to design the page that we will do our routing operations. I will get the categories from the main controller and list them on the page so I can use ng-controller="myCtrl" on the left side of the page.
Since I can use myCtrl at the index.html page, I need to define the controller after I have defined the myApp then define the category list in myCtrl.
In script.js
var app=angular.module('myApp',['ui.router']);
app.controller('myCtrl',['$scope','$state',function($scope,$state){
$scope.brands=[
{typeid:1,typename:'soap'},
{typeid:2,typename:'things'},
{typeid:3,typename:'stain remover'},
]
}]);
I also defined $ state service here. The reason for it definition is that we will use the go () function for routing in the future.
We can now create the index.html page.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>state Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-app='myApp'>
<div class="container">
<div class="jumbotron">
<a ui-sref='cleaning-products'>Cleaning Products</a>
</div>
<div class="row">
<div class="col-md-3" ng-controller="myCtrl">
<ul class="list-group">
<li class="list-group-item" ng-repeat="b in brands">
<a href='#' ng-click="do(b.typeid)">{{b.typename}}</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div ui-view></div>
</div>
</div>
</div>
</body>
</html>
ng-click = "do (b.typeid) will direct type id as a parameter with the help of the do () function when any of the categories are clicked.
You need a page to be redirected to do these things, and a config setting for this page.
Let's do the config settings.
In script.js
app.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('cleaning-products',{
url:'/cleaning-products/:bid',
templateUrl:'cleaning-products.html',
controller:'cleaningProductsCtrl',
data:{
constant:100
}
})
}]);
The page to be routed is set to cleaning-products.html and the data property is defined by routing.
In the data, the value is defined as contants: 100. We will adjust the price by reaching this value.
Let's create this page's controller and define the list of cleaning materials.
In script.js
app.controller('cleaningProductsCtrl',['$scope','$state',function($scope,$state){
$scope.cleaningProducts=[
{id:1,typeid:1,name:'pckurdu soap',price:1},
{id:2,typeid:3,name:'mr. pckurdu',price:2},
{id:3,typeid:1,name:'pckurdu liquid soap',price:3},
{id:4,typeid:2,name:'mop pckurdu',price:1},
{id:5,typeid:2,name:'pckurdu broom',price:5},
]
}]);
We will multiply the price property of the cleaning materials by the constant property and get their prices.
Create a cleaning-products.html page to illustrate the cleaning materials and code it as follows.
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="clean in cleaningProducts">
<b>Name</b>: {{clean.name}} ->Priceb>: {{clean.price}}
</li>
</ul>
</div>
The index.html page looks like this at the opening.
Since we did not do routing according to the parameter, whichever category is clicked, all the cleaning materials are listed.
We can now define the do () function in myCtrl, and state.go () can take the parameter into state.
In myCtrl
$scope.do=function(typeid){
$state.go('cleaning-products',{
bid:typeid
})
}
params property
The state service stores the params property for the parameters to be used during the routing.
The parameter to params was loaded with the go () function.
Let's print the state service in the console and examine the params property.
In cleaningProductsCtrl
…
console.log($state);
…
After routing is done, the params property looks like this:
bid: 1 because I clicked on the category typeid: 1.
To access the bid content we need to write $state.params.bid.
current property
With the current property, we can access the necessary config settings for the routing operation.
We can use the current property when we need the config settings of the page being routing to after we finish the routing.
In this example we need to access the data property in our config setting.
We can access constant content with $state.current.data.constant.
$state Events
With the help of events we can get information about the states that changed at the time of routing.
There are 4 state events:
-$stateChangeStart: We can catch the event when the state change begins.
-$stateChangeSuccess: We can catch the event when the state change success.
-$stateChangeError: We can catch the event when the state change error.
-$stateNotFound: We can catch the event when the state not found.
These events show us the previous state and parameter properties as well as the next state and parameter properties.
In order to access these events we need to define it in $rootScope so that the previous state can be caught in the initial routing.
We need to set event information in the following order so there is no confusion.
$rootScope.$on('$stateChangeStart',function(e,toState,toParams,fromState,fromParams,option)
To better understand what's going on now, let's improve our example and take it into routing in the category list.
In script.js
app.config(['$stateProvider',function($stateProvider){
…
.state('category',{
url:'/category',
templateUrl:'category.html',
controller:'categoryCtrl',
})
}]);
Define categoryCtrl
app.controller('categoryCtrl',['$scope','$state',function($scope,$state){
$scope.brands=[
{typeid:1,typename:'soap'},
{typeid:2,typename:'things'},
{typeid:3,typename:'stain remover'},
]
}]);
In category.html
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="b in brands">
{{b.typename}}
</li>
</ul>
</div>
We can now get two different state values when we are routing.
Let's add category link to index.html page and define $rootScope.
In script.js
app.run(['$rootScope',function($rootScope){
$rootScope.$on('$stateChangeStart',function(e,toState,toParams,fromState,fromParams,option){
console.log(e);
console.log(toState);
console.log(toParams);
console.log(fromState);
console.log(fromParams);
console.log(option);
})
}])
Here we will examine the $stateChangeStart event.
The first time we run the page, the following screen appears.
Click the Cleaning Products button for the first routing.
console.log (e); command console informs about event.
console.log (toState); command holds next state information.
For other features, the console screen is below.
If the sequence is followed, fromState appears to be empty. it is empty because it is the first routing.
Let's do the second routing operation by clicking on the category button.
Now the toState is full as category state, fromState is full as cleaning-products state so we can access the previous state information here.
Finally, let's examine the option property.
We can access the state settings according to the $stateChangeStart event we write using the option parameter.
For example option.inherit=false .
Conslusion
Other events are like $stateChangeStart event. Only the moments they are caught are different
$rootScope.$on('$stateChangeSuccess',function(e,toState,toParams,fromState,fromParams)
$rootScope.$on('$stateChangeError',function(e,toState,toParams,fromState,fromParams,error)
$rootScope.$on('$stateNotFound,function(e,toState,toParams,fromState,fromParams,option)
Thank you for your interest.
Curriculum
What is ui-router in Angularjs
How to use the parameters when ui-routing in angularjs
How to Use $state Service with ui-router
Proof of Work Done
https://github.com/pckurdu/State-Service-s-Properties-and-Events-in-ui-router