In AngularJS, using the UI-Router library is a popular choice for managing application states and handling state parameters. Here’s a basic example of setting state parameters using AngularJS and UI-Router:
- Include AngularJS and UI-Router libraries in your project:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>
- Create an AngularJS module and configure states:
Define your AngularJS module and configure the states using $stateProvider:
JS
angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController'
})
.state('details', {
url: '/details/:id',
templateUrl: 'details.html',
controller: 'DetailsController'
});
$urlRouterProvider.otherwise('/home');
});
In this example, we define two states, home and details. The details state has a URL parameter called id specified using the syntax :id.
- Create controllers for your states:
JS
.controller('HomeController', function($scope, $state) {
$scope.goToDetails = function(id) {
$state.go('details', { id: id });
};
})
.controller('DetailsController', function($scope, $stateParams) {
$scope.id = $stateParams.id;
});
In the HomeController, we define a function goToDetails that navigates to the details state and sets the id parameter. In the DetailsController, we read the id parameter from $stateParams.
- Create the corresponding HTML templates:
home.html:
<div>
<h1>Home</h1>
<button ng-click="goToDetails(42)">Go to Details with ID 42</button>
</div>
details.html:
<div>
<h1>Details</h1>
<p>ID: {{id}}</p>
</div>
- Set up the main HTML file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view></div>
<script type="text/ng-template" id="home.html">
<!-- Include home.html content here -->
</script>
<script type="text/ng-template" id="details.html">
<!-- Include details.html content here -->
</script>
</body>
</html>
In this example, when you click the “Go to Details with ID 42” button on the home page, the application will navigate to the details state with the id parameter set to 42. The DetailsController reads the id parameter and displays it on the details page.
This is a simple example of setting state parameters using AngularJS and the UI-Router library. You can expand on this to manage more complex application states and pass multiple parameters between states.
