Ionic Framework is heavily used for developing hybrid apps.A user is creating a different kind of application and in their application, there are so many screens.So if you want to navigate from one screen to another screen you have to manage url in this framework.So today I am going to discuss this topic briefly with code example.
I use the UI-Router to navigate between view states in our application. By view states, I mean screens composed of template files
Let’s start by creating a new Android and iOS Ionic project.So first install ionic 1 and create a blank project.
ionic start IonicProject blank --type ionic1
Here we are creating a simple blank project.If you want to add drawer menu or tab menu, then use the below command.
For tab view
ionic start IonicProject tabs --type ionic1
For sidemenu
ionic start IonicProject sidemenu --type ionic1
Run the app
You can run the app in your web browser or emulator or in your real device.
cd IonicProject ionic platform add android ionic platform add ios ionic cordova emulate android
Manage url ionic
In ionic application UI-Router operates on application states, where each state might represent a new screen in your application.
Its very simple to manage UI-Route.Follow the code below.
angular.module('starter', ['ionic','ionic-toast','ngCordova']) .config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){ $stateProvider .state('login',{ url : '/login', templateUrl : 'template/login.html', controller : 'loginController' }) .state('register',{ url : '/register', templateUrl : 'template/register.html', controller : 'registerController' }) .state('home',{ url : '/home', templateUrl : 'template/home.html', controller : 'homeController' }) $urlRouterProvider.otherwise('/login'); });
There are three states which represent three screens in our app. We have the following screens:
1> A login screen. This is the default screen when the application loads.
2> A screen for registration.
3> A screen for after login that is home screen.
Here each state three-part.
url
The URL route that can be accessed via href properties.
templateUrl
In this section we call the template file.
controller
In this section we call the controller that will be used for view.