Olive seed for AngularJS - offers you quickly scaffold an AngularJS project with pragmatic defaults and best practices.
Install gulp, bower and olive if you haven't already:
npm install -g olive gulp bower
Create your project from this Angular seed using Olive CLI:
mkdir myapp && cd myapp
olive new angular
Install npm and bower dependencies:
npm install && bower install
Start developing:
npm start
Run test once and generate code coverage reports in coverage directory.
npm test
Build for production:
npm run build
While developing your app, keep an eye on all unit-test specs.
See how much of your code is covered by well-written test scripts.
Not all the view templates follow the same layout. Use an intuitive way to structure the layouts and partials.
├─src/
│ ├─app/
│ │ ├─components/
│ │ │ └─navbar/
│ │ │ ├─repoinfo.directive.js
│ │ │ ├─repoinfo.html
│ │ │ └─repoinfo.scss
│ │ ├─config/
│ │ │ ├─modules.js
│ │ │ ├─routes.js
│ │ │ └─run.js
│ │ ├─layouts/
│ │ │ └─default/
│ │ │ ├─default.html
│ │ │ └─default.scss
│ │ ├─partials/
│ │ │ ├─footer/
│ │ │ │ ├─footer.html
│ │ │ │ └─footer.scss
│ │ │ └─header/
│ │ │ ├─header.html
│ │ │ └─header.scss
│ │ ├─pods/
│ │ │ └─home/
│ │ │ ├─home.controller.js
│ │ │ ├─home.controller.spec.js
│ │ │ ├─home.html
│ │ │ └─home.scss
│ │ ├─services/
│ │ │ └─github
│ │ │ └─github.service.js
│ │ ├─styles/
│ │ │ ├─_overrides.scss
│ │ │ ├─_type.scss
│ │ │ └─app.scss
│ │ └─app.js
│ ├─assets/
│ │ ├─img/
│ │ ├─fonts/
│ │ ├─apple-touch-icon.png
│ │ └─favicon.ico
│ └─index.html
├─dist/
├─.tmp/
├─bower_components/
├─node_modules/
├─.bowerrc
├─.editorconfig
├─.gitattributes
├─.gitignore
├─.jscsrc
├─.jshintrc
├─.oliverc
├─bower.json
├─gulpfile.js
├─karma.conf.js
├─package.json
└─README.md
| File/Directory | Purpose |
|---|---|
| src/ | Contains your Angular application code. |
| dist/ | Contains the distributable (that is, optimized and self-contained) output of your application. Deploy this to your server! |
| .tmp/ | Various temporary output of build steps, as well as the debug output of your application. |
| bower_components/ | Bower dependencies. |
| node_modules | Node modules required for development purpose. |
| .bowerrc | Bower configuration. |
| .editorconfig | EditorConfig file. |
| .oliverc | Olive configuration. |
| .gitattributes | Definition for Git attributes. |
| .gitignore | Git configuration for ignored files. |
| .jscsrc | JavaScript code style configuration. |
| .jshintrc | JSHint configuration. |
| .oliverc | Olive configuration. |
| bower.json | Bower configuration and dependency list. |
| gulpfile.js | Contains build specification for Gulp. |
| karma.conf.js | Karma configuration. |
| package.json | NPM configuration. Mainly used to list the dependencies needed for asset compilation. |
| README.md | This documentation. |
Default options:
{
"paths": {
"src": "src",
"tmp": ".tmp",
"dist": "dist"
}
}
These default options can be overridden. You can also include additional options from the following:
For example:
{
"ports": {
"app": 3000,
"bs": 3001,
"karma": 3002
}
}
app: The app will be served via this port (i.e. http://localhost:3000)bs: BrowserSync UI control panel can be accessed via this port (i.e. http://localhost:3001)karma: Karma tests report page is served via this port (i.e. http://localhost:3002/debug.html)
For example:
{
"content-security-policy": {
"development": {
"default-src": "'unsafe-inline' 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'",
"style-src": "'self' 'unsafe-inline'",
"media-src": "*",
...
"other-directive": "other-source"
},
"production": {
"default-src": "'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'",
"style-src": "'self' 'unsafe-inline'",
"media-src": "*"
},
"other-env": {
...
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent