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/How-to-use-the-parameters-when-ui-routing-in-angularjs
What Will I Learn?
- You will learn parameter usage with angularjs ui-router
- You will learn $stateParams.
- You will learn how to use AngularJS service.
- You will learn what is otherwise in ui-router.
- You will learn find() function in AngularJs.
Requirements
Difficulty
Intermediate
Tutorial Contents
I will show you how to use the parameters when using ui-router on this tutorial example.
I will define an array containing multiple announcements with id title and content attributes.
I will communicate with the angular service during the routing process between the routing controller and the main controller. At the same time as performing these operations I will show you the find function.
Unexpected situations may occur during redirecting or we may want to go to the main page.
In the example I will also show how the ui-router reflex should be for such situations.
Let’s start coding and enjoying!
Step 1: Setting up application view using bootstrap
In this section I will set how the page's design will look. I need to add bootstrap, angular and angular ui-router cdns to the head area of the page in order to use bootstrap and angular codes.
I will split the page into two parts. On the left side, the announcements will be listed. on the right side, and the content of the clicked announcement will be brought up.
In index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>pckurdu</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 >
<div >
<div class="container">
<div class="jumbotron">
<a href="#">Home</a>
</div>
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">
<a href="# ">list of announcements </a>
</li>
</ul>
</div>
<div class="col-md-9">
<div ui-view>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Announcement array definition and angularjs code writing.
In this section I will create an app and a controller in the script.js file.
I will define an announcement array in the controller and I will list the title property of the announcements in index.html.
In script.js
var app=angular.module('myApp',['ui.router']);
app.controller('myCtrl',['$scope' ,function($scope){
$scope.announcements=[
{id:1,title:'announcement1',content:'Content1'},
{id:2,title:'announcement2',content:'Content2'},
{id:3,title:'announcement3',content:'Content3'}
];
}]);
I defined ui.router to angular module. I also wrote the controller definition according to the dependency injection rules.
Now I can list the title of the announcement using ng-repeat. but before, I doing myApp and MyCtrl definition.
In index.html
<body ng-app="myApp">
<div ng-controller="myCtrl">
…
<ul class="list-group">
<li ng-repeat="a in announcements" class="list-group-item">
<a href="#">{{a.title}}</a>
</li>
</ul>
…
</body>
The view of the index page looks like the following.
Step 3: Routing using ui-router with parameters.
The $ stateProvider object is used when routing using the ui-router.
With the state that derives from the $ stateProvider object , the necessary settings for routing can be made.
I shown below how to you define the state.
In script.js
app.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('announcements',{
url:'/announcements',
templateUrl:'announcement.html',
controller:'announcementsCtrl'
});
}]);
Create an announcement.html page for the templateUrl property.
The announcement.html page will come to the index.html page in the<div ui-view> </div> attribution field.
I will show you with announcement.html the data we receive from the controller.
To be able to do routing, I need to define state's url in href.
In index.html
…
<ul class="list-group">
<li ng-repeat="a in announcements" class="list-group-item">
<a href="#/announcements">{{a.title}}</a>
</li>
</ul>
…
We also define the parameter in the url in the state.
url:'/announcements/:a',
The final version is shown in the picture below.
We can now define the index.html page parameter. We can assign the announcement id as a parameter.
<a href="#/announcements/{{a.id}}">{{a.title}}</a>
The final version is shown in the picture below.
Step 4: to set up the routing controller and use angularjs service for communication between the controller.
In routing, the controller is used to access the parameters or send data to the page.
The $ stateParams object is used to access the parameters with the ui.router.
The $ StateParams object is defined in the controller function and the parameter identified by the state object is accessed after the point.
In the following code snippet I showed the creation of the controller and accessing the parameters with $stateParams.
In script.js
app.controller('announcementsCtrl',['$scope','$stateParams',function($scope,$stateParams)
{
$scope.announcementId=$stateParams.a;
}]);
I have defined the announcements array in the controller named myCtrl but in announcement.html I need to access inside announcementsCtrl in order to use announcement's content.
I need to create a service to communicate between the two controllers.
In script.js
app.service('transporterService', function() {
var List = [];
this.addList = function(newList) {
List.push(newList);
};
this.getList = function(){
return List;
};
});
I have defined two functions in transporterService. The addList function adds elements to the list of services. The getList function shares the list of services with the outside world.
I need to load the announcements list to service in myCtrl . I need to load transporterService myCtrl before.
In myCtrl
app.controller('myCtrl',['$scope','transporterService',function($scope,transporterService){
…
transporterService.addList($scope.announcements);
}
Let's use the getList function to load the service's announcementsCtrl
In announcementsCtrl
app.controller('announcementsCtrl',['$scope','$stateParams','transporterService',function($scope,$stateParams,transporterService){
…
$scope.List=transporterService.getList();
}
We can now access the announcement content with announcement id. I'll create a second list and use the find function to add it to this list only by the parameterized id.
$scope.List2 = $scope.List[0].find(i => i.id == $scope.announcementId);
If we write in the announcement.html page the contents of the newly created list, we will complete the routing process.
In announcement.html
<div>
{{List2.content}}
</div>
When announcement2 is clicked, content2 is printed. We can print the content on the screen without clicking.
If you change the url part of the screen manually and press enter, it will write it's content on the screen.
Step 5: Precautions for url errors and routing home page.
We do not want to manually check these operations, but we must be prepared to manually intervene by the end user.
If there is a misspelling in the url, we can warn the user by routing.
We need to write otherwise in the state object for this operation.
In script.js
.state('otherwise',{
url:"*path",
template:"404 error page"
});
When there is a misspelling, the page will now print 404 error pages.
If we want the home page to be redirected we need to set the url url to empty.
.state('home',{
url:'/',
template:"Home Page"
})
We need to match the URL in index.html with the url in the href attribute state of tag a.
<a href="#/">Home</a>
Conslusion
With this example you can now use ui.router with parameters. We can capture the harmony within the same data using different pages. We can implement advanced web applications without data loss.
Thank you for your interest.
Curriculum
What is ui-router in Angularjs
Proof of Work Done
https://github.com/pckurdu/How-to-use-the-parameters-when-ui-routing-in-angularjs