Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leolanese/angular-uk-trains
Angular application to visualize the UK train from specific stations: Using RWD, RequireJS, SCSS, Bower and Grunt
https://github.com/leolanese/angular-uk-trains
angular angularjs angularjs-application bower great-anglia grunt grunt-karma html5 javascript requirejs rwd scss uk-train
Last synced: about 2 months ago
JSON representation
Angular application to visualize the UK train from specific stations: Using RWD, RequireJS, SCSS, Bower and Grunt
- Host: GitHub
- URL: https://github.com/leolanese/angular-uk-trains
- Owner: leolanese
- Created: 2014-09-18T11:45:45.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-11-05T21:40:22.000Z (about 4 years ago)
- Last Synced: 2024-11-14T03:16:46.715Z (about 2 months ago)
- Topics: angular, angularjs, angularjs-application, bower, great-anglia, grunt, grunt-karma, html5, javascript, requirejs, rwd, scss, uk-train
- Language: JavaScript
- Homepage: https://leolanese.com/angular-trains/
- Size: 247 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## AngularJS React time Train application
This ia an AngularJS application to visualise the UK trains, I'm using the transportapi.com API using RWD, RequireJS, SCSS, Bower and Grunt.
# Getting Started
To get you started you can simply clone the angular-base repository and install the dependencies:
# Clone angular-trains
Clone the angular-trains repository using:
```
git clone origin https://github.com/sirwilliam/angular-trains.git
cd angular-trains
```
# Install Dependencies
We have two kinds of dependencies in this project: tools and angular framework code. The tools help
us manage and test the application.
* We get the tools we depend upon via `npm`, the [node package manager][npm].
* We get the angular code via `bower`, a [client-side code package manager][bower].
We have pre-configured `npm` to automatically run `bower` so we can simply do (package.json):
```
npm install
```
# Verify install
```
node -v;
npm -v;
git --version;
node --version;
bower -v;
karma --version;
grunt -version;
sass -v;
phantomjs --version;
casperjs --version;
bower version;
```
You should find that you have a new folders in your project.
* `node_modules` - contains the npm packages for the tools we need npm run test-single-run
# Run the Application
I have pre-configured the project with a simple development web server.
- node scripts/web-server.js
- run http://localhost:8888/angular-trains/app/index.html
# How to run the unit-test:
* the configuration is found at `/karma.conf.js`
* the unit tests are found in `tests/`.
- node scripts/web-server.js
- sudo karma start karma.conf.js --log-level=debug
I also included the Grunt-karma tasks:
grunt karma
You can also ask Karma to do a single run of the tests and then exit.
- npm run test-single-run
# Skills I have used (the usual suspects):
├── javascript
├── HTML5
└── CSS3
# Progressive enhancement path
├── using father with: no-js, lt-ie9, lt-ie8, lt-ie7 and no-svg
├── selectivizr.js polyfill
├── html5shiv.js polyfill
├── respond.js
├── feature detection framework modernizr.js
└── including fallbacks for legacy browsers and all vendor using compass mixins
# Tools I have used:
# AngularJS
├── filters
├── services
├── directives
├── controllers
└── angularRoute
# node.js
├── grunt
├── compass
├── jshint
├── requirejs
├── sass
├── watch
└── ngmin
# Grunt.js
"karma-script-launcher": "~0.1.0",
"karma-chrome-launcher": "^0.1.3",
"karma-firefox-launcher": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-jasmine": "^0.1.5",
"karma-requirejs": "^0.2.1",
"karma-coffee-preprocessor": "~0.1.0",
"karma-phantomjs-launcher": "~0.1.0",
"karma": "^0.12.14",
"karma-ng-scenario": "~0.1.0",
"grunt": "^0.4.4",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-compass": "^0.7.2",
"grunt-contrib-jshint": "^0.10.0",
"grunt-contrib-sass": "^0.7.3",
"grunt-contrib-requirejs": "^0.4.3",
"grunt-contrib-csslint": "^0.2.0",
"grunt-contrib-uglify": "^0.4.0",
"karma-safari-launcher": "^0.1.1",
"requirejs": "^2.1.11",
"grunt-karma": "^0.8.3",
"grunt-contrib-jasmine": "^0.5.3",
"grunt-template-jasmine-requirejs": "^0.1.10",
"grunt-ngmin": "0.0.3"
"grunt-modernizr": "^0.5.2",
└──
Enabled Extras
└── shiv
└── load
└── mq
└── cssclasses
└── fontface
└── Generating a custom Modernizr build: modernizr-custom.js
└── Uglifying
# Bower.js
├─┬ angular-mocks#1.2.16 extraneous (1.2.17-build.223+sha.d18d5f5 available, latest is 1.3.0-build.2792+sha.0dc35ef)
│ └── angular#1.2.16 (latest is 1.3.0-build.2792+sha.0dc35ef)
├─┬ angular-route#1.2.16 extraneous (1.2.17-build.223+sha.d18d5f5 available, latest is 1.3.0-build.2792+sha.0dc35ef)
│ └── angular#1.2.16
├─┬ angular-scenario#1.2.16 extraneous (1.2.17-build.223+sha.d18d5f5 available, latest is 1.3.0-build.2792+sha.0dc35ef)
│ └── angular#1.2.16
├─┬ bootstrap#3.1.1 extraneous
│ └── jquery#1.10.2 (2.1.1 available)
├── bootstrap-sass-official#3.1.1+2 extraneous
├── happen#0.1.3 extraneous
├── jasmine#1.3.1 extraneous (latest is 2.0.0)
├─┬ jasmine-sinon#0.3.1 (0.3.2 available, latest is 0.4.0)
│ ├── jasmine#1.3.1 (latest is 2.0.0)
│ └── sinonjs#1.7.3 (latest is 1.9.1)
├── jquery#1.10.2 (latest is 2.1.1)
├── modernizr#2.6.3 (latest is 2.8.2)
├── namespace#0.5.3 extraneous
├── normalize-css#3.0.1 extraneous
├── requirejs#2.1.11 extraneous (2.1.13 available)
├── requirejs-text#2.0.12 extraneous
└── selectivizr#1.0.2 extraneous
# Automatic Test
├──Jasmine (Behavior Driven Development testing framework: or http://searls.github.io/jasmine-all/jasmine-all-min.js)
└──karma (Test Driver)
├──safari pluggin karma-safari-launcher
└──ios pluggin karma-ios-launcher
# Lay-out test:
cd tests/casper
casperjs go.js http://www.bostonglobe.com/
# Parts of the tests:
├── lib _ jasmine Framework
├── spec _ unit-test
├── src_ Code to be tested
└── SpecRunner.html - Runner
# Libraries:
└── rwd-reset.css (https://github.com/sirwilliam/rwd-reset)
# IDE
└── WebStorm
# RequireJS conf file:
└── main.js
# AngularJS conf file:
└── app.js
--------
# Problems on push:
git rm --cache -r -f .sass-cache/
git rm --cache -r -f .idea/
---
### :100: Thanks!
#### Let's stay in touch!
> { I'm `Leo Lanese`,
'Building Inspiring Responsive `Reactive Solutions`',
'`London, UK`' }
##### :radio_button: linkedin: @LeoLaneseltd
##### :radio_button: Twitter: @LeoLaneseltd
##### :radio_button: Portfolio: www.leolanese.com
##### :radio_button: DEV.to: dev.to/leolanese
##### :radio_button: Blog: leolanese.com/blog
##### :radio_button: Questions / Suggestion / Recommendation: [email protected]