javascript - Routing using $stateProvider in angular js , the page is not getting load when tried to route using states -

i want load page on click of menu item of menu state gets reflected url of browser , content of page doesn't gets loaded, far have studied tutorial states declared , code not showing me error also.

here route.js file

app.config(function config($stateprovider) {     $stateprovider.state("index",{         url:"",         controller:"mainctrl",         templateurl:"templates/home/home.html"     }),         $stateprovider.state("development",{             controller:"employeectrl",             templateurl:"templates/employee/employee.html"         });  }) 

this list in home page on href have declared states index state working fine.

 <ul class="nav navbar-nav">                 <li class="active"><a href="#/development">development</a></li>                 <li><a href="#/design">design</a></li>                 <li><a href="#/exercise">exercise</a></li>                 <li><a href="#/humor">humor</a></li>             </ul> 

here code page employee.html content want display when development state fulfilled.

<div>     <input type="text" ng-model="searchtext">     <table>         <tr ng-repeat="emp in employee.data | filter:searchtext"></tr>         <td>{{emp.firstname}}</td>         <td>{{emp.lastname}}</td>     </table> </div> 

state should differentiated on base of url's, need add url parameter in state, should url: '/development', development state, when url changes in browser detect $stateprovider , load specified controller & template state definition.

code

$stateprovider.state("development",{     url: '/development',     controller:"employeectrl",     templateurl:"templates/employee/employee.html" }); 

you should use ui-sref directive make sure href has been created properly. need specify statename in ui-sref render value state url ui-sref="development" href="#/development"