AngularJS Simple Template Example

AngularJS Simple Template Example

by Mohammad Gouse

HTML

<script type="text/ng-template" id="embedded.home.html">
  <h1> Home </h1> {{greeting}}
</script>
<script type="text/ng-template" id="embedded.about.html">
  <h1> About </h1> {{content}}
</script>
<div>
  <div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>

  <div ng-view></div>
</div>

JavaScript

var templatesExample = angular.module('FunnyAnt.Examples.Templates', []);
templatesExample.controller('HomeController', function($scope) {
  $scope.greeting = "Welcome to the application.";
});
templatesExample.controller('AboutController', function($scope) {
  $scope.content = "As a software developer, I've always loved to build things...";
});

templatesExample.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'embedded.home.html',
    controller: 'HomeController'
  }).
  when('/about', {
    templateUrl: 'embedded.about.html',
    controller: 'AboutController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});