角度離子新聞應用程序UI路由

我想建立一個使用Angular和Ionic的新聞饋送應用程序。我堅持在這個階段，這種交易與UI路由和http請求，我不知道該去哪裏從這裏。在主要頁面申請這樣表示角度離子新聞應用程序UI路由

這個數據newschannels的列表是從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" 
     ] 
    }] 
}

我現在的目標是，當有人點擊任何牽強報紙我應該獲取sources [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路由

回答

相關問題