Getting started with Angular 2

Workshop 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