sobota, 2 listopada 2013

AngularJS example MotoAds more advanced than the tutorial on angularjs.org

I have just been learning AngularJS and decided to build demo application that cover more techniques than the tutorial on angularjs.org. This application is only demo so it do not have complete server side, some features have the todos and there is not any test.

This demo application is some kind of automotive adverts portal, so I called it MotoAds. It has two main features:
  • List of adverts – includes an advanced filtering and sorting.
  • Add advert – a form with some client side field validations.

MotoAds application looks like this: Application folders tree:

Root file index.html included external resource:
  • bootstrap.css (2.3.2)
  • angular.js, angular-resource.js (1.0.8)
  • ui-bootstrap-tpls-0.6.0.js (0.6.0)
and internal resource:
  • app.css
  • app.js
  • services.js
  • controllers.js

Bootstrap angular application, add navigation and route templates

In index.html we auto-bootstrap the angular application by defining directive ng-app: In app.js we define new angular module motaAdsApp (name must be the same as value of ng-app): In index.html we use Navbar component from the bootstrap library: We define NavbarController with function routeIs (used in ng-class). It allows us to highlight link which is active. We add directive ng-view which renders the proper template into index.html in case of the route definition: Url routes are defined in app.js:

Adverts - list, filtering, sorting

In adverts.html we define the left filtering panel with brands and models. We use the ui.bootstrap.accordion component: In controller.js we write AdvertsController in which we using method Brand.query() to fill $scope.brands: Definition of the Brand service is in service.js - it is the simple service which reads brands.json: Next in adverts.html we write filters for country, region and year (from-to): We add to adverts.html the panel with information which filters are active and the options of removing them: In controller.js we have to fill angular models, define variables and functions which are used by the filters: We define the Country service in service.js: Now we add the sorting option and the table containing the list of adverts: The adverts table is filled in controller.js in this lines: The Advert service is defined in services.js - it reads adverts.json:

Add advert - validation and currency directive



We define the adding advert form in addAdverts.html: We write AddAdvertController in controllers.js: Last thing is custom directive ma-currency used in addAdvert.html: Definition of ma-currency directive is in controller.js:

If you want to run this example on your computer, you can download sources from GitHub and run it on any web server. For example copy folder app to D:\apache\htdocs\app and run in web browser http://localhost/app/index.html.

Any comment would be highly appreciated.

Brak komentarzy: