Angular Example
This project is a note-taking app template built with Angular, TypeScript, and Tailwind CSS, designed to demonstrate integration with Juno for app development. It showcases authentication, data storage, and file storage using Juno's Satellite container.
You can scaffold it using the following command, or browse the source code:
npm create juno@latest -- --template react-example
Source: github.com/junobuild/create-juno/templates/angular-example
Folder Structure
angular-example/
├── public/ # Static assets
├── src/
│ ├── app/ # Angular modules, components, services, and types
│ ├── environments/ # Environment configuration files
│ ├── styles.css # Tailwind CSS styles
│ └── main.ts # Angular entry point
├── juno.config.mjs # Juno Satellite configuration
├── package.json # Project dependencies and scripts
├── angular.json # Angular CLI configuration
├── README.md # User-facing documentation
└── ... # Other config and build files
Key Features
- Juno Integration: Uses Juno's Satellite for authentication, Datastore, and Storage.
- Authentication: Login/logout flow.
- Notes Collection: Users can create, view, and delete notes (text, with optional file URL).
- Images Collection: Supports file storage for images.
- Responsive UI: Built with Tailwind CSS for modern styling.
- Banner: Warns if the Satellite is not configured for local development.
Main Components
- app.component.ts: Main Angular component, bootstraps the app and layout.
- components/: Contains UI and logic for authentication, notes table, modal, banner, etc.
- services/: Angular services for interacting with Juno and managing app state.
- types/note.ts: TypeScript interface for notes.
Data Structure
- Note (
src/app/types/note.ts
):export interface Note {
text: string;
url?: string;
}
How to Run
- Install dependencies:
npm install
- Start Juno local emulator:
important
Requires the Juno CLI to be available npm i -g @junobuild/cli
juno dev start
-
Create a Satellite for local dev:
- Visit http://localhost:5866 and follow the instructions.
- Update
src/environments/environment.ts
with your Satellite ID.
- Create required collections:
notes
in Datastore: http://localhost:5866/datastoreimages
in Storage: http://localhost:5866/storage
- Start the frontend dev server (in a separate terminal):
npm run start
Juno-Specific Configuration
- juno.config.mjs: Defines Satellite IDs for development/production, build source, and predeploy steps.
- src/environments/environment.ts: Contains the Satellite ID for local development.
- src/environments/environment.prod.ts: Contains the Satellite ID for production.
Production Deployment
- Create a Satellite on the Juno Console for mainnet.
- Update
src/environments/environment.prod.ts
andjuno.config.mjs
with the production Satellite ID. - Build and deploy:
npm run build
juno deploy
Notes
- The app is intended as a starting point for Juno-based projects.
- All logic is in TypeScript and Angular components/services.
- The app is fully client-side (Server Side Rendering is not supported yet) and interacts with Juno via the Satellite container.
Juno SDK Used
The following functions from @junobuild/core
are used in this example:
Function | Purpose/Description | Where Used (File/Component) | Juno Docs/Source Reference |
---|---|---|---|
initSatellite | Initialize Juno Satellite container | src/app/app.component.ts | Initialization |
authSubscribe | Subscribe to auth state changes | src/app/services/auth.service.ts | Subscription |
signIn | Sign in user | src/app/components/login/login.component.ts | Sign-in |
signOut | Sign out user | src/app/components/logout/logout.component.ts | Sign-out |
listDocs | List documents in a collection | src/app/services/docs.service.ts | List documents |
setDoc | Create or update a document | src/app/components/modal/modal.component.ts | Add a document |
deleteDoc | Delete a document | src/app/components/delete/delete.component.ts | Delete a document |
uploadFile | Upload a file to storage | src/app/components/modal/modal.component.ts | Upload asset |
deleteAsset | Delete a file from storage | src/app/components/delete/delete.component.ts | Delete asset |