AngularJS ng-include

by Danish Farman

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<!--<div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url" onload='myFunction()'></div>
  </div>-->
  
<div ng-app="app">
  <ng-view></ng-view>
</div>

<!-- app.html -->
<script type="text/ng-template" id="app.html">
  <h2>{{model.message}}</h2>
</script>

<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
  Content of template1.html
</script>
 
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
    <p ng-class="color">Content of template2.html</p>
</script>

CSS

.red { color:red; }

JavaScript

/*function Ctrl($scope) {
    $scope.templates = [{
        name: 'template1.html',
        url: 'template1.html'},
    {
        name: 'template2.html',
        url: 'template2.html'}];
    $scope.template = $scope.templates[0];

    $scope.myFunction = function() {
        $scope.color = 'red';
    }
}*/
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'app.html',
    controller: 'AppCtrl'
  });
}]);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.model = {
    message: "This is my app!!!"
  }
}]);