AngularJS:JSON data display

Parse a JSON object and display data inside view template.

by aman1981

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.js"></script>
<div ng-app="myApp">
  <div ng-controller="PeopleCtrl as vm">
   

    <br>

    <script type="text/ng-template" id="page1.html">
      <h1>Page 1</h1>
    </script>

    <script type="text/ng-template" id="page2.html">
      <h1>Page 2</h1>
    </script>

    <div>
      <div id="navigation">
        <a href="#/page1">Page 1</a>
        <a href="#/page2">Page 2</a>
      </div>

      <div ng-view></div>
    </div>


  </div>
</div>

<br><br>

CSS

table {
  border: 1px solid #666;
  width: 100%;
}

th {
  background: #f8f8f8;
  font-weight: bold;
  padding: 2px;
}

JavaScript

angular.module('myApp', ['ui.router'])

  .controller("PeopleCtrl", function($http) {

    var vm = this;
    vm.name = "John";

  })

  .controller('Page1Controller', function($scope) {})

  .controller('Page2Controller', function($scope) {})

  .config(function($stateProvider, $urlRouterProvider) {

    // For any unmatched url, send to /route1
    $urlRouterProvider.otherwise("/page1")

    $stateProvider
      .state('page1', {
        url: "/page1",
        templateUrl: "page1.html",
        controller: "Page1Controller"
      })
      .state('page2', {
        url: "/page2",
        templateUrl: "page2.html",
        controller: "Page2Controller"
      })
  });