<!--HTML-->
<div ng-controller="showTheName">
  <h1 ng-bind="name"></h1>
</div>

/*js*/
var app = angular.module("routingDemoApp",[]);
app.factory("showName",function(){
  var NameFactory = {};
  NameFactory.name = "张三";
  return NameFactory;
});
app.controller("showTheName",function($scope,showName){
  $scope.name = showName.name;
});

<!--html-->
<div class="panel panel-default" ng-controller="AjaxJson">
  <div class="panel-body">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <td>名</td>
        <td>种类</td>
        <td>价格</td>
        <td>保质期</td>
      </tr>
      </thead>
      <tbody>
      <tr ng-hide="products.length">
        <td colspan="4" class="text-center">没有数据</td>
      </tr>
      <tr ng-repeat="item in products">
        <td ng-bind="item.name"></td>
        <td ng-bind="item.category"></td>
        <td ng-bind="item.price"></td>
        <td ng-bind="item.expiry"></td>
      </tr>
      </tbody>
    </table>
    <p><button ng-click="LoadJson()">加载JSON数据</button></p>
  </div>
</div>

/*JS*/
app.factory("loadJSON",function($http,$q){
  var loadJson ={};
  loadJson.loadjson = function(){
    var d = $q.defer();
    $http({
      url:"json.json",
      method:"GET"
    })
      .success(function(response){
      d.resolve(response);
    })
      .error(function(){
        d.reject(alert("出错"));
      });
    return d.promise;
  };
  return loadJson;
});
app.controller("AjaxJson",function($scope,loadJSON){
  $scope.LoadJson = function () {
    loadJSON.loadjson().then(function(data){
      $scope.products = data;
    },function(){
      alert("出错");
    })
  }
});