state-geo: Test your knowledge of the US states
Note: This branch holds the Angular 1.5 version of this application in the master (this) branch. The Angular 2.0 version is in the angular2.0 branch.
The programming is done as an AngularJS 1 app using a component-based directive architecture similar to Angular 2.0 to make it easy to upgrade to the new version. This was accomplished by following these guidelines:
- AngularJS directives are created using the component() method instead of the directive() method.
- All of the directive's tag attribute values are locally scoped properties or event bindings of the directive's controller. These attributes are also used in Angular 2 templates with their values bound to the Angular 2 component using @Input (for properties) or @Output (for events).
- Each directive's controller is implemented in a separate ES6/2015 class. They will become the Angular 2 component class when the app is upgraded.
- The AngularJS directive's controller uses the controllerAs property (or the default $ctrl) as the controller's alias. This prevents use of $scope in the template since is not available in Angular 2. The AngularJS app does not use $scope elsewhere too.
- Replaced $watch() calls in AngularJS with RxJS Observable subscriptions since $watch is missing in Angular 2.
- AngularJS services are implemented as ES6/2015 classes. They will port directly to Angular 2.
- Standalone Angular controllers are NOT used in the app since they are dropped in Angular 2. Instead, the controller code is encapsulated in a component directive that functions as a container.
The build system for this application uses gulp with webpack (and babel). Stylus is used as the CSS preprocessor with Jeet to aid layout. If you want to run the program locally, follow the following steps:
# clone this repo git clone https://github.com/cdoremus/state-geo-angular.git # change directory to the repo cd state-geo-angular # make sure you have the global npm packages installed npm install -g gulp karma protractor # install the repo's dependencues npm install # build the app gulp # start the server in a separate window gulp serve
The application can then be accessed by browsing to http://localhost:4500/.
Unit and end-to-end functional tests can be run using the following commands:
#Run unit tests run using Karma npm tests #Run end-to-end functional tests using Protractor npm run e2e
The templates folder contains templates for new components built inside of a new folder under client/app. They can be created with this command: gulp component --name newComponentName
This project builds a bundle.js that is put in a destination folder (dist). The application can also be configured to use a RESTful Java web service and MongoDB (see state-geo-server-spring).
A running version of the application can be found at http://cdoremus.github.io/state-geo-quiz/.