angular-boilerplate
A startup template of AngularJS Project.
===================
Features
- Folder Structure
- Code Standard
- Mock Server/Dummy Data
- Localization
- Test Environment
- Documents
- Code quality check
- 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 thevendor/
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:-
All module should put in
app
folder. For example, in you application, you havelanding
,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
- Default following Camel Case
- 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, likeuxapp
,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, likeUXForm
- 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, likeuxServiceHelper
- 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:
package.json
Needed following Grunt Plugins:
- grunt-contrib-jshint: Validate file with JSHint, similar with JSLint
- grunt-contrib-uglify: Minify files with UglifyJS
- grunt-contrib-watch: Run predefined tasks whenever watched file patterns are added, changed or deleted
- grunt-contrib-clean: Clean files and folders
- grunt-contrib-copy: Copy files and folders
- grunt-contrib-concat: Concatenate files
- 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:
- AngularJS: A front end develop framework
- Bootstrap: Sleek, intuitive, and powerful front-end framework for faster and easier web development
- jQuery: A fast, small, and feature-rich JavaScript library
- Bower: A package manager for the web
- Grunt: The JavaScript Task Runner
- 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.