/hackjam.angular

hackjam.angular

Primary LanguageCSS

Getting started with Angular 2

HackJam Angular 2

The goal of this first HackJam will be to learn the basic of the Framework

  • Module
  • Component
  • Property Binding
  • Forms and NgModel
  • Bootstrap
  • A bit of TypeScript
    • Define a class/Type
    • Define a typed array

You can find the repo on Github

Clone it: git clone https://github.com/hackages/hackjam.angular.git

Bootstrap your application: npm start

!oops

This application doesn't work :(

Where do we start?

A live introduction from us!!

Here are few questions you should be able to answer by the end of this session

What is a module?

How do you define a component?

How do you bootstrap an application?

How does property binding work?

Rebuild this app using angular-cli

install angular-cli: npm i angular-cli@latest -g

Here you'll find more information about angular-cli

TODO: Features to implement in your app

Final app

  • Fix all the bugs before trying to implement any other features
  • Display all categories on the menu
    • Learn about structural directive
    • Learn how to create a class and create a typed array in TypeScript
  • Display all books on the main area
    • Learn about property bindings
  • On click on a category, update the list of books and change the class to selected
    • The filter should be apply to the category of the book
    • The css class should be applied to the anchor: hint [class.selected]
  • On click on the filter button, open the sidebar filter component
  • Implement the search
    • Learn about Forms and NgModel
    • The search should be applied to the title and the category
  • Architecture: Split your app into small components (bonus)

Happy Coding!!

Hackages Team