Simple data loading in state from json?

Question

JavaScript

There is such a simple mechanism:

<aside>
    <ul ng-repeat="data in datas">
      <li ui-sref="detail({id:data.id})">{{data.name}}</li>
    </ul>
  </aside>
  <div class="main-container">
    <div class="chenge-container">
      <div ui-view></div>
    </div>
  </div>

myApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/detail');
    $stateProvider
    .state('detail', {
      url: '/detail/:id',
      templateUrl: 'pages/detail.html',
      controller: 'DetailCtrl',
    })
});
myApp.controller('MainCtrl', function($scope, $http){
  $http.get("params.json").success(function(datas){
    $scope.datas = datas;
  })
});
myApp.controller('DetailCtrl', function($scope, $http, $stateParams){
  $http.get($stateParams.id".json").success(function(data){
    $scope.data = data;
  })
});

Here, when you click on an item, the corresponding information pops up in the view. But implemented as a crutch - 1.json, 2.json .. etc are used, which contain the relevant information. Question: how to pull it out of one params.json file?

[{
  "id":1,
  "name":"Moscow",
  "detail":"That's an awesome message"
},{
  "id":2,
  "name":"Amsterdam",
  "detail":"That's the best message ever"
},{
  "id":3,
  "name":"Tokio",
  "detail":"I'M THE ONLY ONE"
}]

Answer 1

It seems to me, except how to pull out the entire file and then select the right one will not work.

Answer 2

1 option:

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/detail');
    $stateProvider
        .state('root', {
            url: '',
            resolve: {
                promiseDatas: function ($state, $http) {
                    return $http.get("params.json");
                }
            },
            controller: function ($state, promiseDatas) {
                var vm = this;
                vm.datas = promiseDatas.data;
                $state.current.data.datas = promiseDatas.data;
            },
            controllerAs: 'root'
            data: {
                datas: {}
            }
        })
        .state('detail', {
            parent: 'root',
            url: '/detail/:id',
            templateUrl: 'pages/detail.html',
            resolve: {
                promiseData: function ($state, $stateParams) {
                    return _.findWhere($state.current.data.datas, { id: $stateParams.id })
                }
            },
            controller: function (promiseData) {
                var vm = this;
                vm.data = promiseData;
            },
            controllerAs: 'detail'
        })
})

Option 2: Use $state.go and pass { item } directly to the child (no need to touch the entire collection and filter it for the presence of the object of interest).
Option 3: Use the parent $scope, but it is better to refrain from the scope.