ui.router in details

described most of the features of $stateprovider here

by Samar Pattanayak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    {{title}} |
    <a ui-sref="home">Home</a> | <a ui-sref="about">About</a> | <a ui-sref="details">Details</a>
    <p>
      <a ui-sref="details.info">Book Info</a> |
      <a ui-sref="details.author">Author Info</a> |
      <a ui-sref="mutipleview">Multiple View Demo</a>
    </p>
    <div ng-show="$state.current.name">State name : </div> <strong>{{$state.current.name}}</strong>

    <script type="text/ng-template" id="detail.html">
      <h2> Student Details </h2>
			<input type="button" value="Refresh" ng-click="refresh()"/>
      <ul ng-repeat="de in studentDetail">
        <li>{{de.name}}</li>
        <li>{{de.age}}</li>
        <input type="button" ui-sref="edit({id: '{{de.age}}', name :'{{de.name}}'})" id="edit" value="Edit " />
      </ul>
      <ui-view></ui-view>
    </script>
    <script type="text/ng-template" id="authorDetail.html">
      <h3>Author Info</h3>
    </script>
    <script type="text/ng-template" id="editDetail.html">
      <h3>Edit Your Details</h3>
      <span>ID : <strong></span><span ng-bind="id"></span></strong>
      </br>
      <span>Name : <strong></span><span ng-bind="name"></span></strong>
    </script>
    <div>
      <div ui-view="first"></div>
      <div ui-view="second"></div>
      <div ui-view="third"></div>
    </div>
    <script type="text/ng-template" id="firstview.html">
      <h4>i am from first view</h4>
    </script>
    <script type="text/ng-template" id="thirdview.html">
      <h4>i am from third view</h4>
      <a href="https://www.google.com">Go to ...</a>
    </script>
    <div ng-show="$state.current.name" style="border:2px solid brown ">
      <ui-view></ui-view>
    </div>

  </div>
</div>

CSS

li {
  border: 2px soild brown;
}

JavaScript

var app = angular.module("myApp", ['ui.router']);
app.controller("myController", function($scope) {
  $scope.title = "UI Router"
})
app.controller("detailController", function($scope, $state) {
  $scope.studentDetail = [{
    name: "Samar",
    age: 23
  }, {
    name: "Samar2",
    age: 24
  }];
  $scope.check = "Ji"
  if ($state.current.name == "details") {
    console.log("details fired")
  }
  $scope.refresh= function(){
  	console.log($state.current);
    console.log($state.$current);
  
  	$state.reload();
  }
})

app.run(function($rootScope, $state) {
  $rootScope.$state = $state;
  $rootScope.$on("$stateChangeStart", function(ev, ts, tp, fs, fp) {
    //console.log(ev);
    //console.log(ts.resolve.getValue());
    //console.log(tp);
    //console.log(fs);
    //console.log(fp);
    if (ts.url == "/details") {
      ts.url = "/details/changed"

    }
    if(ts.url=="/details/info" || ts.url=="/details/changed"){
    	console.log(ts.data.data_in_details);
    }

  })
  $rootScope.$on("$locationChangeStart", function(ev, ls, le) {
    //console.log(ls);
    console.log(le);
  })
  $rootScope.$on("$locationChangeSuccess", function(ev, ls, le) {
    //console.log(ls);
    console.log(le);
  })
  $rootScope.$on("$stateChangeSuccess", function(ev, ts, tp, fs, fp) {
    console.log(ts); 
    if (ts.url == "/home") {
      $state.go("about")
    }

  })
})
	
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.decorator('views', function(state, parent) {
    var result = {};
    var views = parent(state);
    //console.log(`state ${state}`);
    angular.forEach(views, function(config, name) {
    	//console.log(name)
      //console.log(state.name)
      //console.log(config)
      var autoName = (state.name + "." + name).replace(".", "/");
      config.templateUrl = config.templateUrl || "/partials/" + autoName + ".html";
      result[name] = config;
    });
    //console.log(result)
    return result;
  })
 ...