AngularJS 1.2.x: ngView and ngRoute - JSFiddle - JSFiddle

http://angularjs.org/

by Oscar Daniel Requena Seijas

HTML

<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- MENU -->
<div class="text-center">
  <h2>ngRoute/ngView demo</h2>

  <div class="btn-group">

    <a class="btn btn-primary" href="#/homepage">HOME</a>
    <a class="btn btn-primary" href="#/users">USERS:</a>

    <a class="btn  btn-default" href="#/users/thomas">Thomas</a>
    <a class="btn btn-default" href="#/users/fabio">Fabio</a>
    <a class="btn btn-default" href="#/users/lorenzo">Lorenzo</a>
    <a class="btn btn-primary" href="#/contacts">CONTACTS</a>


  </div>
</div>

<hr>

<!-- VIEW CONTAINER -->
<div ng-view></div>




<!-- 
Inline Templates (Partials) 
In a real scenario you will create several external html files
-->

<!-- HOMEPAGE VIEW -->
<script type=text/ng-template id=partial/homepage.html>

  <div class="jumbotron">
    <h1>{{title}}</h1>
    <p class="lead">{{news}}</p>
  </div>

</script>

<!-- USERS VIEW  -->
<script type=text/ng-template id=partial/users.html>
  <h2>ALL USERS</h2>

  <!-- SEARCH BOX -->
  <input type="search" class="form-control" ng-model="search" placeholder="search user">

  <hr>

  <ul class="list-group">

    <!--USER LIST-->
    <li class="list-group-item" ng-repeat="item in users | filter: search">

      <!--RANDOM IMAGE-->
      <img src="http://lorempixel.com/50/50/sports/{{$index}}" class="img-circle">

      <!--LINK TO USER DETAILS-->
      <a ng-href="#/users/{{item}}">{{item}}</a>
    </li>

  </ul>
</script>

<!-- USER DETAILS -->
<script type=text/ng-template id=partial/user.html>
  <h2>USER VIEW: {{username}}</h2>
</script>

<!-- CONTACTS -->
<script type=text/ng-template id=partial/contacts.html>
  <div class="jumbotron">Contact form</div>
</script>

JavaScript

'use strict';

/* App Module */
angular.module('demoApp', ['ngRoute']).

config(['$routeProvider',

  function($routeProvider) {tele

    // Define routes 
    $routeProvider.
    when('/homepage', {
      templateUrl: 'partial/homepage.html',
      controller: HomePageCtrl
    }).

    when('/users', {
      templateUrl: 'partial/users.html',
      controller: UsersListCtrl
    }).

    when('/users/:id', {
      templateUrl: 'partial/user.html',
      controller: UsersDetailCtrl
    }).

    when('/contacts', {
      templateUrl: 'partial/contacts.html',
      controller: ContactPageCtrl
    }).

    otherwise({
      redirectTo: 'homepage'
    });


  }
]);





/**
 * Homepage controller
 */
function HomePageCtrl($scope) {
  $scope.title = "Hello AngularJS!"
  $scope.news = "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
}



/**
 * User List Controller
 */
function UsersListCtrl($scope) {
  $scope.users = ["Lorenzo", "Thomas", "Fabio", "John", "Pluto", "Peter"]
}



/**
 * User Details Controller
 */
function UsersDetailCtrl($scope, $routeParams) {

  // Get rider ID from the url
  $scope.username = $routeParams.id;
}


/**
 * Concat Page Controller
 */
function ContactPageCtrl($scope) {

  $scope.signin = function() {

    /*
     NOTE: here you might call the server side service to login
     */

    // Display Error
    $scope.errorMsg = true;

    alert("LOGIN: " + $scope.username + " - " + $scope.password)

  }

}