Using ui-router to control application flow

Developer
Aaron K Saunders
Size
3,448 Kb
Views
24,288
  1. Using ui-router to control application flow Previews
  2. Using ui-router to control application flow HTML Codes
  3. Using ui-router to control application flow JS Codes

How do I make an using ui-router to control application flow?

Http://stackoverflow.com/a/32447402/122313. What is a using ui-router to control application flow? How do you make a using ui-router to control application flow? This script and codes were developed by Aaron K Saunders on 25 September 2022, Sunday.

Using ui-router to control application flow Previews
IQ Test

Using ui-router to control application flow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using ui-router to control application flow</title>
</head>
<body> <html>
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<!-- define app -->
<body ng-app="app"> <!-- title bar --> <ion-nav-bar class="bar-stable nav-title-slide-ios7 "> <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"> </ion-nav-back-button> </ion-nav-bar> <!-- where the content from app will be rendered --> <ion-nav-view></ion-nav-view> <!-- templates for the html to be rendered --> <script id="home.html" type="text/ng-template"> <ion-view title="Home Page" class="header padding"> <ion-pane> <ion-content class="padding"> <ion-item class="item-text-wrap"> <h2 class="padding" style="font-size:larger"><strong> Showing use of ui-router to prevent route transition with the resolve functions in the router configuration</strong></h2> </ion-item> <ion-item class="item-text-wrap"> <p class="padding"> When you click this button, we will force the location service to return an invalid value, so the page should not transition</p> <button class="button button-assertive" ng-click="clicked(true)">Force Bad Location</button> </ion-item> <ion-item class="item-text-wrap"> <p class="padding"> When you click this button, we will force the location service to return a valid value, so the page should transition to successfully</p> <button class="button button-positive" ng-click="clicked(false)">Good Location</button> </ion-item> <ion-item> <pre>$stateChangeError</pre> <pre>{{errorInfo |json}}</pre> </ion-item> </ion-item> </ion-content> </ion-pane> </ion-view> </script> <script id="map-view.html" type="text/ng-template"> <ion-view title="Map View Page"> <ion-content class="padding"> <ion-item class="item-text-wrap"> <h2 class="padding" style="font-size:larger"><strong> This is Map View Page, we have recieved a good location so the route was resolved</strong></h2> </ion-item> <ion-item> <pre>$state.params from router</pre> <pre>{{$state.params |json}}</pre> </ion-item> <ion-item> <pre>location from GeoLocationService</pre> <pre>{{location |json}}</pre> </ion-item> </ion-content> </ion-view> </script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Using ui-router to control application flow - Script Codes JS Codes

angular.module('app', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { // defining application states $stateProvider.state('home', { url: '/', templateUrl: 'home.html', controller: 'homeCtrl' }) .state('map-view', { // the url to get here, specify the parameter forceBad // when using this url url: '/map-view/:forceBad', // the html template templateUrl: 'map-view.html', // the controller with the logic controller: 'mapViewCtrl', // a set of object that must resolve to transition to next state resolve: { // we are calling the service to get a location and resolving // the promise, the location value can be injected into the // controller so it can be used in the business logic location: function(GeoLocationService, $q, $stateParams) { return GeoLocationService.getLocation($stateParams.forceBad) .then(function(_response) { // successful response from GeoLocationService is returned return _response; }, function(_error) { alert('error getting location') // this will force state change error to be generated return $q.reject("no location found"); }); } } }); // default state $urlRouterProvider.otherwise('/'); }).run(function($rootScope, $state) { $rootScope.$state = $state; $rootScope.$on('$stateChangeError', function(evt, to, toP, from, fromP, err) { var routeStr = from.name + ":" + angular.toJson(fromP) + '->' + to.name + ":" + angular.toJson(toP); console.error(routeStr); // evt.preventDefault(); // set some info on the scop so we can render it in the display evt.targetScope.errorInfo = { error: err, routeParams: toP, routeStr: routeStr }; }); }) // A Service .service('GeoLocationService', function($state, $q) { return { /** * when passed true, the service will not return a location */ getLocation: function(_forceBad) { var deferred = $q.defer(); setTimeout(function() { // for testing purposes, if _forceBad was passing as true // then we will force a reject on thr promise if (_forceBad === "true") { return deferred.reject({ type: 'error', }); } // for testing purposes, if _forceBad was passing as false // then we will resolve the promise with a value return deferred.resolve({ type: 'location', lat: 100, lng: -100 }) }, 200); return deferred.promise; } } }) // Controller for the main screen .controller('homeCtrl', function($scope, $state) { // click a button either force bad result or get good result $scope.clicked = function(_forceBad) { alert('clicked with forceBad ' + _forceBad); // try to go to the next state, passing parameter $state.go('map-view', { forceBad: _forceBad }); } }) /** * @param $scope - gets injected * @param location - gets passed in from resolve */ .controller('mapViewCtrl', function(location, $scope) { console.log('mapViewCtrl ' + JSON.stringify(location)); // set location info that was provided by the GeoLocationService $scope.location = location; });
Using ui-router to control application flow - Script Codes
Using ui-router to control application flow - Script Codes
Home Page Home
Developer Aaron K Saunders
Username aaronksaunders
Uploaded September 25, 2022
Rating 3
Size 3,448 Kb
Views 24,288
Do you need developer help for Using ui-router to control application flow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aaron K Saunders (aaronksaunders) Script Codes
Name
Leaflet Map Directive in Ionic
A Pen by aaron k saunders
A Pen by aaron k saunders
Google Map Directive in Ionic
Ionic 2 Tabs Starter
A Pen by aaron k saunders
Promise sample for Cross-Platform mobile application class
Nested ng-repeat in AngularJS with Checkboxes
Firebase Login Example
Proper way to manage ng-options selections
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!