Git Product home page Git Product logo

angular-require-starter's Introduction

angular-require-starter

Seed project for getting started with an AngularJS+RequireJS application. Demonstrates directory structure, routing and testing. Comes with some base classes + karma / phantomjs for unit testing.

TL:DR; install instructions

  • install node
  • install ruby (this and sass can be skipped if you remove sass from the grunt configuration as well)
  • install sass (gem install sass)
  • npm install -g bower
  • npm install -g karma
  • npm install -g grunt-cli
  • npm install
  • bower install

To recompile only the sass files

  • grunt build:sass

To recompile only the js files

  • grunt build:js

To build (dev)

  • grunt build:dev

To build (prod)

  • grunt build

To test

  • grunt karma:unit

Directory Structure

The root directory simply contains two folders: src and www. The goal is simple: the src folder contains assets that aren't intended to be exposed to the world, such as scss files and unminified js files. The www folder will contain all the standard assets that our website will use: css files, minifed js files, images, fonts and so on.

To make this transition as smooth as possible, we'll use a tool called grunt to perform all of the necessary tasks for us- compiling scss into css, minifying js files, copying files into the correct locations, and so on.

By performing these steps in development, we ensure there's no surprise and mad-dash fixes that need to be done when we're ready to move to testing and production.

The src directory

The src directory is where the build of our code will go. By default, it will include:

  • scss for sass files
  • app for our JavaScript application
  • node_modules for libraries auto-installed to help out development
  • package.json tells node what to install
  • Gruntfile.js tells grunt what development tasks to automate, and how to run them

The www directory

  • css will be empty in the repository, as our build tasks will add the compiled .css files in development. Ideally, these should only be checked into source control on a release branch.
  • js will be empty in the repository, and contain files minified by the build tasks in development. Ideally, these files should only be checked into source control on a release branch.
  • media should contain images, videos, fonts and other media related assets. These files are safe to commit to source control for most projects

Build Reports

The grunt build tools are setup to generate build reports by default in a directory called 'build_reports' next to src and www, but that is simply the default value in the Gruntfile.js configuration file. This directory probably shouldn't be checked into source control, and it should be setup to whichever location makes sense based on the backend technology in use, so long as it is not inside of the www folder in production.

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.