Giter Club home page Giter Club logo

angular-brunch-seed-no-fuss's Introduction

angular-brunch-seed-no-fuss

A starter project for AngularJS using Brunch.io

AngularJS + Brunch

Features:

  • Full JS & HTML (no Coffeescript, no Jade) / SASS / SCSS automatically compiled on save
  • HTML5BP, Modernizr, and all the goodness of initializr
  • Compass-Twitter-Bootstrap integration
  • auto-reload during development saves you from manually refreshing the page
  • Javascript / CSS minification for production
  • karma integration for unit & e2e tests
  • Bootstrap integration with themes & font awesome.

Alternate Versions

How to use angular-brunch-seed-no-fuss

  • git clone https://github.com/ocombe/angular-brunch-seed-no-fuss to clone the angular-brunch-seed-no-fuss repository
  • cd angular-brunch-seed-no-fuss
  • sh scripts/init.sh to install node packages (or ./scripts/init.bat on Windows).

or if you have Brunch installed run:

brunch new myapp --skeleton https://github.com/ocombe/angular-brunch-seed-no-fuss

Running the app during development

  • sh scripts/server.sh to serve using Brunch (or ./scripts/server.bat on Windows).

Then navigate your browser to http://localhost:3333

NOTE: Occasionally the scripts will not load properly on the initial load. If this occurs, refresh the page. Subsequent refresh will render correctly. The first compilation is always longer.

Running the app in production

  • sh scripts/production.sh to minify javascript and css files (or ./scripts/production.bat on Windows).

Please be aware of the caveats regarding Angular JS and minification, take a look at Dependency Injection for information.

Running unit tests

  • sh scripts/test.sh to run unit tests with karma (or ./scripts/test.bat on Windows)
  • Open the browser you would like to test to http://localhost:3334

Notes:

  • Karma will run tests on save. To insure that changes are saved be sure to have ./script/server.sh or ./script/development.sh running in the console (or ./script/server.bat or ./script/development.bat on Windows).
  • You can set the browsers that you would like to target in the /test/karma_conf.js file E.g. browser = ["ChromeCanary", "Firefox"]

End to end testing

  • Run the app in development mode as described above using a separate terminal
  • ./scripts/test-e2e.sh to run e2e tests with karma using angular's scenario runner (or ./scripts/test-e2e.bat on Windows)
  • Be aware that changing the SASS files will compile the new CSS while the server is running, but that it won't trigger a e2e test reload, you'll have to manually relaunch the test server fow now

Generate documentation

  • Make sure that your _public folder is not in production mode (concatenated & without comments)
  • ./scripts/docco.sh to run documentation generation using docco (or ./scripts/docco.bat on Windows)
  • The documentation will be generated in the docs folder

Common issues

Initial load does not render correctly; scripts are not loading.

  • Occasionally the scripts will not load properly on the initial load. If this occurs, refresh the page. Subsequent refresh will render correctly.

EMFILE error

  • EMFILE means there are too many open files. Brunch watches all your project files and it's usually a pretty big number. You can fix this error with setting max opened file count to bigger number with command ulimit -n (10000 should be enough).

The complete Brunch FAQ

Receiving updates from upstream

When we upgrade angular-seed's repo with newer angular or testing library code, you can just fetch the changes and merge them into your project with git.

git pull origin master

Directory Layout

_public/                  --> Contains generated file for servering the app
                              These files should not be edited directly
app/                      --> all of the files to be used in production

  assets                  --> a place for static assets. These files will be copied to
                              the public directory un-modified.
    font/                 --> [fontawesome](http://fortawesome.github.com/Font-Awesome/) rendering icons
      fontawesome-webfont.*
    img/                  --> image files

  assets/partials/        --> HTML partial files
  assets/index.html       --> Index file
  scripts/                --> base directory for app scripts
    controllers.js        --> application controllers
    directives.js         --> custom angular directives
    filters.js            --> custom angular filters
    services.js           --> custom angular services

  styles/                 --> all custom styles. Acceptable files types inculde: less, sass, scss and stylus
    themes/               --> a place for custom themes
      custom/             --> starter theme **NOTE the underscore (_). Files begining with an underscore will not automatically be compiled, they must be imported.
        _override.sass    --> styles that should beloaded after bootstrap.
        _variables.sass   --> bootstrap variables to be used during the compilation process
    app.scss              --> a file for importing styles.
    _custom.scss          --> a file with a custom style example
  app.js                  --> application definition and routes

node_modules              --> NodeJS modules

scripts/                  --> handy shell scripts
  development.sh          --> compiles files and watches for changes
  init.sh                 --> installs node modules
  production.sh           --> compiles and compresses files for production use
  server.sh               --> runs a development server at `http://localhost:3333`
  test.sh                 --> runs all unit tests

test/                     --> test source files and libraries
  e2e/
    app/
      scenario.js         --> end-to-end specs
  unit/
    controllers.spec.js   --> specs for controllers
    directives.spec.js    --> specs for directives
    filters.spec.js       --> specs for filters
    services.spec.js      --> specs for services
  vendor/
    angular/              --> angular testing libraries
      angular-mocks.js    --> mocks that replace certain angular services in tests
  karma.conf.js           --> unit tests config file
  karma-e2e.conf.js       --> e2e tests config file

vendor/
  scripts/                --> angular and 3rd party javascript libraries
    angular/                  files are compiled to `vendor.js`
      angular.js          --> the latest angular js
      angular-*.js        --> angular add-on modules
    bootstrap/            --> for responsive layout
      bootstrap-*.js      --> bootstrap js modules
    console-helper.js     --> makes it safe to do `console.log()` always
    jquery.js             --> jquery lib (required by bootstrap)
    modernizr.js          --> to support your progressive enhancement
    respond.js            --> provide media queries support for old browser (ie6/7/8)
  styles/                 --> sapling / sapling themes and 3 party CSS
    bootstrap/            --> boostrap sass files
    font-awesome/         --> font awesome sass files

Contributers

Olivier Combe

For more information on angular please check out http://angularjs.org

angular-brunch-seed-no-fuss's People

Contributors

ocombe avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.