https://github.com/ionic-team/tutorial-photo-gallery-angular

Photo Gallery Tutorial: Ionic Angular and Capacitor
https://github.com/ionic-team/tutorial-photo-gallery-angular

angular capacitor ionic ionic-framework

Last synced: about 1 month ago
JSON representation

Photo Gallery Tutorial: Ionic Angular and Capacitor

• Host: GitHub
• URL: https://github.com/ionic-team/tutorial-photo-gallery-angular
• Owner: ionic-team
• License: other
• Created: 2019-11-15T03:51:15.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-07-09T04:28:12.000Z (4 months ago)
• Last Synced: 2024-10-02T06:21:57.797Z (about 1 month ago)
• Topics: angular, capacitor, ionic, ionic-framework
• Language: TypeScript
• Homepage: https://ionicframework.com/docs/angular/your-first-app
• Size: 2.45 MB
• Stars: 140
• Watchers: 16
• Forks: 183
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Build Your First Ionic App: Photo Gallery (Ionic Angular and Capacitor)

Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the ["Your First App: Angular" guide](https://ionicframework.com/docs/angular/your-first-app). Follow along to create a complete CRUD (create-read-update-delete) experience.

Powered by [Ionic Angular](https://ionicframework.com/docs/angular/overview) (web app) and [Capacitor](https://capacitor.ionicframework.com) (native app runtime).

## How It Works

After the user navigates to Tab 2 (Photos), they can tap/click on the camera button to open up the device's camera. After taking or selecting a photo, it's stored permanently into the device's filesystem. When the user reopens the app at a later time, the photo images are loaded from the filesystem and displayed again in the gallery. The user can tap on a photo to be presented with the option to remove the photo.

## Feature Overview

* App framework: [Angular](https://angular.io)

* UI components: [Ionic Framework](https://ionicframework.com/docs/components)

  * Camera button: [Floating Action Button (FAB)](https://ionicframework.com/docs/api/fab)

  * Photo Gallery display: [Grid](https://ionicframework.com/docs/api/grid)

  * Delete Photo dialog: [Action Sheet](https://ionicframework.com/docs/api/action-sheet) 

* Native runtime: [Capacitor](https://capacitor.ionicframework.com)

  * Taking photos: [Camera API](https://capacitor.ionicframework.com/docs/apis/camera)

  * Writing photo to the filesystem: [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem)

  * Storing photo gallery metadata: [Preferences API](https://capacitor.ionicframework.com/docs/apis/preferences)

## Project Structure

* Tab2 (Photos) (`src/app/tab2/`): Photo Gallery UI and basic logic.

* PhotoService (`src/app/services/photo.service.ts`): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.

## How to Run

> Note: It's highly recommended to follow along with the [tutorial guide](https://ionicframework.com/docs/angular/your-first-app), which goes into more depth, but this is the fastest way to run the app. 

0) Install Ionic if needed: `npm install -g @ionic/cli`.

1) Clone this repository.

2) In a terminal, change directory into the repo: `cd photo-gallery-capacitor-ng`.

3) Install all packages: `npm install`.

4) Run on the web: `ionic serve`.

5) Run on iOS or Android: See [here](https://ionicframework.com/docs/building/running).