Угловое Ионное приложение для новостей UI Routing

Я пытаюсь создать приложение для подачи новостей, используя Angular и Ionic.Я застрял на этой фазе, что касается сделок с интерфейсом UI Routing и http request, и я не знаю, куда идти отсюда. На главной странице это приложение показывает список newschannels как этот Угловое Ионное приложение для новостей UI Routing

эти данные извлекаются из 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 и использовать ее для изменения URL-адреса и передачи его другому http(). get и используйте данные, чтобы отобразить их на другой странице. Как мне это сделать ? Какие-либо предложения?

источник

2016-11-09 Amit Singh

Проверьте демонстрационный пример здесь http://plnkr.co/edit/Pmi205TrjyX4hfJsG8Zo?p=preview

, который содержит весь ваш сценарий и дайте мне знать, что ваша обратная связь

HTML:

<!DOCTYPE html> 
<html ng-app="plunker"> 
    <head> 
    <link href="style.css" rel="stylesheet" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
    <script data-require="[email protected]*" 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'); 
    }); 
});

источник

2016-11-09 14:25:58

Сво прекрасно работает. Спасибо большое –

Создать другое государство.

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

Тогда вы можете использовать его таким образом на своей главной странице.

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

Так что, если вы нажмете на него, он будет перенаправлен на эту страницу.

источник

2016-11-09 06:00:54

Угловое Ионное приложение для новостей UI Routing

ответ

Смежные вопросы