Angular Ionic新闻应用程序UI路由

Question

我正在尝试使用Angular和Ionic构建新闻订阅源应用程序。我停留在这一阶段，涉及UI路由和http请求的处理，我不知道从这里去哪里。 在主页上，此应用程序显示类似这样的新闻频道列表

这些数据是从json文件中获取的，就像这样

{
   "status": "ok",
   "sources": [
   {
      "id": "abc-news-au",
      "name": "ABC News (AU)",
      "description": "Australia's most trusted source of local, national and world news. Comprehensive, independent, in-depth analysis, the latest business, sport, weather and more.",
      "url": "http://www.abc.net.au/news",
      "category": "general",
      "language": "en",
      "country": "au",
      "sortBysAvailable": [
         "top"
      ]
   },
   {
      "id": "ars-technica",
      "name": "Ars Technica",
      "description": "The PC enthusiast's resource. Power users and the tools they love, without computing religion.",
      "url": "http://arstechnica.com",
      "category": "technology",
      "language": "en",
      "country": "us",
      "sortBysAvailable": [
         "top",
         "latest"
      ]
   }]
}

现在我的目标是，当有人点击任何报纸时，我都应该获取来源[i] .id，并使用它来修改网址并将其传递给另一个http（）。get，并使用数据将其显示在另一页上。 我该怎么做 ？ 有什么建议么？

Answer 1

创建另一个状态。

 $stateProvider.state('viewPage', {
        url:'/view/:id',
        templateUrl: 'views/modals/test.html'
      });

然后，您可以在主页上以这种方式使用它。

<a ui-sref="viewPage({'id': feed.id})">My feed </a>

这样，如果您单击它，它将被重定向到该页面。

Answer 2

在此处查看演示http://plnkr.co/edit/Pmi205TrjyX4hfJsG8Zo?p=preview

其中包含您的所有情况，并让我知道您的反馈意见

HTML：

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <link href="style.css" rel="stylesheet" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script data-require="ui-router@*" data-semver="1.0.0-beta.2" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <a ui-sref="home">Home</a>
    <div ui-view></div>
  </body>
</html>

JS：

var app = angular.module('plunker', ['plunkerConfig']);

angular.module('plunkerConfig', ['ui.router']).config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state("home", {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeController'
    })

    .state("news", {
      url: '/home/:newsId',
      templateUrl: 'news.html',
      controller: 'NewsController'
    });

    $urlRouterProvider.otherwise('/home');
});

app.controller('HomeController', function($scope, $state) {
  $scope.newsChannel = {
   "status": "ok",
   "sources": [
   {
      "id": "abc-news-au",
      "name": "ABC News (AU)",
      "description": "Australia's most trusted source of local, national and world news. Comprehensive, independent, in-depth analysis, the latest business, sport, weather and more.",
      "url": "http://www.abc.net.au/news",
      "category": "general",
      "language": "en",
      "country": "au",
      "sortBysAvailable": [
         "top"
      ]
   },
   {
      "id": "ars-technica",
      "name": "Ars Technica",
      "description": "The PC enthusiast's resource. Power users and the tools they love, without computing religion.",
      "url": "http://arstechnica.com",
      "category": "technology",
      "language": "en",
      "country": "us",
      "sortBysAvailable": [
         "top",
         "latest"
      ]
   }]
};
$scope.fetchSources = function(id) {
  $state.go('news', {'newsId': id});
};
});

app.controller('NewsController', function($scope, $stateParams, $http) {
  $scope.title = $stateParams.newsId;
  $scope.newsDescription = 'Loading the description...';
  $http.get($stateParams.newsId + '.json').then(function(response) {
    $scope.newsDescription = response.data.description;
  }, function(response) {
    console.log('Request failed');
  });
});