Question

我正在尝试构建一个具有动态JSON内容的演示应用程序，需要在应用程序加载时缓存，以便可以立即访问URL（路由器ui）。

＆＃34;查看Jack Burton的信息＆＃34;顶部的链接仅在之前已经加载后显示他的信息（即使这样，它也很麻烦）：

示例plunker：http://plnkr.co/edit/xIzq8cy4ZsZC9Dz5Cbpv?p=preview

我需要访问有关＆＃34; person＆＃34;的内容。从整个应用程序的其他链接，我猜测应用程序内的网址，不知道最佳做法是什么。

谢谢！

HTML

index.html

  <div class="row">
    <div class="col-sm-12">
      <a ng-href="#/" class="btn-link">Home</a> | 
      <a ng-href="#/jack-burton">View Info for Jack Burton (Only works after it's cached)</a>
      <div class="well" ui-view></div>
    </div>
  </div>


home.html

  <h1>People</h1>

  <ul class="list-unstyled">
    <li ng-repeat="person in people">
      <a ng-href="#/{{ person.url }}" ng-click="setPeopleContent(person)">
        {{person.name}}
      </a>
    </li>
  </ul>

person.html

   <h1>{{peopleContent.name}}</h1>

    <section id="contact" ng-if="peopleContent.hasContact">
      <h4>Contact Info</h4>
      <p ng-repeat="item in peopleContent.contact" ng-if="contentExists(item.address)">
        Address: {{item.address}}
      </p>
      <p ng-repeat="item in peopleContent.contact" ng-if="contentExists(item.phone)">
        Phone: {{item.phone}}
      </p>
      <p ng-repeat="item in peopleContent.contact" ng-if="contentExists(item.email)">
        Email: {{item.email}}
      </p>
    </section>

    <section id="pastJobs" ng-if="peopleContent.hasPastJobs">
        <h4>Past Jobs</h4>
        <p ng-repeat="item in peopleContent.pastJobs" ng-if="contentExists(item.job)">
          Job: {{item.job}}
        </p>
        <p ng-repeat="item in peopleContent.pastJobs" ng-if="contentExists(item.jobTitle)">
          Title: {{item.jobTitle}}
        </p>
    </section>

    <section id="goals" ng-if="peopleContent.hasGoals">

      <h4>Goals</h4>
      <ul class="list-unstyled">
        <li ng-repeat="item in peopleContent.goals" ng-if="contentExists(item.goal)">
          {{item.goal}}
        </li>
      </ul>

    </section>

JSON

  {
        "people": [

            {
                "name": "Alexander Supertramp",
                "url": "alexander-supertramp",
                "contact": [
                    {
                      "address": "Alaska"
                    }
                  ],
                "goals": [
                    {
                      "goal": "Climb Mt Everest"
                    },
                    {
                      "goal": "Travel in space"
                    },
                    {
                      "goal": "Become a rocket scientist"
                    }
                ]

            },
            {
                "name": "Gordon Bombay",
                "url": "gordon-bombay",
                "pastJobs": [
                    {
                      "job": "Hockey Coach",
                      "jobTitle": "Coach"
                    },
                    {
                      "job": "Hockey Player",
                      "jobTitle": "Goalie"
                    }
                  ],
                "goals": [
                    {
                      "goal": "Win the stanley cup"
                    },
                    {
                      "goal": "Be a cool guy"
                    }
                ]
            },
            {
                "name": "Jack Burton",
                "url": "jack-burton",
                "contact": [
                    {
                      "address": "China Town",
                      "phone": "555-555-getMyTruckBack",
                      "email": "porkchopexpress@gmail.com"
                    }
                  ],
                "pastJobs": [
                    {
                      "job": "Porkchop Express Driver",
                      "jobTitle": "Truck Driver"
                    }
                  ],
                "goals": [
                    {
                      "goal": "Get his truck back"
                    },
                    {
                      "goal": "Stay alive"
                    },
                    {
                      "goal": "Get with Kim Cattrall"
                    }
                ]
            },
                {
                "name": "Eric Roberts",
                "url": "eric-roberts",
                "contact": [
                    {
                      "address": "New York City",
                      "email": "ambulance911@gmail.com"
                    }
                  ],
                "goals": [
                    {
                      "goal": "Become a comicbook artist"
                    },
                    {
                      "goal": "Find that woman from the street"
                    },
                    {
                      "goal": "Stay alive"
                    },
                    {
                      "goal": "Don't get run over by an evil ambulance"
                    }
                ]
            }
        ]
    }

JS

var myapp = angular.module('demoApp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  $stateProvider
    .state('home', {
        url: "/",
        templateUrl: "home.html"
    })
    .state('person', {
        url: "/:person",
        templateUrl: "person.html"
    })

    $urlRouterProvider.otherwise("/")
});


function MainController($scope, $http, $stateParams) {

  $http.get('demo-data.json', { cache: true}).success(function(data){
    $scope.people = data.people;
  });

  $scope.person = $stateParams.person;

  $scope.setPeopleContent = function(person) {
    $scope.peopleContent = person;
    $scope.peopleContent.hasContact = ($scope.peopleContent.contact instanceof Array);
    $scope.peopleContent.hasPastJobs = ($scope.peopleContent.pastJobs instanceof Array);
    $scope.peopleContent.hasGoals = ($scope.peopleContent.goals instanceof Array);
  };

  // Checks if contentValue is undefined / exists
  $scope.contentExists = function(contentValue) {
    if(contentValue != undefined) {
      return true;
    }
  };

};

Answer 1

你应该使用localStorage或sessionStorage这里有更多信息：link

这是我如何使用角度的一个例子：

注意我将日期存储到上次我将数据保存到存储的时间（如果数据太旧，我会从服务器再次获取数据并将其保存到存储中）

  var retreivedStorageData = JSON.parse(window.sessionStorage.getItem("basicUserInfo"));
if (retreivedStorageData) {
    var differenceInMs = Math.abs(new Date() - new Date(retreivedStorageData.date));
    // check how old is data
    if (differenceInMs <= 60 * 1000) {
        $scope.ImageUrl = retreivedStorageData.item.ImageUrlSmall;
        $scope.UserName = retreivedStorageData.item.Name;


    } else {
    //if it's too old get it from server
        getDataFromServer();
    }
} else {
    getDataFromServer();
}

function getDataFromServer() {
        $http.get("/Profile/GetUserBasicInfo/")
            .success(function(result) {

               /*More code here*/

               if (typeof (window.Storage) != "undefined") {

                    var storageData = JSON.stringify({ item: result, date: new Date() });
                    window.sessionStorage.setItem("basicUserInfo", storageData);
                }




            });
    }

如何在应用程序加载中缓存Angular中的动态（JSON）内容？

1 个答案: