States and Navigation

Samarth Agarwal
A free video tutorial from Samarth Agarwal
Application/Web Developer, Instructor, Tech Enthusiast
4.3 instructor rating • 11 courses • 15,774 students

Lecture description

In this lecture. we will set up our states and the navigation URLs. This will allow us to create a multi-page Ionic App. We will navigate among these states as and when required.

Learn more from the full course

Ionic Framework: JumpStart

Create a Real-time Chat Application for Android and iOS using HTML, CSS and JS and the server backend as well, on Cloud.

03:32:26 of on-demand video • Updated January 2016

  • Create and deploy real-time mobile applications using HTML, CSS and JS.
  • Write Basic Server Code using Node.js.
  • Deploy code on Windows Azure Cloud.
  • Use ngCordova and Ionic Services
  • Use Socket.io for real-time communication.
  • Learn about Facebook Login in Ionic Apps
  • Debug your Web Apps using Chrome Developer Tools
English [Auto] So we have our application read here. This application is pretty much contained within our Index for this to my file. But real applications are not contained in one file. So what I'm going to do I have created a folder called templates and within this folder I've created two files one of the files is loggin Steimle and other file is Chad berdache T.M. loggin file is pretty much blank and just Grenadines and too bad with the text. And it also has a link to the chat page or the check template. Explain this later in this lecture. And third page is Chad British T.M. and this contains in its print tag with their text chat what we are going to do is use these two templates even if they're in their 30s. File as and when required. So we do not want any of the content in our body. And what we want is that loggin nerdish team will get loaded in in the British timin file as soon as the application is loaded and as and when they use the new year the app we can load and unload the chair. British D.M. template as well. So how do we do that in order to achieve this. We'll use the iron nav view back the iron boot bag Dix and DMO file and render the content of the image file as the content of that view. So if you're familiar with BHP or if you're familiar with Gartner This is similar to include mentor which takes a PC file and then injects it right into another fine. So we have a template in place. We have very very HTML file ready to pick the templates. Now all we need to do is try to have just file so that we can use the templates so we'll create a new config block and this will be a function that will take two parameters. The first parameter is straightforward. And the second parameter is you read get out provider so this will be a function. So what we'll do will create blue states so I'll type in state provider darte state and the name of this state will be loggin and it will contain two more properties and these properties will be paused as just an object. Those properties will be you are ill and will be slashed loggin this will wither you or that you'll see in the browser's address bar. If you try and run the application using on itself but if you try and run the application using an X dash dash l you'll not see any changes in the world no matter how many states you have. So make sure you're not tested. You run your application using only solve only will also specify a template do your own. This will be that you are on to our template file which is templates slash log and or DML. So we have a state we just copy and pasted to create another state for second it will be cardless checked it will have that you are checked and will have the file as Chad asked him if none of these match. If a user tries to navigate to any state other than these two states what we want is that the user should be taken to a state that we specify a right to use. You are allowed provider Dorte advise method to specify a state that the user will be taken to if they try to navigate to any state is specified here. For now we have our application here. Let's try and run this using an XO. So this application we have the log in page loaded because we had the log in text here and we have to go all link. The link tells me that it will take me to this user slash hash slash jet. So this is the user of the chat page that is specified in the log in the image file. The slash hash slash chair. There are other methodes that you can use to navigate within apps but we can use the anchor tag which is the simplest of all. Whenever you get from one state to another in the next world you will make our application look better and we'll try to implement some more functionality.