Giter Club home page Giter Club logo

tutorial-photo-gallery-angular's Introduction

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. Follow along to create a complete CRUD (create-read-update-delete) experience.

Powered by Ionic Angular (web app) and Capacitor (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

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 Storage.

How to Run

Note: It's highly recommended to follow along with the tutorial guide, which goes into more depth, but this is the fastest way to run the app.

  1. Install Ionic if needed: npm install -g @ionic/cli.
  2. Clone this repository.
  3. In a terminal, change directory into the repo: cd photo-gallery-capacitor-ng.
  4. Install all packages: npm install.
  5. Run on the web: ionic serve.
  6. Run on iOS or Android: See here.

tutorial-photo-gallery-angular's People

Contributors

dependabot[bot] avatar dotnetkow avatar jcesarmobile avatar mhartington avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.