Routes in Angular

Hi Friends,

Now in this section we’ll discuss more about routes it’s roles and how in SPA app, routes are key ingredient. Below is a sample snapshot of sample SPA app.

So, we have when View1 is clicked, @ that instant may be there is another view which is having link on 1st view like “/View1”. so,this will load that view. and then, when we click on a link that has View2 in the path; then that would load up View2 but it’s not going to load up the whole shell page. Angular will only load up the page that we want.

There’s two ways we can load views.

First is, the view could be embedded as a script template in the actual shell page and then we could just tell instruct Angular with template id to load.

The second way is we can have the same on the server and we might actually have all these Views. we can also refer the same as partial page as in MVC, because they’re part of a page. we can instruct Angular with the template url which am interested in to load and then we can give this URL to the server.

Now, i’ll create three different views as in html files in my solution folder so that the same can be embedded in the shell page. So, if you can see the snippet below how i used routing is basically i have defined one config section where in i have declared all the routing mechanism.

Now, I have also written one small snippet to add the employees which could be seen in the next snapshot. This function will simply push the data into an array which is basically in memory data, so when you refresh the same it will wipe out only static data which is written on the page that will remain.

Now, i have cleared the div which you could see in the snippet and subsequently i have added three different views View1, View2 and View3. Also, View 1 has got the functionality to add a new employee. so for that I have used ng-click attribute just to handle the click event of button and then i have written the same function in the demoapp.html under the simple controller where in $scope has been passed in becuase $scope is the only way to communicate between controllers and view. so, if you see this function this is simply assigning the new values which is provided by the user to the existing attributes and hence getting added in the screen. Below are the screenshots of the sample Views.