AngularJS 1.2.x: ngView and ngRoute

http://angularjs.org/

by roy barak

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>vgfdsgfgdsgfg</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>    
...

JavaScript

'use strict';

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

config(['$routeProvider', 

  function( $routeProvider) {

  // 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)

    }

}