ui-router work

http://angularjs.org/

by soumya gangamwar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-controller="Ctrl1">
This is state1
<a href="javascript:void(a)" ui-sref="state2({id:2})">submit</a>
</div>


 <div ui-view="">
 </div>

CSS

nav{
    margin-bottom: 1em;
}

JavaScript

var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "contacts",
        template: "<p>State 1</p>",
        controller: "Ctrl1"
      }).state("state2", {
        url: "/list",
        template: "<p>State 2</p>",
        controller: "Ctrl2"
      });
});

var ctrls = angular.module("AppCtrls", []);

ctrls.controller( "Ctrl1", function($scope) {
    console.log("Ctrl1 loaded.");
});

ctrls.controller( "Ctrl2", function($scope) {
    console.log("Ctrl2 loaded.");
});