An opinionated starting point for Angular 1.x web applications. Pair this with app-sprout-server.
Why? What's wrong with existing seeds like nghellostyle, the official angular-seed, or ngbp? Nothing, really. In fact, I learned an incredible amount from all of the above, and copied the important stuff like:
- Grouping everything in 'states' and 'components'.
- Giving each state its own module and controller.
- 'controller as' syntax for more specific data binding.
However, I found a number of things I wanted to change, add, or remove. Enough that I found it worthy of creating my own seed.
- I want to use Gulp.
- I use my own coding style, which uses different linters (eslint and scss-lint with csscomb).
- I want Pug and Sass out of the box.
- I don't want any CSS frameworks or grids, just a custom, minimal reset & starting point.
This project is incomplete. I'm still learning, and I know this seed is missing features.
I still have many questions to answer and best practices to discover, and when I do, this repo will be updated with my findings.
What defining tools and libraries make up this project's architecture?
- Pug
- Sass with autoprefixer.
- Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"brew updatebrew doctoropen ~./bash_profile- Add
export PATH="/usr/local/bin:$PATH"to your bash profile and save it.
- NodeJS
brew install node
- Bower
npm install --global bower
- Gulp
npm install --global gulp
- scss-lint
gem install scss-lint
npm installbower installgulp
app/
common-components/
directives/
dropdown/
_dropdown_styles.scss
dropdown_controller.js
dropdown_directive.js
dropdown_template.pug
filters/
reverse_filter.js
services/
common-styles/
_base.scss
_breakpoints.scss
_mixins.scss
_reset.scss
_variables.scss
states/
root/
parent-state-2/
child-state-1/
_child-state-1_styles.scss
child-state-1_controler.js
child-state-1_module.js
child-state-1_template.pug
child-state-1_test-e2e.js
child-state-1_test-unit.js
child-state-2/
_child-state-2_styles.scss
child-state-2_controler.js
child-state-2_module.js
child-state-2_template.pug
child-state-2_test-e2e.js
child-state-2_test-unit.js
_parent-state-2_styles.scss
parent-state-2_controler.js
parent-state-2_module.js
parent-state-2_template.pug
parent-state-2_test-e2e.js
parent-state-2_test-unit.js
state-1/
_state-1_styles.scss
state-1_controller.js
state-1_module.js
state-1_template.pug
state-1_test-e2e.js
state-1_test-unit.js
app_module.js
app_styles.scss
index.pug
bower_components/
build/
images/
node_modules/
tests/
coverage/
karma.config.js
protractor.config.js
.csscomb.json
.eslintrc
.gitignore
.htaccess
bower.json
favicon.png
gulpfile.js
LICENSE
package.json
README.md
scss-linting-config.yml
Unit tests make code robust and easy to change. The mocha framework was chosen for its modularity, flexibility, and node.js proficiency.
Unit tests define the applications API. Take some time to read An Introduction To Unit Testing In AngularJS Applications.
gulp unit-tests
End to end tests interact with your interface the same way a user would, in a browser. Try the protractor tutorial.
- Protractor
- Make sure you have a Java runtime environment installed
gulp e2e-tests
gulp build
Building does a number of things:
- Cleans the build directory by removing all files using del.
- Minifies all images using gulp-imagemin.
- Injects Angular dependancy annotations using ng-annotate.
- Concatenates and minifies all JavaScript files using gulp-concat and gulp-uglify.
- Concatenates and minifes all stylesheets using gulp-minify-css.
- Minifies HTML using gulp-minify-html.
Slightly modified XO style. You can view the ESLint config here.
[ state-name ] _ [ type ] . [ file extension ]
home-state_controller.js
home-state_module.js
home-state_styles.scss
home-state_template.pug
home-state_test-unit.js
Use hyphens for state or component names. Tag the end of each file with an underscore followed by the specific function of the file.