Skip to content

worldskills/WorldSkills-Angular-Skeleton

Repository files navigation

WorldSkills Angular App Skeleton

This application skeleton is to be used when creating WS Applications.

It contains a good base for a project and includes many useful components helping you to kickstart your application.

Features

  • Yeoman base
  • Angular 1.4.0
    • Including angular-resource, angular-cookies, angular-sanitize ngAnimate, ngAria, ngCookies, ngMessages, ngResource, ngRoute, ngSanitize
  • WorldSkills Bootstrap and App templates already integrated
  • angular-ui-router to allow nested views
    • example views and controllers (click on the competition navi item)
  • angular-translate internationalization support integrated
    • includes angular-translate-loader-url, angular-translate-static-files and angular-translate-storage-local to allow you to load static JSON files for UI element translations and store current translation in local storage (cookie fallback)
  • jquery
  • angular ui-bootstrap
    • Note If you wan't to customize your templates, remove '-tpls' from app/angular-bootstrap/bower.json under 'main'. The templates can be found from the templates folder under app.
  • select2 is not included automatically, it's replaced by ui-select, see angular-ui project for a lot of useful extras

Starting a new project

# Clone a shallow copy of the repository (no history)
$ git clone --depth 1 [email protected]:worldskills/WorldSkills-Angular-Skeleton.git my_application
$ cd my_application

# remove existing git data
$ rm -rf .git

# initialize git for a new project
$ git init

$ npm install
# see bower.json and update version numbers (latest stable for angular libs)
$ bower update

# start the project
$ grunt serve

# to build for distribution
$ grunt build

It is recommended also to rename your application, at the moment it is called 'worldSkillsApp'

angular.module('worldSkillsApp')

It is safe to use global search & replace to rename. There should be 18 references accross the project.

Routing your application

Routing is done with angular-ui-router Routing configuration can be found from app.js

Yeoman

See yeoman instructions on how to create new controllers, views, directives etc.

Yeoman on github

Testing

Karma unit tests Test files under /test/spec

$ grunt test

Protractor E2E testing Test files under /test/protractor

# Start the standalone selenium server
$ ./node_modules/selenium-standalone/bin/start-selenium

# Run tests
$ protractor protractor.conf

Extras

Angular-UI project has many other useful extras that are worth looking into depending on the needs of your project