Angular ngRoute Sample

var app = angular.module("Demo", ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "home.html",
      controller: 'mainController'
    })
   


});

app.controller('mainController', function($scope) {
  alert();
})

<!DOCTYPE html>
<html>

<head>
  <title>Injecting view</title>
  <link href="style.css" rel="stylesheet" />
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />

</head>

<body ng-app="Demo">
  <p>Hey! WebSite Header</p>
  <p><a href="#/">home</a></p>
  
  <p>Click on the links to change the content.</p>
  <p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p>
<div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
  <script src="app.js"></script>

</body>

</html>

.ngMessagesClass {
    height: 50px;
    width: 350px;
}

.ngMessagesClass.ng-active-add {
    transition: 0.3s linear all;
    background-color: red;
}

.ngMessagesClass.ng-active {
    background-color: red;
}

.ngMessagesClass.ng-inactive-add {
    transition: 0.3s linear all;
    background-color: white;
}

.ngMessagesClass.ng-inactive {
    background-color: white;
}

.ngMessageClass {
    color: white;
}

.ngMessageClass.ng-enter {
    transition: 0.3s linear all;
    color: transparent;
}

.ngMessageClass.ng-enter-active {
    color: white;
}

.ngMessageClass.ng-leave {
    transition: 0.3s linear all;
    color: white;
}

.ngMessageClass.ng-leave-active {
    color: transparent;
}


<div layout="column" layout-fill>
  <H1>HOME</H1> 
</div>