AngularJS: Create routing mechanism without URL rewriting

Shankar Raman 10:42
Hi Guys,

You can find how you can create routing mechanism without rewriting URL.

index.html
<body>
    <div my-parent>
      <a my-href="test.html">Test</a>
      <hr/>
      <my-view></my-view>
    </div>
 </body>


app.js
var app = angular.module('plunker', ["myHrefModule"]);

angular.module("myHrefModule",[])
.directive("myParent", function(){
  return{
    controller:function(){
      this.hello = function(data){
        this.dependent.childFun(data);
      }
    }
  }
})
.directive("myHref", function($http){
  return{
    require:"^myParent",
    link:function($scope, element, attrs, ctrls){
      element.on("click", function(){
        $http({
          method:"GET",
          url:attrs.myHref
        }).success(function(data){
          ctrls.hello(data);
        }).error(function(data){
          ctrls.hello(data);
        })
      })
    }
  }
})
.directive("myView", function($sce){
  return{
    require:"^myParent",
    link:function($scope, element, attrs, ctrls){
      $scope.html1;
      $scope.childFun = function(data){
        $scope.html1 = $sce.trustAsHtml(data);
      }
      ctrls.dependent = $scope;
    },
    template:"



"
  }
})

test.html
<div style="background:lightgrey">
Hello World  
</div>


Plunker: https://plnkr.co/edit/U70h5q3NwpZ6FvZNs9PE?p=preview

Good Day :)
Tags:

Post a Comment

0 Comments