In this tutorial we will build our first Ionic application Let’s learn the basics of Ionic’s JavaScript components together. These components give your app easy access to features such as navigation and navigation bars, infinite scrolling, and lists. If you haven't set up Ionic yet or need a refresher on how to use the Ionic CLI, you can check out the first tutorial in this series.

What is a component?

The term component is somewhat abused in the front-end development, as many frameworks have their own concepts to describe Element. In fact, Web Components serve as the official HTML standard might complicate the concept further, so let's clearly define what a component is in ions.

In a general sense, a component is an implementation A set of features encapsulated by some form of coding convention. exist In other words, you can think of components as a way of isolating a specific component functionality of the rest of the application. You can think about how in HTML are different types of form inputs, each of which is a type Components with specific functions.

In Ionic, there are two types of components, CSS and JavaScript. CSS components are implemented as a set of CSS classes that Modify an element to give it a specific appearance, such as a title bar.

JavaScript components are technically implemented as Angular directives, which are Used as an HTML element in the application. They provide a richer feature. This typically includes the user's ability to interact with it or Applications manage components in other ways. For example, tags allow Content shown or hidden based on user selection of tabs.

In this tutorial We'll focus on some JavaScript components. Later in this series, we'll take a closer look at CSS components.

Sometimes, Ionic implements components as both CSS and JavaScript components, such as the tab component. This means you decide which one to use. I usually recommend choosing a JavaScript implementation. In most cases, the overhead of using JavaScript components are negligible and I believe they make your code easier to write cooperate with.

Source File

In this tutorial, we are going to create an app from scratch and we will continue enhancing the app in the rest of this series. The premise of this Application is created as a citizen information application to provide users with Information about local facilities such as libraries and parks.

at this In the tutorial, we first build an application that displays a list of parks in Chicago and use infinite scroll to keep results loading as long as they Available. We'll expand the app's feature set in the next tutorial.

I created an API that provides the information the app needs. This API is based on On the Google Maps API. You can run the API yourself, but you'll need to obtain Custom API keys and instructions from Google can be found on the API project. If any issues arise while using the provided API, such as someone misusing the API If you exceed API usage limits, running your own version should help.

You can preview running apps on Heroku and view completed projects on GitHub. However, I encourage you to follow me and build your application.

1. Setup Project

First, you need to start a new project. We can do this by running the following command:

ionic start civinfo https://github.com/ionic-in-action/starter

This will download a starter pack containing an empty Let's get started with the Ionic template (built specifically for use with my book Ionic in Action). Enter the directory, cd civinfo, run ionic Serve.

You can now preview at http://localhost:8100 (or at http://localhost:8100) ion). I recommend opening your browser's developer tools to confirm that you see Blank screen. Yes, it should be a white screen. I also recommend using Chrome Device emulation when previewing your app.

2. Set up basic navigation components

Navigation is so important, we should start here Design our applications. The main navigation components are ionNavBar and ionNavView. most applications There is a design feature which has a navigation bar with various titles and actions button and then the rest of the area is dedicated to displaying the content Current view.

ionNavBar and ionNavView components provide this functionality along with some built-in intelligence to help us solve the problem. Our application will have several routes over, but we only built one in this tutorial.

Ionic 在后臺(tái)使用 UI Router 來管理導(dǎo)航 和路由。如果你熟悉它，那么你就認(rèn)識(shí)它 在 Ionic 中的實(shí)現(xiàn)。有很多細(xì)微差別，但我們?cè)诒窘坛讨斜３趾?jiǎn)單。 最常見和簡(jiǎn)單的用途是定義您的各個(gè)頁(yè)面中的每一個(gè)。 應(yīng)用程序作為一種狀態(tài)，即 Ionic/UI 定義特定視圖的路由器方式。

為了讓我們開始，我們首先包括 將兩個(gè)導(dǎo)航組件放入 www/index.html 中，如下所示， 將其放入體內(nèi)。

<body ng-app="App">
  <ion-nav-bar class="bar-balanced"></ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

將代碼添加到 index.html 后，您可以重新加載 應(yīng)用程序，并且應(yīng)該會(huì)看到應(yīng)用程序頂部出現(xiàn)一個(gè)綠色條。

您已定義 ionNavBar 組件，該組件會(huì)自動(dòng)顯示在屏幕頂部。稍后，當(dāng)我們創(chuàng)建個(gè)人時(shí) 視圖，這些視圖將能夠?qū)?biāo)題和附加按鈕傳遞給 展示。它足夠智能，知道不同的導(dǎo)航欄應(yīng)該有多高 設(shè)備。這在不同平臺(tái)上并不一致，所以這非常有幫助。導(dǎo)航欄是 給定一個(gè) bar-balanced 給它一個(gè)綠色。

然后就是ionNavView，也就是 為每個(gè)視圖呈現(xiàn)內(nèi)容的占位符。一旦我們定義了 一個(gè)視圖，它將在此處渲染生成的標(biāo)記并自動(dòng)調(diào)整 占用導(dǎo)航欄定位后剩余的可用空間。

導(dǎo)航組件是 JavaScript 的示例 組件（也稱為 Angular 指令）。它們看起來像自定義 HTML 標(biāo)簽，當(dāng)一起使用時(shí)，它們足夠智能，可以使標(biāo)題欄與 當(dāng)前視圖并根據(jù)用戶的導(dǎo)航呈現(xiàn)正確的內(nèi)容 選擇。不過，為了看到這一點(diǎn)，我們需要添加一些狀態(tài)。讓我們 首先創(chuàng)建第一個(gè)顯示公園列表的狀態(tài)。

3. 添加公園列表視圖

該應(yīng)用程序的主要目的是顯示公民列表 相關(guān)資源。最初，這將是一個(gè)公園列表，但我們將對(duì)其進(jìn)行擴(kuò)展，以包括圖書館等其他類型的資源。我們想 在此視圖中包含一些功能：

• 用標(biāo)題更新導(dǎo)航欄
• 從 API 加載公園列表
• 以適合移動(dòng)設(shè)備的方式顯示項(xiàng)目列表 格式
• 如果底部允許加載更多項(xiàng)目 達(dá)到，使用無限滾動(dòng)
• 顯示每個(gè)項(xiàng)目的圖像

第 1 步：設(shè)置地點(diǎn)狀態(tài)、控制器和模板

現(xiàn)在我們對(duì)此視圖有了一些目標(biāo)，讓我們從 添加我們的 JavaScript 文件來注冊(cè)這個(gè)視圖。在以下位置創(chuàng)建一個(gè)新文件 places.js www/views/places/?并向其中添加以下內(nèi)容：

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function() {
});

我們使用以下方法為 UI Router 聲明一個(gè)新狀態(tài) $stateProvider.state() 方法。這只能在 Angular 的 angular.config() 方法中進(jìn)行配置。當(dāng)你聲明一個(gè)狀態(tài)時(shí)，你首先傳遞一個(gè) 用于命名路由的字符串，在本例中為 places。然后你可以傳遞一個(gè)對(duì)象 定義狀態(tài)的各種屬性，例如 URL、控制器和模板。您可以查看 UI Router 文檔以了解所有可能的配置 選項(xiàng)。

我們聲明了一個(gè)新狀態(tài)，將其命名為 places， 為它分配一個(gè) /places 的 URL，使用 controller as 語(yǔ)法命名為 controller，并且 列出了要加載的 templateUrl 。這是一個(gè)相當(dāng)常見的狀態(tài)定義， 你會(huì)發(fā)現(xiàn)它與其他州的使用方式基本相同。控制器 這里聲明的是空的，但我們很快就會(huì)添加它。

該模板是視圖的重要組成部分，描述了 該視圖的視覺方面。大多數(shù)視圖邏輯和行為將是 在控制器和模板中管理。我們的狀態(tài)聲明我們要加載 模板的 HTML 文件，但我們還沒有制作一個(gè)。讓我們通過以下方式解決這個(gè)問題 在 www/views/places/ 處創(chuàng)建一個(gè)新文件 places.html，并添加以下代碼。

<ion-view view-title="Local Parks">
  <ion-content>
  </ion-content>
</ion-view>

到目前為止，在此模板中，我們已經(jīng)聲明了 ionView 和 ionContent 組件。 ionView 組件是您放置的包裝器 一個(gè)旨在加載到 ionNavView 組件中的模板 較早宣布。 view-title 屬性還用于傳遞導(dǎo)航欄應(yīng)顯示的標(biāo)題。

ionContent 組件是一個(gè)有用的內(nèi)容包裝器， 這有助于確保內(nèi)容空間的大小適合可用屏幕 空間，幫助管理滾動(dòng)，并可以公開其他不常用的 行為。加載此視圖后，您將看到導(dǎo)航欄標(biāo)題顯示為“本地公園”。

現(xiàn)在我們需要確保應(yīng)用程序加載要執(zhí)行的腳本 將 places.js 添加到 index.html 中，如下所示。我建議 將其添加到 </head> 標(biāo)記之前。

<script src="views/places/places.js"></script>

您可以查看該應(yīng)用，但仍然看不到 視圖出現(xiàn)。要查看該視圖，請(qǐng)導(dǎo)航至 http://localhost:8100/#/places。這 狀態(tài)定義中映射的 URL 可用于導(dǎo)航至路線。然后它應(yīng)該如下圖所示，標(biāo)題設(shè)置為“Local Parks”。

這還不是太令人興奮，但這代表了最 您可能在大多數(shù)情況下都會(huì)設(shè)置的基本視圖?，F(xiàn)在讓我們開始工作吧 加載數(shù)據(jù)并將其顯示在屏幕上。

第 2 步：加載數(shù)據(jù)

在我們可以做很多其他事情之前，我們需要 加載一些數(shù)據(jù)。為此，我們需要添加一個(gè) Angular 服務(wù) 幫助我們管理地理位置。在以后的教程中，用戶的位置將 被設(shè)備檢測(cè)到。在那之前，我們將手動(dòng)將其設(shè)置為 芝加哥，我最喜歡的城市之一。

打開 www/js/app.js 并添加 以下服務(wù)到文件末尾。它應(yīng)該與現(xiàn)有的 來自 angular.module 的方法。

.factory('Geolocation', function() {
  return {
    "formatted_address": "Chicago, IL, USA",
    "geometry": {
      "location": {
        "lat": 41.8781136,
        "lng": -87.6297982
      }
    },
    "place_id": "ChIJ7cv00DwsDogRAMDACa2m4K8"
  };
})

這是一個(gè)返回對(duì)象的 Angular 服務(wù) 與 Google Maps API 返回的芝加哥結(jié)果相匹配。我們現(xiàn)在有詳細(xì)信息 以便我們可以在那里裝載公園。

接下來，我們將更新控制器以加載列表 來自 API。為簡(jiǎn)單起見，我使用以下方式加載數(shù)據(jù) 控制器中的$http 服務(wù)。最好的做法是將其抽象出來 變成一個(gè)服務(wù)。再次打開 www/views/places/places.js 并更新 像這樣的控制器：

.controller('PlacesController', function($http, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  vm.places = [];
 
  vm.load = function load() {
    $http.get(base).then(function handleResponse(response) {
      vm.places = response.data.results;
    });
  };
 
  vm.load();
});

控制器有一個(gè) vm.load() 方法來執(zhí)行 HTTP 請(qǐng)求并將結(jié)果存儲(chǔ)在 vm.places 中。保存后，您將在瀏覽器的開發(fā)人員工具中看到 HTTP 請(qǐng)求觸發(fā)。即使 如果您熟悉 Angular，您可能不認(rèn)識(shí)在 vm 變量上存儲(chǔ)數(shù)據(jù)的確切方法。如果您需要了解一些情況，我建議您查看 John Papa 的帖子，了解為什么這是推薦的方法。

要顯示數(shù)據(jù)，我們還需要更新模板并循環(huán)顯示公園列表。打開 www/views/places/places.html 并進(jìn)行更新，如下所示。

<ion-view view-title="Local Parks">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="place in vm.places" class="item-avatar">
        <img ng-src="{{place.icon}}" />
        <h2>{{place.name}}</h2>
        <p>{{place.formatted_address}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

在模板中，我們使用 ionList 和 ionItem 組件。 ionList 組件是最有用的組件之一，因?yàn)榱斜硎且粋€(gè)非常有用的組件。 由于較小的屏幕和典型的使用，移動(dòng)設(shè)備中常見的設(shè)計(jì)選擇 縱向。與使用 ul 和 li 的列表非常相似，ionList 包裝任何 ionItem 元素的數(shù)量。

列表可以采用多種不同的外觀，并且 在這個(gè)例子中，列表項(xiàng)通過聲明在左側(cè)顯示圖像 item-avatar ionItem 上的類。同樣的方法也可以用在消息應(yīng)用程序中，其中您有一個(gè)包含每個(gè)人頭像的聊天列表。

在 ionItem 內(nèi)，您顯示名稱和地址。默認(rèn)樣式是自動(dòng)截?cái)啵ㄊ褂?CSS）任何溢出的文本以保留項(xiàng)目 高度相同。

我們已加載公園列表并將其顯示為 使用 ionList 和 ionItem 進(jìn)行列表。我們可以更進(jìn)一步并添加 當(dāng)用戶滾動(dòng)到末尾時(shí)無限滾動(dòng)以加載附加結(jié)果 列表（如果可用）。

第 3 步：向列表添加無限滾動(dòng)

使列表自動(dòng)加載附加項(xiàng)目 當(dāng)用戶滾動(dòng)到底部時(shí)，我們可以使用 ionInfiniteScroll 成分。該組件放置在列表的末尾，監(jiān)視何時(shí) 用戶已經(jīng)滾動(dòng)到最后，然后調(diào)用一個(gè)可以加載附加內(nèi)容的方法 項(xiàng)目。它還具有內(nèi)置的加載旋轉(zhuǎn)器，以指示有更多項(xiàng)目 正在加載。當(dāng)響應(yīng)解析時(shí)，微調(diào)器會(huì)隱藏。

我們的 API 還必須支持某種形式的分頁(yè)。 上班。在這種情況下，Google Maps API 提供了一個(gè)必須傳遞的令牌 加載下一組結(jié)果。我們需要更新控制器來管理 這個(gè)邏輯讓我們從更新 www/views/places/places.js 開始，如下所示。

.controller('PlacesController', function($http, $scope, Geolocation) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];
 
  vm.load = function load() {
    var url = base;
    if (token) {
      url += '&token=' + token;
    }
 
    $http.get(url).then(function handleResponse(response) {
      vm.places = vm.places.concat(response.data.results);
      token = response.data.next_page_token;
 
      if (!response.data.next_page_token) {
        vm.canLoad = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});

我們添加了一個(gè)新屬性 vm.canLoad，它是一個(gè)布爾值，指示是否有其他項(xiàng)目要加載。這 默認(rèn)為 true 。在請(qǐng)求返回之前，我們不知道是否存在 是否有其他可用項(xiàng)目。

vm.load() 方法已更新以附加令牌，如果 可用的。響應(yīng)處理程序現(xiàn)在將結(jié)果連接到 大批。這意味著第二頁(yè)結(jié)果將添加到第一頁(yè)之后。這 只要有更多結(jié)果，Google Maps API 就會(huì)返回 next_page_token 可以加載的。如果該屬性缺失，我們可以假設(shè)沒有 要加載更多項(xiàng)目，并且 vm.canLoad 設(shè)置為 false。無限滾動(dòng)組件使用此值來確定何時(shí)停止加載更多項(xiàng)目。

最后的更改是添加了 $scope.$broadcast('scroll.infiniteScrollComplete')。 無限滾動(dòng)組件不知道 HTTP 請(qǐng)求何時(shí)發(fā)生 已完成或恰好在保存時(shí)禁用加載符號(hào)。所以， 該組件監(jiān)聽事件以更新自身。在 在這種情況下，scroll.infiniteScrollComplete 事件告訴組件 停止旋轉(zhuǎn)器并繼續(xù)觀察用戶滾動(dòng)到底部。

最后一步是在模板中啟用此功能。打開 www/views/places/places.html 并在 ionList 末尾添加一行 和 ionContent 組件。

      </ion-item>
    </ion-list>
    <ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad"></ion-infinite-scroll>
  </ion-content>
</ion-view>

無限滾動(dòng)組件現(xiàn)已在您的 模板。它開始監(jiān)視組件何時(shí)可見，這也會(huì)在加載時(shí)觸發(fā)，因?yàn)槟菚r(shí)沒有任何地方可見，并且 無限滾動(dòng)組件可見。它調(diào)用聲明的方法 on-infinite 當(dāng)它變得可見時(shí)（這里是 vm.load() ）并等待滾動(dòng) 已觸發(fā)完整事件。

ngIf 用于禁用 一旦 API 返回了所有可能的結(jié)果，就會(huì)無限滾動(dòng)。在這種情況下，滾動(dòng)到 底部不再觸發(fā)更多資源的加載。

使用無限滾動(dòng)時(shí)，使用 ngIf 很重要 禁用它?？梢院苋菀椎匾赃@樣的方式實(shí)現(xiàn)該組件： 組件嘗試加載并加載并且永遠(yuǎn)不會(huì)停止。

這樣就完成了地點(diǎn)視圖?；剡^頭來看，還蠻有 模板中 12 行 HTML 和大約 20 行啟用的一些功能 控制器中的 JavaScript 行。

摘要

我們研究了您將在 Ionic 應(yīng)用中經(jīng)常使用的許多組件。

• Ionic JavaScript 組件用作 HTML 元素，并且可以以協(xié)調(diào)的方式工作。
• Ionic 具有 ionNavView 和 ionNavBar 以支持不同視圖的協(xié)調(diào)導(dǎo)航。
• ionList 和 ionItem 組件可以輕松構(gòu)建適合移動(dòng)設(shè)備的列表。
• ionInfiniteScroll 組件會(huì)自動(dòng)觸發(fā)調(diào)用以加載其他項(xiàng)目并將其附加到列表中。

下一個(gè)教程將介紹 Ionic 提供的一些有用的服務(wù)，例如加載指示器和彈出窗口。

創(chuàng)建 Ionic 模板并贏得 1000 美元

如果您已經(jīng)熟悉 Ionic 框架，那么您可能需要考慮參加 Envato 的 Ionic 模板最受歡迎競(jìng)賽。如何？創(chuàng)建一個(gè)獨(dú)特的 Ionic 模板并在 2016 年 4 月 27 日之前將其提交到 Envato Market。

五個(gè)最佳模板將獲得 1000 美元。感興趣的？請(qǐng)?jiān)L問競(jìng)賽網(wǎng)站，了解有關(guān)競(jìng)賽要求和指南的詳細(xì)信息。

The above is the detailed content of Getting Started with Ionic: Exploring JavaScript Components. For more information, please follow other related articles on the PHP Chinese website!