ui-router work

http://angularjs.org/

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>
<nav>
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
</nav>

<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: "#",
    templateProvider: function($http) {
    	return $http.get('https://httpbin.org/get')
      	.then(function(response) {
        	return JSON.stringify(response.data);
        });
    },
    controller: "Ctrl1"
  }).state("state2", {
    url: "#",
    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.");
});