成人区人妻精品一熟女,av免费网站在线观看

什么是組件？

源文件

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

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

第 3 步：向列表添加無限滾動

摘要

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

首頁

CMS教程

＆＃＆按

從 Ionic 開始：探索 JavaScript 組件

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2023 pm 03:25 PM

從 Ionic 開始：探索 JavaScript 組件

在本教程中，我們將構(gòu)建我們的第一個 Ionic 應(yīng)用程序一起學(xué)習(xí) Ionic 的 JavaScript 組件的基礎(chǔ)知識。這些組件使您的應(yīng)用程序可以輕松訪問功能，例如導(dǎo)航和導(dǎo)航欄、無限滾動和列表。如果您尚未設(shè)置 Ionic 或需要刷新如何使用 Ionic CLI，可以查看本系列的第一篇教程。

什么是組件？

組件這個術(shù)語在前端有些被濫用開發(fā)，因為許多框架都有自己的概念來描述成分。事實上，Web Components 作為官方 HTML 標(biāo)準可能會使這個概念進一步復(fù)雜化，所以讓我們明確定義什么是組件在離子中。

一般意義上，組件是一個實現(xiàn) 由某種形式的編碼約定封裝的功能集。在換句話說，您可以將組件視為隔離特定組件的一種方式應(yīng)用程序其余部分的功能。你可以想想在 HTML 中如何是不同類型的表單輸入，每一個都是一種類型具有特定功能的組件。

在 Ionic 中，有兩種類型的組件，CSS 和JavaScript。 CSS 組件被實現(xiàn)為一組 CSS 類，這些類修改元素以賦予其特定的外觀，例如標(biāo)題欄。

JavaScript 組件在技術(shù)上是作為 Angular 指令實現(xiàn)的，它們是用作應(yīng)用程序中的 HTML 元素。他們提供了更豐富的特征。這通常包括用戶與其交互的能力或應(yīng)用程序以其他方式管理組件。例如，標(biāo)簽允許根據(jù)用戶選擇選項卡顯示或隱藏的內(nèi)容。

在本教程中我們將重點關(guān)注一些 JavaScript 組件。在本系列的后面部分，我們將仔細研究 CSS 組件。

有時，Ionic 將組件同時實現(xiàn)為 CSS 和 JavaScript 組件，例如選項卡組件。這意味著您決定使用哪一個。我通常建議選擇 JavaScript 實現(xiàn)。在大多數(shù)情況下，使用的開銷 JavaScript 組件可以忽略不計，我相信它們使您的代碼更容易編寫與合作。

源文件

在本教程中, 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 應(yīng)用程序是創(chuàng)建一個公民信息應(yīng)用程序，為用戶提供有關(guān)當(dāng)?shù)卦O(shè)施的信息，例如圖書館和公園。

在這個在教程中，我們首先構(gòu)建一個顯示公園列表的應(yīng)用程序在芝加哥，并使用無限滾動來保持加載結(jié)果，只要它們可用。我們將在下一個教程中擴展該應(yīng)用的功能集。

我創(chuàng)建了一個 API，可以提供應(yīng)用所需的信息。該 API 基于在 Google 地圖 API 上。您可以自己運行該 API，但需要獲取來自 Google 的自定義 API 密鑰和說明可以在 API 項目上找到。如果使用提供的 API 時出現(xiàn)任何問題，例如有人濫用 API 如果超過 API 使用限制，運行您自己的版本應(yīng)該會有所幫助。

您可以在 Heroku 上預(yù)覽正在運行的應(yīng)用，并在 GitHub 上查看已完成的項目。不過，我鼓勵您跟隨我一起構(gòu)建應(yīng)用程序。

1. 設(shè)置項目

首先，您需要開始一個新項目。我們可以通過運行以下命令來做到這一點：

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

這將下載一個入門包，其中包含一個空的讓我們開始使用的 Ionic 模板（專為與我的書《Ionic in Action》一起使用而構(gòu)建）。進入目錄，cd civinfo，運行ionic 服務(wù)。

您現(xiàn)在可以預(yù)覽在 http://localhost:8100（或在由離子）。我建議打開瀏覽器的開發(fā)者工具以確認您看到空白屏幕。是的，應(yīng)該是白屏。我還建議使用 Chrome 預(yù)覽您的應(yīng)用時進行設(shè)備模擬。

2. 設(shè)置基本導(dǎo)航組件

導(dǎo)航是如此重要，我們應(yīng)該從這里開始設(shè)計我們的應(yīng)用程序。主要導(dǎo)航組件是 ionNavBar 和 ionNavViewionNavBar

和

ionNavViewionNavBar和 ionNavView。大多數(shù)應(yīng)用程序有一個設(shè)計功能，其中有一個帶有各種標(biāo)題和操作的導(dǎo)航欄按鈕，然后其余區(qū)域?qū)ｉT用于顯示內(nèi)容當(dāng)前視圖。

????ionNavBar??和 ??ionNavView?? 組件提供了該功能以及一些內(nèi)置智能來幫助我們解決問題。我們的應(yīng)用程序?qū)⒂袔讞l路線結(jié)束了，但我們在本教程中只構(gòu)建了一個。??

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

為了讓我們開始，我們首先包括將兩個導(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)該會看到應(yīng)用程序頂部出現(xiàn)一個綠色條。

從 Ionic 開始：探索 JavaScript 組件

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

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

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

3. 添加公園列表視圖

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

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

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

現(xiàn)在我們對此視圖有了一些目標(biāo)，讓我們從添加我們的 JavaScript 文件來注冊這個視圖。在以下位置創(chuàng)建一個新文件 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 聲明一個新狀態(tài) $stateProvider.state() 方法。這只能在 Angular 的 angular.config() 方法中進行配置。當(dāng)你聲明一個狀態(tài)時，你首先傳遞一個用于命名路由的字符串，在本例中為 places。然后你可以傳遞一個對象定義狀態(tài)的各種屬性，例如 URL、控制器和模板。您可以查看 UI Router 文檔以了解所有可能的配置選項。

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

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

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

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

ionContent 組件是一個有用的內(nèi)容包裝器，這有助于確保內(nèi)容空間的大小適合可用屏幕空間，幫助管理滾動，并可以公開其他不常用的行為。加載此視圖后，您將看到導(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)。要查看該視圖，請導(dǎo)航至 http://localhost:8100/#/places。這狀態(tài)定義中映射的 URL 可用于導(dǎo)航至路線。然后它應(yīng)該如下圖所示，標(biāo)題設(shè)置為“Local Parks”。

從 Ionic 開始：探索 JavaScript 組件

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

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

在我們可以做很多其他事情之前，我們需要加載一些數(shù)據(jù)。為此，我們需要添加一個 Angular 服務(wù) 幫助我們管理地理位置。在以后的教程中，用戶的位置將被設(shè)備檢測到。在那之前，我們將手動將其設(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"
  };
})

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

接下來，我們將更新控制器以加載列表來自 API。為簡單起見，我使用以下方式加載數(shù)據(jù) 控制器中的$http 服務(wù)。最好的做法是將其抽象出來變成一個服務(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();
});

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

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

<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 組件是最有用的組件之一，因為列表是一個非常有用的組件。由于較小的屏幕和典型的使用，移動設(shè)備中常見的設(shè)計選擇縱向。與使用 ul 和 li 的列表非常相似，ionList 包裝任何 ionItem 元素的數(shù)量。

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

在 ionItem 內(nèi)，您顯示名稱和地址。默認樣式是自動截斷（使用 CSS）任何溢出的文本以保留項目高度相同。

從 Ionic 開始：探索 JavaScript 組件

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

第 3 步：向列表添加無限滾動

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

我們的 API 還必須支持某種形式的分頁。上班。在這種情況下，Google Maps API 提供了一個必須傳遞的令牌加載下一組結(jié)果。我們需要更新控制器來管理這個邏輯讓我們從更新 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');
    });
  };
});

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

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

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

最后一步是在模板中啟用此功能。打開 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>

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

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

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

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