In the last tutorial we have seen a new State but it just navigated us to a new Page with text “More”. So in this tutorial we are going to see how we are going to display the “More” page with bigger image of the car and the description of the car and as well a “Back Button” for going back to home page. Well, I am going to break the above work in three steps.
After all the work done in the last two tutorials we are about to do the real stuff which we need to do. In our app on the right side we always see the description of the car and now we are going to include a button labeled “More” and on click of the “More” we are to navigate to a new page. Let’s do that one by one.
In the last tutorial we have seen there happened to be a change in the url. The url changed from http://127.0.0.1:58586/index.html to http://127.0.0.1:58586/index.html#/ . This change is because of the introduction of the ui-router and its default state mechanisms. By default ui-router uses # tag for navigation and this behavior needs to be overridden. To bring back to the normal url without # tag we need to implement the following steps.
Well before going in to this tutorial I am assuming you are using brackets to run these sample applications. The reason I am asking is because brackets has an inbuilt webserver which runs our app from the localhost like below
Well so far we have brushed the basics of Angular and its very minimal basics and now I want to create a Sample project to illustrate the rest of the features of Angular to get a better perspective of the framework. Great, I am thinking of creating a Small Application, which will display some cars and its description. This application basically creates a list of cars with titles below and its description on the right hand side with a “More” button. By end of this tutorial you will get a clear understanding of Angular Services, Custom Directives, routing and of course how to use and mix various components of angular in to one application.
So as per our last blog, we have bootstrapped Angular and now we will start writing some code for beginners. If you take any UI there will always be user actions. So we will start wiring some of the user actions. Before getting in to code its important to understand there are several inbuilt ng events bundled with angular. So in this example we will how we handle a click event in angular and update some data on click of a button.