AngularJS Simple Template Example

AngularJS Simple Template Example

HTML

<script type="text/ng-template" id="embedded.home.html">
    <h1> Home </h1>
    {{greeting}}
    {{bool}}
</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.";
    $scope.bool = false;
});
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'
    });
});