angular-boilerplate

A startup template of AngularJS Project.

===================

Features

1. Folder Structure
2. Code Standard
3. Mock Server/Dummy Data
4. Localization
5. Test Environment
6. Documents
7. Code quality check
8. Build Automation

Folder Structure

angularjs-boilerplate
    |-- .bowerrc
    |-- bower.json
    |-- build/
    |-- Gruntfile.js
    |-- LICENSE
    |-- package.json
    |-- README.md
    |-- test/
    |-- src/
        |-- app/
            |-- landing/
            |-- home/
            |-- home.create/
        |-- assets/
            |-- img/
        |-- common/
            |-- controllers/
            |-- directives/
            |-- filters/
            |-- resources/
            |-- services/
        |-- index.html
        |-- less/
    |-- vendor/

• .bowerrc: the Bower configuration file. This file told Bower to install all the libraries to the vendor/ directory

• bower.json: Specify all dependency libraries of this project

• build: store the files after build.

• Gruntfile.js: Gruntfile.js includes project and task configuration, loading Grunt plugin and tasks and define custom tasks

• LICENSE: describe the detail of license

• package.json: describes this project's information, such as: name, version. And define needed Grunt plugins

• README.md: introduce this boilerplate, includes how to use it and get started of this boilerplate

• src: The folder is separated based on Modularity, the style guide is:

  1. All module should put in app folder. For example, in you application, you have landing, environment, environment wizard, environment detail, environment node detail, environment general detail, so the folder structure should be:

  app/ |-- landing/ |-- landing.module.js |-- landing.controller.js |-- landing.spec.js |-- landing.lang.js |-- landing.tpl.html |-- environment/ |-- environment.wizard/ |-- environment.detail.node/ |-- environment.detail.general/ ``` 2. Put all the styles to assets folder, also images, each module folder include js and template file 3. File Name Standard： * Test file: **.spec.js * Template file: **.tpl.html * Language file: **.lang.js 4. AngularJS template path should be relative to `src` folder.

    For example:
    `ng-include="'app/landing/landing.tpl.html'"`
  

• vendor: Install all used libraries to this folder

Code Style Guide

JavaScript Style Guide

Recommend Google's JavaScript Style Guide

AngularJS Style Guide

Based on AngularJS Style Guide, but following style guide is high priority than it.

Naming

1. Default following Camel Case
2. File Name: feature.type.js

Module(It similar with Java's Package)

• Module Folder Name: use lower case. For example, sec, uxform.uxformvalidation
• Module Name: use lower case. For example, formvalidation. If you want you can add a prefix for your module, like uxapp, uxform
• Module File Name: modulename.module.js. For example, formvalidation.module.js, uxapp.module.js, uxform.module.js
• If b module is sub module of a module: module name should be like amodule.bmodule. For example, uxform.uxformvalidation, so you can from module name know the relationship

Controller(It seems to Java's Class)

• Controller Name: use UpperCamelCase. For example, Form. If you want you can add a prefix for your controller, like UXForm
• Controller File Name: ControllerName.controller.js. For example, Form.controller.js

Service

• Service Name: use lowerCamelCase. For example, serviceHelper. If you want you can add a prefix for your controller, like uxServiceHelper
• Service File Name: serviceName.service.js. For example, serviceHelper.service.js

Directive, Filter, Test File, Lang File

Similar to Service. For example, tooltip, tooltip.directive.js, time, time.filter.js, Form.spec.js, FormEN.lang.js

CSS files

Each module can have a style file, named modulename.less, and put it to assets/less/modulename.less

Get Started

If need add how to get started

Project Configuration

Following part let me show you how do I configure this project.

Bower.json

Add following dependencies:

1. AngularJS
2. Bootstrap

package.json

Needed following Grunt Plugins:

1. grunt-contrib-jshint: Validate file with JSHint, similar with JSLint
2. grunt-contrib-uglify: Minify files with UglifyJS
3. grunt-contrib-watch: Run predefined tasks whenever watched file patterns are added, changed or deleted
4. grunt-contrib-clean: Clean files and folders
5. grunt-contrib-copy: Copy files and folders
6. grunt-contrib-concat: Concatenate files
7. grunt-contrib-connect: Start a connect web server

---

• Get more information from specification
• See all grunt plugins from Grunt Plugins

Gruntfile.js

Requirements

Before you use this boilerplate you should learn following technologies before:

1. AngularJS: A front end develop framework
2. Bootstrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development
3. jQuery: A fast, small, and feature-rich JavaScript library
4. Bower: A package manager for the web
5. Grunt: The JavaScript Task Runner
6. Jenkins: Continuous integration server

Resources

If use third part library, add third part library

Contact

This application is developed by Shaoke Xu. You can use following way to contact me:

Website: http://shaoke.me

Email: shaokexu@gmail.com

License

AngularJS Boilerplate is available under the MIT license. See the LICENSE file for more info.