使用Ionic创建用于显示您的网站RSS内容的移动应用程序

在本教程中，我们将了解如何创建一个显示网站 RSS 内容的移动应用程序。我们将配置 RSS URL，应用程序将下载、解析并显示来自 RSS 的帖子。

为了创建移动应用程序，我们将使用 ionic F ram ework v1 和 angularJS。要完成本教程，您需要有一些javascript和 html 经验。此外，如果您以前使用过 AngularJS，它也会有所帮助。 

如果您以前从未使用过 Ionic 框架，我建议您至少看一下入门指南，因为它可以让您快速了解事物的工作原理。

让我们开始吧！

设置离子项目

我将假设您已经在系统上安装了node并且您还拥有 npm（Node 包管理器）。安装 Ionic 框架就像运行以下命令一样简单：

npm install -g cordova ionic

这将在您的计算机上安装 Cordova 和 Ionic。 

Cordova 是 Ionic 的核心技术，基本上它允许我们在移动应用程序中嵌入浏览器。在那个浏览器中，我们将能够运行我们所有的 HTML 和 JavaScript 代码。这称为混合移动应用程序，因为该应用程序不运行本机代码，而是在浏览器内部运行。 

在 Cordova 旁边，Ionic 增加了使用 AngularJS 编写代码的可能性，它还添加了一个非常简洁的 UI 框架。

有了 Ionic，我们可以使用 Ionic CLI 创建我们的项目，这是一个非常有用的命令行工具。Ionic 提供了三个可以作为起点的默认项目模板：

• 空白：顾名思义，这是一个空项目，只有最少的必要组件。

• 选项卡：使用选项卡在其屏幕中导航的应用程序。

• sidemenu：使用标准移动侧边菜单进行导航的应用程序。

对于本教程，我们将使用标签应用程序模板。要开始我们的项目，让我们运行：

ionic start myWebsiteOnMobile tabs

Ionic 将下载并安装所需的所有组件，并将创建名为myWebsiteOnMobile. 通过运行进入项目目录：

cd myWebsiteOnMobile

因为我们的应用程序是一个混合移动应用程序，所以我们具有能够在浏览器中运行应用程序的优势。为此，Ionic 提供了一个简洁的内置 Web 服务器，它运行我们的应用程序，如下所示：

ionic serve

这将打开一个加载了我们的应用程序的浏览器，它看起来像这样：

要停止服务器， 请在命令行屏幕上使用Control-C 。要更好地了解应用程序在移动设备上的外观，您可以使用：

ionic serve --lab

这将在浏览器中打开应用程序，并排显示应用程序的ios和android预览。

选项卡 Ionic 应用程序模板具有三个选项卡：状态、聊天和帐户。在接下来的步骤中，我们将调整应用程序以满足我们的需求。

如何调整默认离子标签模板应用程序

对于我们的应用程序，我们将有两个选项卡：

• 最新帖子：显示从 RSS 提要中检索到的最新帖子列表。

• 设置：用户可以在其中配置应用程序的多个方面。

从“最新帖子”选项卡中，用户将能够单击任何最新帖子并查看有关该帖子的更多信息，并且可以在外部浏览器中打开该帖子。

由于我们的最新帖子选项卡类似于模板提供的聊天选项卡，我们将与帐户选项卡一起重复使用它，这将成为我们的设置选项卡。我们可以在运行 Ionic 网络服务器的情况下进行所有修改，Ionic 将为我们重新加载应用程序。这是一个非常简洁的功能，可以加快开发速度。

如前所述，Ionic 使用 AngularJS，整个应用程序实际上是一个 AngularJS 模块。该模块在 中定义www/js/app.js，这里也是定义应用程序的路径或路由的地方。应用程序的每个屏幕都有对应的路线。

让我们删除状态选项卡，因为我们不需要它。为此，我们首先需要将应用程序的默认屏幕（或路由）更改为指向聊天屏幕，这将成为我们的主屏幕。默认屏幕是通过 配置$urlRouterProvider.otherwise()的，所以让我们将其更改为：

$urlRouterProvider.otherwise('/tab/chats');

如果我们现在http://localhost:8100在浏览器中重新加载，我们将看到默认情况下会加载“聊天”选项卡。

要删除状态选项卡，我们需要编辑www/templates/tabs.html包含选项卡组件模板的文件。我们将删除元素：

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

保存时，我们会看到应用程序现在只有两个选项卡：聊天和帐户。

在www/templates/tabs.html文件中，我们注意到有一些 HTML 标记不是标准 HTML，例如 ion-tabs、ion-tab和ion-nav-view. 这些实际上是由 Ionic 框架定义的 AngularJS 指令。指令是在它们后面打包功能的标记，它们是编写更结构化和更简洁代码的非常方便的方法。

在我们的例子中，ion-tabs指令是选项卡组件，每个选项卡都需要一个 ion-tab指令。

让我们将我们的标签从聊天和帐户更改为我们所需的名称最新帖子和设置。为此，我们将修改 www/templates/tabs.html文件中的几项内容：

• titleion-tab确定选项卡按钮上的文本的元素的属性。我们将分别将其更改为最新帖子和设置。

• hrefion-tab指向路由或屏幕 URL的元素的属性 。我们将这些更改为 #/tab/latest-posts and  #/tab/settings。

• nameion-nav-view元素的 属性 为tab-latest-posts和 tab-settings。这些是用于最新帖子和设置屏幕的视图模板的标识符。

结果， www/templates/tabs.html应该如下所示：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Latest posts Tab -->
  <ion-tab title="Latest posts" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/latest-posts">
    <ion-nav-view name="tab-latest-posts"></ion-nav-view>
  </ion-tab>
  <!-- Settings Tab -->
  <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>
</ion-tabs>

进行这些更改后，我们会遇到一些错误。这是因为我们还必须调整我们的路线以使用我们使用过的新标识符。在 www/js/app.js中，我们需要url根据我们上面设置的内容更改每个路由的状态标识符、视图标识符和 。

对于每条路线（或屏幕），都定义了一个控制器。这是一个基本的 MVC（模型-视图-控制器）设计模式。控制器在文件中定义 www/js/controllers.js。www/js/app.js出于一致性目的，我们将在和 中更改控制器的名称 www/js/controller.js：

• ChatsCtrl变成 LatestPostsCtrl.

• ChatDetailCtrl变成PostDetailCtrl.

• AccountCtrl变成 SettingsCtrl.

此外，对于每条路线，我们都定义了一个视图模板，所以让我们也更改它们。像这样编辑 www/js/app.js和修改 templateUrl ：

• 更改tab-chats.html为tab-latest-posts.html。还将文件重命名 www/templates/tab-chats.html为 www/templates/tab-latest-posts.html.

• 更改 chat-detail.html为post-detail.html。还将文件重命名 www/templates/chat-detail.html为 www/templates/post-detail.html.

• 更改 tab-account.html为 tab-settings.html。还将文件重命名 www/templates/tab-account.html为 www/templates/tab-settings.html.

• 最后，将默认加载的视图更改为 latest-posts使用$urlRouterProvider.otherwise('/tab/latest-posts').

如果一切顺利，那么您最终应该得到如下所示的 www/js/app.js文件：

...
// Each tab has its own nav history stack:
  .state('tab.latest-posts', {
      url: '/latest-posts',
      views: {
        'tab-latest-posts': {
          templateUrl: 'templates/tab-latest-posts.html',
          controller: 'LatestPostsCtrl'
        }
      }
    })
    .state('tab.post-detail', {
      url: '/latest-posts/:postId',
      views: {
        'tab-latest-posts': {
          templateUrl: 'templates/post-detail.html',
          controller: 'PostDetailCtrl'
        }
      }
    })
  .state('tab.settings', {
    url: '/settings',
    views: {
      'tab-settings': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/latest-posts');
  ...

我们清理后的 www/js/controllers.js文件如下所示：

angular.module('starter.controllers', [])
.controller('LatestPostsCtrl', function($scope) {})
.controller('PostDetailCtrl', function($scope, $stateParams) {})
.controller('SettingsCtrl', function($scope) {});

现在我们已经根据我们的需要对应用程序进行了重构，让我们继续下一部分并添加一些功能。

如何使用 Ionic 检索 RSS 提要

为了显示最新帖子的列表，我们的应用程序需要从 URL 检索 RSS 提要。作为最佳实践，建议将此类功能驻留在应用程序的服务层中。通过这种方式，我们可以更轻松地在控制器中使用它，然后使用视图将其呈现给用户。

RSS 服务将使用 Yahoo 的 YQL rest api来检索我们网站的 RSS。要调用 REST api，我们将使用 $httpAngularJS 提供的提供程序。

离子服务通常在 www/js/services.js文件中定义，所以我们也将把我们的服务放在其中。代码将如下所示：

angular.module('starter.services', [])
.service('RSS',function($http){
  var self = this;
  this.download = function(next){
    var feedUrl = "https://tutorials.tutsplus.  com/posts.atom";
    var yql_query = "select * from xml where url = '"+feedUrl+"'";
    var url = 'https://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql_query)+'&format=json&callback=JSON_CALLBACK';
    $http
      .jsonp(url)
      .success(function(response){
        if (response.query.results["feed"]){
          next(self.parseAtom(response.query.results));
        } else if (response.query.results["rss"]){
          next(self.parseRSS(response.query.results));
        } else {
          throw "Unknown RSS format";
        }
      })
      .error(function(data, status){
      });
  }
  this.parseAtom = function(atomFeed){
    var posts = [];
    angular.forEach(atomFeed.feed.entry,function(item,idx){
      var post = {
        id:idx,
        title:item.title,
        description:item.content.content,
        link:item.link.href
      }
      posts.push(post);
    })
    return posts;
  }
  this.parseRSS = function(rssFeed){
    var posts = [];
    angular.forEach(rssFeed.rss.channel.item,function(item,idx){
      var post = {
        id:idx,
        title:item.title,
        description:item.description,
        link:item.link
      }
      posts.push(post);
    })
    return posts;
  }
})

我们使用 service()AngularJS 提供的方法声明服务。然后我们注入 Angular 的 $http模块，以便我们可以在我们的服务中调用它。

该 self变量是对 RSS 服务的引用，因此我们可以从服务的方法中调用它。该服务的主要方法是 download()方法，它下载提要信息并对其进行处理。网站提要有两种主要格式：RSS 和 ATOM。对于我们的应用程序，我们使用了来自 Tuts+ https://tutorials.www.weixiaolive.com/posts.atom 的 ATOM 格式的教程提要，但为了完整起见，我们也考虑了 RSS 格式。

该 download()方法调用 YQL API 并根据提要的类型使用parseAtom()或 方法解析结果。parseRSS()这里的想法是具有相同的输出格式，这将通过回调进一步传递 next()。有了 RSS 服务，我们就可以继续使用控制器了。

将 RSS 服务连接到最新的帖子控制器

在我们的 www/js/controllers.js文件中，我们需要加载 RSS 数据并将其传递给我们的视图。为此，我们只需要 LatestPostsCtrl像这样修改我们的控制器：

.controller('LatestPostsCtrl', function($scope, RSS) {
  RSS.download(function(posts){
    $scope.posts = posts;
  });
})

使用 Angular 的依赖注入机制，我们只需要指定 $scope和 RSS变量作为方法参数，它就会知道如何加载这些模块。该 $scope模块允许我们在绑定到视图的模型上设置变量。然后可以检索范围内设置的任何值并将其显示在与控制器关联的视图中。

当最新帖子的视图被加载时，它会调用 LatestPostsCtrl控制器，而这又会使用 RSS 服务来下载提要信息。posts结果被解析并使用我们存储在当前范围内的变量作为数组传回 。

完成所有这些之后，我们现在可以转到视图部分，显示从提要中检索到的帖子列表。

将最新的帖子视图与提要数据挂钩

我们现在需要修改我们的视图以获取最新的帖子。如果你还记得，这是 www/js/app.js通过 templateUrl属性在文件中配置的，它指向 www/templates/tab-latest-posts.html文件。

我们要做的是显示提要列表。由于提要信息可能包含 HTML，这只会使最新帖子列表变得混乱，我们需要一些东西来从帖子内容中提取没有 HTML 标记的文本。最简单的方法是定义一个 AngularJS 过滤器，从文本中去除 HTML 标签。让我们 www/js/services.js通过添加：

.filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
)

不回到我们在 www/templates/tab-latest-posts.html 文件中的视图，让我们修改它看起来像这样：

<ion-view view-title="Latest posts">
  <ion-content>
    <ion-list>
      <ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}">
        <span class="icon ion-social-rss-outline"></span>
        <h2>{{post.title}}</h2>
        <p>{{post.description | htmlToPlaintext}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

我们将 Ionic 列表 UI 组件与 Angular 的 ng-repeat指令一起使用，它将遍历posts 控制器范围内的集合。htmlToPlaintext对于每个帖子条目，我们将有一个列表项，其标题和描述通过使用过滤器去除了 HTML 标记 。href另请注意，由于属性设置为，因此单击帖子应将我们带到帖子的详细信息#/tab/latest-posts/{{post.id}}。这还不起作用，但我们将在下一节中处理它。

如果我们现在使用 运行应用程序 ionic serve --lab，我们应该得到如下内容：

显示帖子的详细信息

单击列表中的帖子时，我们会转到应用程序的帖子详细信息屏幕。因为应用程序的每个屏幕都有自己的控制器，因此也有自己的范围，我们无法访问帖子列表来显示特定帖子。我们可以再次调用 RSS 服务，但那样效率低下。

为了解决这个问题，我们可以利用 $rootScopeAngular 提供的指令。这引用了一个覆盖应用程序中所有控制器的范围。让我们修改一下LatestPostCtrl，在 中设置帖子， $rootScope然后在 中搜索用户点击的特定帖子 PostDetailCtrl。生成的代码 www/js/controllers.js如下所示：

.controller('LatestPostsCtrl', function($scope, $rootScope, RSS) { 
  RSS.download(function(posts){ 
    $rootScope.posts = posts; 
  }); }) .controller('PostDetailCtrl', function($scope ,$rootScope, $stateParams) { 
  angular.forEach($rootScope.posts,function(post){ 
    if (post.id == $stateParams.postId){ 
      $scope.post = post; 
    } 
  }) })

我们简单地注入 $rootScope两个控制器并使用它 posts在两个控制器之间传递。请注意，我们不需要在最新的帖子视图中进行任何更改，因为 $rootScope它们 $scope都可以从视图中以相同的方式访问。

在 PostDetailCtrl控制器内部，我们只需使用用户点击的链接中传递的 id 搜索帖子。我们通过将每个帖子 ID 与通过 $stateParams.postId变量传递的 URL 中的值进行比较来做到这一点。如果我们找到匹配项，那么我们将帖子设置在范围上，以便我们可以在视图中使用它。

现在让我们像这样调整我们的帖子详细信息视图 www/templates/post-detail.html：

<ion-view view-title="{{post.title}}">
  <ion-nav-buttons side="right">
    <a ng-href="{{post.link}}" class="button" target="_system">
      Open
    </a>
  </ion-nav-buttons>
  <ion-content class="padding">
    <h1>{{post.title}}</h1>
    <span ng-bind-html="post.description"></span>
  </ion-content>
</ion-view>

这就是我们在视图中所做的：

• 我们已将帖子的标题放在屏幕的标题中。

• 我们在右侧的标题中放置了一个“打开”按钮。由于该属性，此按钮将在外部浏览器中打开帖子链接 target="_system"。我们必须这样做，因为由于 Cordova，应用程序已经在浏览器中运行。如果我们不设置该属性，则帖子将在与应用程序相同的浏览器中打开，然后我们将无法返回应用程序。

• ng-bind-html我们使用 Angular 的指令将帖子的描述显示为 HTML  。

在运行应用程序时，我注意到如果帖子描述包含图像，其中一些会从屏幕上掉下来。其他 HTML 元素（如视频）可能就是这种情况。我们可以通过在 www/css/style.css.

ion-content *{
    max-width: 100%;
}

如果我们现在查看应用程序并单击其中一个帖子，我们应该会看到如下内容：

我们的应用程序几乎完成了。在下一节中，我们将看看如何实现设置屏幕。

为我们的 Ionic 应用程序添加设置

对于我们的设置屏幕，我们将实现一种方法来指示要在应用程序的主屏幕上显示多少帖子。我们会将这个设置存储在 localstorage内存中，当应用程序关闭时它不会被删除。让我们编辑控制器文件 www/js/controllers.js并像这样更改 SettingsCtrl控制器：

.controller('SettingsCtrl', function($scope,$rootScope) { 
  $scope.settings = { 
    maxPosts: window.localStorage.getItem("myWebsiteOnMobile.maxPosts") 
  }; 
  $scope.$watch('settings.maxPosts', function(){ 
    window.localStorage.setItem("myWebsiteOnMobile.maxPosts",$scope.settings.maxPosts); 
    $rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts"); 
  }); });

此外，我们需要 www/templates/tab-settings.html像这样修改设置屏幕：

<ion-view view-title="Settings">
  <ion-content>
      <div class="item item-divider item-balanced">Maximum posts</div>
	<ion-radio ng-model="settings.maxPosts" ng-value="null">Unlimited</ion-radio>
	<ion-radio ng-model="settings.maxPosts" ng-value="5">5</ion-radio>
	<ion-radio ng-model="settings.maxPosts" ng-value="10">10</ion-radio>
  </ion-content>
</ion-view>

控制器 myWebsiteOnMobile.maxPosts从 localStorage. 如果它不存在，它将是 null，并且我们将考虑对最大帖子数量没有限制。

我们调用该 $scope.$watch()方法来监控变量的变化，该settings.maxPosts变量绑定到设置屏幕中的单选控件。

完成所有这些后，每次我们在设置屏幕上更改最大帖子数时，该设置都会存储在 中 localStorage，并在应用程序重新启动时从那里检索。

现在让我们使用这个设置。这就像在 LatestPostsCtrlfrom中添加它一样简单www/js/controllers.js：

$rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts");

并在最新的帖子屏幕中添加指令 www/templates/tab-latest-posts.html：

<ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts|limitTo:maxPosts" 
type="item-text-wrap" href="#/tab/latest-posts /{{post.id}}">

注意 limitTo:maxPostsAngular 过滤器。这会将显示的帖子数量限制为从 localStorage. 默认情况下， null它将显示 RSS 服务检索到的所有提要。

恭喜！我们现在有一个显示 RSS 提要的完整工作应用程序。

结论

在本教程中，我们了解了如何使用 Ionic 框架和 AngularJS 创建混合移动应用程序。只有一件事要做：在移动设备或移动模拟器上运行应用程序。这对 Ionic 来说非常简单。要在 Android 模拟器上运行应用程序，只需运行：

ionic platform add android
ionic run