Skip to content
This repository has been archived by the owner on Apr 4, 2023. It is now read-only.

Component based AngularJS application example (Phonecat) in modern Javascript with Webpack

License

Notifications You must be signed in to change notification settings

emartech/angular-phonecat-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular Phonecat Components

devDependency Status

Component based AngularJS application example (Phonecat) in modern Javascript with Webpack.

Introduction

The idea came from the original Angular Phonecat application to recreate it using modern tooling (using Angular 1.5 with components and new language features in ES6/ES7). It was first introduced in our workshop (source code) where we migrated the application to it's final stage what you can see in this repository.

This final stage is intended to show how close an Angular 1 application can be to Angular 2 in concepts and data flow.

For those not knowing the original repository, it is a phone listing application where you can filter the list on the main page and view detailed description on phones at the details page.

Technical details

It uses the latest Angular available (1.5) and many features from ES6 (imports, classes, let etc.). To make it work in browsers, the code is transpiled with Babel (latest preset) and bundled into single files with Webpack.

It consists of 3 different entry points.

  • client/app/main.js is the main entry point and holds the application logic
  • client/app/vendor.js is where the third party libraries reside like angular itself
  • client/app/styles.js consists of required stylesheets for the pretty display

For Http calls and data access only services are used. Components (introduced in Angular 1.5) access data through these services and pass down to child components if necessary.

Only one way data binding is used in combination with lifecycle events, data flows only up or downwards. Components don't use the scope or the root scope for any communication.

Components containing application specific business logic considered as smart components. Those without application specific logic, such as the select component, considered dumb components. More on this topic can be found in this article.

Getting started

git clone https://github.com/emartech/angular-phonecat-components.git
cd angular-phonecat-components
npm i
npm start

Now the application is running, open your browser and visit the link http://localhost:3000.

About

Component based AngularJS application example (Phonecat) in modern Javascript with Webpack

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published