如何用Ionic 4和Angular构建新闻应用程序
在本教程中，我们将使用Ionic 4构建一个利用第三方的新闻应用程序<一个href＝＂https://newsapi.org/＂>消息API．
Ionic 4是Ionic的最新版本，Ionic是一个最初构建在Cordova和Angular之上的移动框架。Ionic允许用户使用HTML、CSS和JavaScript及其相关的web技术创建混合移动应用程序。
使Ionic 4成为最好版本的原因是它现在是框架不可知的。这意味着它不再依赖于Angular，你可以将它用于任何你熟悉的框架或库，或者纯JavaScript。
但在撰写本文时，Ionic CLI只支持生成基于Angular的Ionic项目，所以我们将使用Angular/Ionic项目来构建我们的新闻应用程序。
看到一个<一个href＝＂https://www.techiediaries.com/ionic-news-app">托管版本我们将构建的应用程序，并从中获取源代码<一个href＝＂https://github.com/techiediaries/ionic-news-app">GitHub库．
先决条件
让我们从能够轻松学习本教程所需的先决条件开始。
- 你需要在你的开发机器上安装Node.js和npm。如果不是这样的话，最简单的方法就是去<一个href＝＂https://www.nodejs.org">官方网站为你的系统抓取二进制文件。Node.js不是Ionic本身的要求，而是Ionic CLI(以及幕后的Angular CLI)的要求，这是我们将用来生成Ionic项目的工具。
- 我们将在Angular中使用Ionic, Angular是基于TypeScript的，所以你需要熟悉TypeScript的基本概念。
安装Ionic CLI 4
Ionic CLI 4是CLI的最新版本。打开一个终端，运行以下命令将其安装到您的系统上:
＄npm安装- g @ionic / cli请注意，您可能需要添加sudo如果你使用的是基于debian的系统或macOS，你可以在命令之前安装这个包。对于Windows，如果遇到权限错误，可以使用具有管理员权限的命令提示符。在所有系统中，你都可以通过使用节点版本管理器(推荐)重新安装npm或手动更改npm的默认目录来避免npm权限错误。看到<一个href＝＂https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally">文档．
接下来，你可以通过运行下面的命令生成一个基于Angular的项目:
$ ionic startCLI将交互式地询问有关项目的必要信息，例如的名字(输入newsapp或您喜欢的任何名称)和初始模板(选择sidemenu这将给你一个开始项目与侧菜单和导航框)。
下一个新闻输入命令CLI开始生成文件并从npm安装依赖项。
最后，CLI会询问您是否需要安装免费的Ionic Appflow SDK并连接您的应用程序?(Y / n)．你可以打字n如果你不想集成Ionic提供的云服务。
Appflow是面向Ionic开发人员的持续集成和部署平台。Appflow帮助开发者以前所未有的速度持续开发和发布iOS、Android和web应用。有关Appflow的更多信息，请访问<一个href＝＂https://ionicframework.com/docs/appflow/">官方文档．
接下来，你可以导航到你的项目的根文件夹，并运行以下命令来启动一个实时重载开发服务器:
＄cd./newsapp $ ionic serve您的应用程序将从http://localhost:8100地址。
这是应用程序在这一点上的截图:
您可以看到，我们已经有了一个相当不错的启动应用程序，但还没有进行任何开发。让我们对我们的项目做些修改吧。
这个项目已经有两页了首页而且列表．保留第一页并删除列表页面。
首先，移除src / app /列表文件夹中。接下来，打开src / app / app-routing.module.ts文件并删除列表页的路由项:
常量路线：路线＝［｛路径：”，redirectTo：“回家”，pathMatch：“全部”｝，｛路径：“回家”，loadChildren：”。/ home / home.module # HomePageModule '｝，｛路径：“列表”，loadChildren：”。/清单/ list.module # ListPageModule '｝］；我们有三个路径，一个是空路径，重定向到/家庭路线,/家庭显示主页的路由，以及/列表显示列表页面的路由。您只需要删除最后一个对象。
您还需要从侧菜单中删除列表页面的链接。打开src / app / app.component.ts文件。找到组件中定义的appPages数组:
公共appPages＝［｛标题：“回家”，url：“/ home”，图标：“回家”｝，｛标题：“列表”，url：' /列表'，图标：“列表”｝］；然后简单地删除第二个对象:{title: 'List'， url: '/ List'， icon: 'List'}．
现在，让我们为应用程序创建一个关于页面。在终端中，执行以下命令:
$ ionic生成页面该命令将生成一个src / app /文件夹中的一堆文件，并将更新src / app / app-routing.module.ts文件中包含生成页面的路由:
进口｛NgModule｝从“@angular /核心”；进口｛路线，RouterModule｝从“@angular /路由器”；常量路线：路线＝［｛路径：”，redirectTo：“回家”，pathMatch：“全部”｝，｛路径：“回家”，loadChildren：”。/ home / home.module # HomePageModule '｝，｛路径：“大约”，loadChildren：”。/关于/ about.module # AboutPageModule '｝］；@NgModule（｛进口：［RouterModule．forRoot（路线）］，出口：［RouterModule］｝）出口类AppRoutingModule｛｝让我们在侧菜单中添加一个关于页面的链接。打开src / app / app.component.ts文件并更新appPages数组:
公共appPages＝［｛标题：“回家”，url：“/ home”，图标：“回家”｝，｛标题：“大约”，url：/对的，图标：“help-circle-outline”｝］；这是此时菜单的截图:
接下来，打开src / app /关于/ about.page.html并在页面的工具栏上添加一个菜单图标，让用户可以打开侧边菜单:
<ion-header><ion-toolbar><ion-buttons槽＝＂开始＂><ion-menu-button>ion-menu-button>ion-buttons><ion-title>关于ion-title>ion-toolbar>ion-header><离子含量填充>离子含量>
现在让我们向应用程序UI添加一些主题。
打开src / app /关于/ about.page.html为菜单工具栏添加一个原色，为内容部分添加一个深色:
<ion-header><ion-toolbar颜色＝＂主要的＂><ion-buttons槽＝＂开始＂><ion-menu-button>ion-menu-button>ion-buttons><ion-title>关于ion-title>ion-toolbar>ion-header><离子含量颜色＝＂黑暗＂填充><p>这是一个新闻应用程序，由Ionic 4和<一个href＝＂https://newsapi.org/＂>消息API一个>p>离子含量>这是页面的截图:
接下来，让我们为主页设置主题。打开src / app / home / home.page.html文件并将其内容替换为以下内容:
<ion-header><ion-toolbar颜色＝＂主要的＂><ion-buttons槽＝＂开始＂><ion-menu-button>ion-menu-button>ion-buttons><ion-title>首页ion-title>ion-toolbar>ion-header><离子含量颜色＝＂主要的＂><ion-card><ion-card-header><ion-card-subtitle>欢迎来到我们的新闻Appion-card-subtitle>ion-card-header><ion-card-content><p>享受来自TechCrunch的最新新闻。p><ion-spinner* ngIf＝＂文章!＂的名字＝＂点＂>ion-spinner>ion-card-content>ion-card>离子含量>接下来，打开src / app / home / home.page.scss文件和添加:
ion-card｛——背景：# 021 b46；——颜色：# fff；｝
另外，打开src / app / app.component.html文件，并为菜单工具栏添加一个原色:
<ion-toolbar颜色＝＂主要的＂><ion-title>菜单ion-title>ion-toolbar>
获取新闻数据
现在让我们看看如何从可用的第三方新闻API检索新闻数据<一个href＝＂https://newsapi.org/＂>NewsAPI.org/该网站为开源和开发项目提供免费计划。
你首先需要头<一个href＝＂https://newsapi.org/register">在这里注册API密钥:
填写表格并提交。你应该被重定向到你可以复制API密钥的页面:
添加服务
接下来，让我们创建一个服务，它将负责从新闻API获取数据。在终端中，执行以下命令:
$ ionic generate服务api接下来，打开src / app / app.module.ts文件然后导入HttpClientModule把它加到进口数组:
/ /[…]进口｛HttpClientModule｝从“@angular /共同/ http”；@NgModule（｛声明：［AppComponent］，entryComponents：［］，进口：［/ /[…]HttpClientModule，］，/ /[…]｝）出口类AppModule｛｝接下来，打开src / app / api.service.ts文件和注入HttpClient通过服务构造函数:
进口｛可注射的｝从“@angular /核心”；进口｛HttpClient｝从“@angular /共同/ http”；@可注射的（｛providedIn：“根”｝）出口类ApiService｛构造函数（私人httpClient：HttpClient）｛｝｝接下来，定义一个API_KEY变量将保存你的API键从新闻API:
出口类ApiService｛API_KEY＝“YOUR_API_KEY”；最后，添加一个方法，将GET请求发送到TechCrunch新闻的端点:
getNews（）｛返回这．httpClient．得到（｀https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=$ {这．API_KEY｝｀）；｝这就是我们需要为这项服务添加的所有内容。
打开src / app / home / home.page.ts文件和导入，然后注入，ApiService通过组件构造函数:
进口｛组件｝从“@angular /核心”；进口｛ApiService｝从“. . / api.service”；@组件（｛选择器：“app-home”，templateUrl：“home.page.html”，styleUrls：［“home.page.scss”］，｝）出口类主页｛构造函数（私人apiService：ApiService）｛｝｝接下来，添加一个articles变量来保存检索到的新闻:
出口类主页｛文章；添加一个ionViewDidEnter ()方法，在该方法中调用getNews ()的方法ApiService检索新闻:
ionViewDidEnter（）｛这．apiService．getNews（）．订阅（（数据）= >｛控制台．日志（数据）；这．文章＝数据［“文章”］；｝）；｝最后，让我们遍历articles变量并在我们的主页上显示新闻。
再次，打开src / app / home / home.page.html文件并添加以下代码:
<ion-card* ngFor＝＂让条款中的条款＂><ion-imgsrc＝＂{{article.urlToImage}}＂>ion-img><ion-card-header><ion-card-subtitle>{{article.title}}ion-card-subtitle>ion-card-header><ion-card-content><p>{{article.description}}p><ion-buttonion-button填满＝＂大纲＂href＝＂{{article.url}}＂大>阅读全文ion-button>ion-card-content>ion-card>我们只需使用ngFor指令来循环文章变量，并显示图像，标题，描述和每篇文章的URL在一个卡片组件。
这是结果的截图:
您可以在web上托管这个应用程序(作为PWA)，也可以构建它<一个href＝＂https://ionicframework.com/docs/v1/guide/publishing.html">将其发布到应用商店中．你可以从中找到一个活生生的版本<一个href＝＂https://www.techiediaries.com/ionic-news-app">链接这里面的源代码<一个href＝＂https://github.com/techiediaries/ionic-news-app">GitHub库．
结论
我们用Ionic 4和Angular从头构建了一个新闻应用程序。该应用程序仍然有很大的改进空间，因此可以自由地使用它并自行扩展它。例如，你可以添加TechCrunch以外的消息来源，并允许用户选择新闻来源。
