In the last tutorial we have seen how to use Sails REST apis with Angular JS , this time we’ll do a more advanced experiment. You might be familiar with fancy urls like
yourdomain.com/profile/username. What if this feature can be achieved in simple efforts , it would be nice right? So today we will learn about Angular Routing and i’ll be using Twiiter Bootstrap to spice up the website :) We’ll create two pages one which lists all employees and another on which shows employee profile (url - /profile/employeeid )
So lets get started.
We need to create a vanity URL here (without .html or .php etc in the url ). For that we use angular routing technique . In the newer editions of AngularJS , they recommend to use
angular-route.js file to achieve this .This can be found here . Click here for Angular Routes File.
Create a directory structure as listed below for Angular App
Now we move on to the Markup Section .Here is the first markup needed, the main page used for routing .
index.html can be seen as follows
Let us move to the first view :) . The main page which lists all employee details and the link to their profiles
$index gives the iterator offset of the repeated element (0..length-1).
The second view - profile view - which shows the details of a single person. Here we’ll use the API which we have generated in the second part of the tutorials . For those who haven’t seen the API view it here . Click here to view the API – findEmployeebyEmpnum. We will use the same api here also to search employee by his employee number.
ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.The attribute logic is set in the controller. We can now move on to the controller logic.
angular app employeeApp and include ngRoute for our routing purposes
Configure the app for routing as follows.
$routeProvider is used for routing purposes.
when adds new route definitions.
Points to note here : Here profile/:profileid is one of the routes where
profileid is the parameter passed (In /profile/123 profileid is 123). This parameter can be accessed in ProfileController using
$routeParams and can be accessed as
We will see this when ProfileController is explained.
We’ll move on to the controller logic now.
This is the same logic as we saw in last tutorial . We’ll now move on to the most awesome part of the tutorial Generating the views based on $routeparams.
We can have the code for the ProfileController first.
We are accessing the routeparameter using $routeParams in the controller . Our API call returns a data as follows .
notFound set to true if there are no employees with given employee number , Check this in the success function and set an errorFlag according . Here we’ll understand the power of
ng-show We have previously given attributes for ng-show as
notFound flag . We will show the table containing information of employee if
notFound is false .
This is achieved in the code as follows
notFound is trueshow Error Alert.
We can see the end result now. Lift the sails app and hit the browser with http://localhost/angularapp/ . You can see that it is redirected to http://localhost/angularapp/#/ . If this is done then the work you have done is correct . You will get a screen like this
You will get your employee list , click on any link and notice the URL structure right now . It will be something like this
Here your have created a fancy URL in short span of time . The Profile page will be like the one below
Now check the error page also . Check with the url
http://localhost/angularapp/#/profile/10000 or any other employee number which is not in the list .
It will now show a screen as seen below
Hooray!!! We have completed the routing part very easily. Next time we’ll discuss about the adapters in Sails Js and how you can tune it to use multiple databases - A hybrid database architecture with Sails having both relational databases like MySQL and non-relational databases like MongoDB. Thanks for reading and see you there :)
Update : The file for this tutorial can be seen here