AngularJS - Real-Skill/support GitHub Wiki
How to start?
Scaffolding
You can use ready Angular JS scaffolding and not worry about task configurations. It's already done!
- Angular JS with unit & e2e tests configuration
- Angular JS with unit tests configuration
- Angular JS with e2e tests configuration
Example task structure:
angularjs
|-- app
| |-- app.js
|-- test
| |-- features
| | |-- pageFragments
| | | |-- sampleApplication.fragment.js
| | |-- app.spec.js
| |-- unit
| | |-- app.spec.js
| |-- karma.conf.js
| |-- protractor.conf.js
|-- .bowerrc
|-- .gitattributes
|-- .gitignore
|-- .jshintignore
|-- .jshintrc
|-- bower.json
|-- Gruntfile.js
|-- package.json
|-- README.md
app
The main directory of the whole project. Here put the files constituting the task.
test
You can add unit and e2e tests to your project.
Recommended configuration:
- unit test karma.conf.js
- e2e tests protractor.conf.js
.bowerrc
Bower can be configured using JSON in a .bowerrc file
.gitattributes
With text set to "auto". The path is marked for automatic end-of-line normalization.
.gitignore
A .gitignore file specifies intentionally untracked files that Git should ignore.
###.jshintignore Thanks to .jshintignore JSHint can be configured to ignore files based on their location in the filesystem.
###.jshintrc Is used to specifying linting options.
bower.json
Recommended configuration: bower.json
Gruntfile.js
Recommended configuration: Gruntfile.js
To run verify jshint:
grunt jshint:default
To start developing unit tests
grunt test:dev
To run e2e tests in development mode
grunt test:e2e
package.json
Recommended configuration: package.json
To run verify jshint, tests and coverage:
npm test
README.md
Here give instructions necessary to do the task.
Recommended configuration
karma.conf.js
module.exports = function (config)
{
'use strict';
config.set({
autoWatch: true,
basePath: '../',
frameworks: ['jasmine'],
files: ['app/**/*.js','test/unit/**/*.spec.js'],
exclude: [],
reporters: ['spec', 'coverage', 'junit'],
preprocessors: {
'app/**/*.js': 'coverage'
},
coverageReporter: {
dir: 'target/',
type: 'cobertura',
file: 'coverage.xml'
},
junitReporter: {
outputFile: 'target/test-results.xml'
},
port: 8080,
browsers: ['PhantomJS'],
plugins: ['karma-phantomjs-launcher',
'karma-jasmine',
'karma-spec-reporter',
'karma-junit-reporter',
'karma-coverage'],
singleRun: true,
colors: true,
logLevel: config.LOG_INFO,
usePolling: true
});
};
protractor.conf.js
(function ()
{
'use strict';
module.exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'jasmine2',
specs: [
'features/*.spec.js'
],
capabilities: {
'browserName': 'chrome'
},
baseUrl: 'http://127.0.0.1:9001',
allScriptsTimeout: 40000,
resultJsonOutputFile: 'target/report.json',
onPrepare: function ()
{
var jasmineReporters = require('jasmine-reporters');
var SpecReporter = require('jasmine-spec-reporter');
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
consolidateAll: true,
filePrefix: 'protractor-results',
savePath: 'target'
}));
jasmine.getEnv().addReporter(new SpecReporter());
}
};
})();
bower.json
{
"name": "angularjs-scaffolding",
"version": "0.0.0",
"private": true,
"dependencies": {
"angular": "1.3.15",
"bootstrap": "3.1.1"
},
"devDependencies": {
"angular-mocks": "1.3.15"
}
}
Gruntfile.js
/*jshint camelcase:false*/
module.exports = function (grunt)
{
'use strict';
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-protractor-webdriver');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-karma');
require('load-grunt-tasks')(grunt);
var config = {
app: 'app'
};
grunt.initConfig({
config: config,
watch: {
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: ['<%= config.app %>/**/*.html', '<%= config.app %>/**/*.js']
}
},
connect: {
options: {
port: 9000,
livereload: 35729,
hostname: '127.0.0.1'
},
test: {
options: {
base: ['app'],
port: 9001
}
},
livereload: {
options: {
open: true,
middleware: function (connect)
{
return [connect().use('/bower_components',
connect.static('./bower_components')),
connect.static(config.app)
];
}
}
}
},
protractor_webdriver: {
driver: {
options: {
path: 'node_modules/.bin/',
command: 'webdriver-manager start',
keepAlive: true
}
}
},
protractor: {
options: {
configFile: 'test/protractor.conf.js',
keepAlive: false,
noColor: false
},
chrome: {
options: {
args: {
browser: 'chrome'
}
}
},
firefox: {
options: {
args: {
browser: 'firefox'
}
}
},
phantomjs: {
options: {
args: {
browser: 'phantomjs'
}
}
}
},
karma: {
options: {
configFile: 'test/karma.conf.js'
},
unit: {
singleRun: true
},
dev: {
singleRun: false
}
},
jshint: {
default: {
options: {
jshintrc: true
},
files: {
src: ['app/**/*.js',
'test/**/*.js',
'!app/bower_components/**/*.js']
}
},
verify: {
options: {
jshintrc: true,
reporter: 'checkstyle',
reporterOutput: 'target/jshint.xml'
},
files: {src: ['app/**/*.js',
'test/**/*.js',
'!app/bower_components/**/*.js']}
}
}
}
);
grunt.registerTask('serve', ['connect:livereload', 'watch']);
grunt.registerTask('verify', ['jshint:verify',
'karma:unit',
'connect:test',
'protractor_webdriver',
'protractor:chrome']);
grunt.registerTask('test:dev', ['karma:dev']);
grunt.registerTask('test:e2e', ['connect:test',
'protractor_webdriver',
'protractor:chrome']);
grunt.registerTask('default', ['serve']);
};
})();
package.json
{
"name": "angularjs-scaffolding",
"version": "0.0.0",
"private": true,
"dependencies": {},
"devDependencies": {
"grunt": "0.4.5",
"grunt-cli": "0.1.13",
"grunt-contrib-connect": "0.7.1",
"grunt-contrib-jshint": "0.11.3",
"grunt-contrib-watch": "0.6.1",
"grunt-karma": "0.10.1",
"grunt-protractor-runner": "1.1.4",
"grunt-protractor-webdriver": "0.1.9",
"protractor": "2.1.0",
"jasmine": "2.3.2",
"jasmine-reporters": "2.0.7",
"jasmine-spec-reporter": "2.4.0",
"karma": "0.12.16",
"karma-coverage": "0.3.1",
"karma-jasmine": "0.1.5",
"karma-junit-reporter": "0.2.2",
"karma-phantomjs-launcher": "0.1.4",
"karma-spec-reporter": "0.0.13",
"load-grunt-tasks": "0.4.0"
},
"scripts": {
"postinstall": "webdriver-manager update --standalone",
"test": "grunt verify --force"
}
}