AngularJS - Example - Ng - Include

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
  <title>Example - example-ng-include-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

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

  
</head>
<body ng-app="includeExample">
  <script type="text/ng-template" name="template3.html" id="template3.html">
    this is third template
  </script> 
  <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>
  <hr/>
  <div class="slide-animate-container">
    <div class="slide-animate" ng-include="template.url"></div>
  </div>
<button ng-click="getDynamicTpl();">Click to getTemplate</button>
<a ng-click="testTpl = 'test.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include="testTpl"></div>  
</div>

</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

(function(angular) {
  'use strict';
angular.module('includeExample', ['ngAnimate'])
  .controller('ExampleController', ['$scope','$templateCache', function($scope,$templateCache) {
     //$templateCache.put('test.html', 'Hello from template cache!');
     $scope.tplVersion = 0;
    $scope.getDynamicTpl = function (){
      var tpl = "Hello from template cache!!! <input type='text' ng-model='tplVersion' id='mytextbox'>"
      $scope.tplVersion +=1;
      $templateCache.put('test.html', tpl );
      console.log("$scope.tplVersion = " + $scope.tplVersion );
      return 'test.html';
    }
    $scope.templates =
      [{ name: 'template1.html', url: 'template1.html'},
       { name: 'template2.html', url: 'template2.html'},
       { name: 'template3.html', url: 'test.html'}
       ];
    $scope.template = $scope.templates[0];
  }]);
})(window.angular);

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

Content of template1.html

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Content of template2.html

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

.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 {
  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;
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

var templateSelect = element(by.model('template'));
var includeElem = element(by.css('[ng-include]'));

it('should load template1.html', function() {
  expect(includeElem.getText()).toMatch(/Content of template1.html/);
});

it('should load template2.html', function() {
  if (browser.params.browser === 'firefox') {
    // Firefox can't handle using selects
    // See https://github.com/angular/protractor/issues/480
    return;
  }
  templateSelect.click();
  templateSelect.all(by.css('option')).get(2).click();
  expect(includeElem.getText()).toMatch(/Content of template2.html/);
});

it('should change to blank', function() {
  if (browser.params.browser === 'firefox') {
    // Firefox can't handle using selects
    return;
  }
  templateSelect.click();
  templateSelect.all(by.css('option')).get(0).click();
  expect(includeElem.isPresent()).toBe(false);
});

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/