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.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="myApp">
  <h1>Hello Plunker!</h1>

  <div ng-controller="Ctrl as vm">
    Hello, {{vm.name}}!
    <br> <br>
    <script type="text/ng-template" id="page1.html">
      <h1> Home </h1>
    </script>

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

    <div>
      <div id="navigation">
        <a href="#/page1">Home</a>
        <a href="#/page2">About</a>
      </div>

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


  </div>

JavaScript

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

app.controller('Ctrl', function() {
    var vm = this;
    vm.name = "John";
  })

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

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

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