AngularJS Simple Router Example

AngularJS Simple Router Example

HTML

<script type="text/ng-template" id="home.html">
    <h1> {{heading}} </h1>
</script>

<script type="text/ng-template" id="register.html">
    <h1> {{heading}} </h1>
    
    <form role="form" ng-submit="register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <!-- ng-model responsible for storing values -->
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
</script>

<div> 
      <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/register">Register</a>
      </div>
    
    <div ng-view></div>
</div>

JavaScript

var app = angular.module('RegisterRouting', []);

app.controller('HomeController', function ($scope) {
   $scope.heading = "Home";
});

app.controller('RegisterController', function ($scope) {
   $scope.heading = "Register";
   
   $scope.register = register;
   
   function register(){
     // this is calling the register method of the Authentication service
     alert("register view call");
   }
});

app.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    }).
    when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});