Search code examples
angularjsangularjs-directiveangularjs-ng-include

Very Simple ng-include not working

I need to perform a very simple " ng-include ", and I cannot get this working. Any help would be much appreciated.

Here is the part I want help with

<div class="slide-animate" ng-include="'template1.html'"></div>

I have used the single quotes as mentioned elsewhere. And, I have no idea why this is not working. Could it be the initialisation of the Angular framework ? Could it be any other conflicting feature in the code ?

Any Here is the full code.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example - example-example83-production</title>
    <style>
    .slide-animate-container {
        position:relative;
      background:white;
      border:1px solid black;
      height:40px;
      overflow:hidden;
}

.slide-animate {
  padding:10px;
}

.slide-animate.ng-enter, .slide-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  padding:10px;
}

.slide-animate.ng-enter {
  top:-50px;
}
.slide-animate.ng-enter.ng-enter-active {
  top:0;
}

.slide-animate.ng-leave {
  top:0;
}
.slide-animate.ng-leave.ng-leave-active {
  top:50px;
}

  </style>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
  <script>

      (function(angular) {
          alert("hello");
angular.module('includeExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];
    $scope.template = $scope.templates[0];
    $scope.name = "World";
  }]);
})(window.angular);

  </script>

</head>
<body ng-app="includeExample">
  <div ng-controller="ExampleController">
      <select ng-model="template" ng-options="t.name for t in templates">
         <option value="">(blank)</option>
      </select>
      url of the template: <code>{{template.url}}</code>
      <p>Hello, {{name}}! </p>
      <div class="slide-animate-container">
            <div class="slide-animate" ng-include="'template1.html'"></div>
      </div>
  </div>
</body>
</html>

Thank you in advance...

Solution

  • The ng-include makes the XHR call so if you are working with file server then it will not work and it worked in server because the server is capable of handling the HTTP . you can create a simple web server using Grunt plugin https://github.com/devpaul/grunt-devserver .