This is a simple client-side app using the Github API to list the repositories of a given user. This sample app is based on a modular component-oriented architecture, which keeps things maintainable and predictable. Each module in an Angular app is a module component. A module component is the root definition for that module that encapsulates the logic, templates, styles, routing and child components in the same folder. A deployed example is located at this address(better to see on desktop): https://gitrepos.herokuapp.com/
Heavy use of .component()
directive and enforced unidirectional data flow to partly implemente Flux.
Thanks to Babel, we can code in ES6 and gain in productivity.
The biggest advantage lies in import
and export
:
- We don't care about globals
- We don't care about wrapping our functions inside IIFEs when registering directives/components
- Thanks to ES6 Classes, we use less Angular-ish code because components/directives/controllers are exported as Classes. Angular is mostly present in module files where we import all our classes.
PostCSS and CSSnext are used instead of SASS in order to be more compatible in the future with the new properties and style only with the standard CSS language.
Karma and Jasmine coupled with angular-mock
Webpack is enough for our needs: a development server with hot-reload, numerous loaders(Babel, PostCSS, ...) to process our source files and concatenation/minification of these files for production.
- Clone this repo using
git clone https://github.com/AlexandreOrange/Angular-1.5-Sample-App.git
- Run
npm install
to install dependencies. - Run
npm run build
to create the production folder. - Run
npm start
to start the Express server. - You can now see the example app at
http://localhost:3000
- Use Redux and/or RxJs for complex state management. We use a pure AngularJS unidirectional data flow for the moment but it won't scale really well.
- Make the website responsive. It only works on desktop for the moment.
- Add an autocomplete component for the search input that will give suggestions of users while the visitor is typing.
- Clean the Webpack config and have different files for development, production and test.
- Write more unit tests for the critical search functionality.
- Write better directives for HTML tags like input or button. We should be able to use the normal tags without writing an additional directive on top of it.