Giter VIP home page Giter VIP logo

angular-frontend-notes's Introduction

โšก Angular Frontend Notes

  • Angular app to allow a user to Create, Read, Update & Delete (CRUD) simple notes comprising a title and description.
  • Clicking on a note navigates to that note where it can be edited.
  • Tutorial code by Devstackr * see ๐Ÿ‘ Inspiration below. Note some changes were required to pass tslint tests
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

๐Ÿ“„ Table of contents

๐Ÿ“š General info

  • Notes can be viewed and deleted from the notes list.
  • Clicking on a note lets user edit it.
  • Fade-out gradient used with text to keep note cards all the same size.
  • List includes a filter so user can search for key words and filtered results will order themselves in terms of relevancy.
  • There is no backend for this app. A refresh loses all notes from the notes array.
  • Bulma CSS framework used to style components etc.
  • 5 part Youtube tutorial series in Angular 8. Upgraded to Angular 12.

๐Ÿ“ท Screenshots

Angular page

๐Ÿ“ถ Technologies

๐Ÿ’พ Setup

  • Run npm i to install dependencies
  • To start the server on localhost://4200 type: 'ng serve'
  • To create a build file in a docs folder type ng build --prod. This will deployed in github-pages when code is commited and pushed to Github

๐Ÿ’ป Code Examples

  • on initialisation of note-details.component.ts check if note is new using the note id.
ngOnInit() {
  // new note or editing existing one?
  this.route.params.subscribe((params: Params) => {
    this.note = new Note();
    if (params.id) {
      this.note = this.notesService.get(params.id);
      this.noteId = params.id;
      this.new = false;
    } else {
      this.new = true;
    }
  })
}

๐Ÿ†’ Features

  • Bulma CSS styles used for the first time.

๐Ÿ“‹ Status & To-do list

  • Status: Working. Passes lint test.
  • To-do: Nothing. Could add local storage or a backend (e.g. google Firebase).

๐Ÿ‘ Inspiration

๐Ÿ“ License

  • This project is licensed under the terms of the MIT license.

โœ‰๏ธ Contact

angular-frontend-notes's People

Contributors

andrewjbateman avatar

Watchers

 avatar  avatar

Forkers

sss-software

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.