delphinev/angularjs-starter-pack

An empty AngularJS starter pack. Stop dealing with boring stuff, start coding quickly.

angularjs-starter-pack

A simple template including Gulp, JSPM, ES6 & AngularJS 1.4 to stop dealing with boring stuff and start coding quickly.

---

• Requirements
• Setup
• What contains this starter pack?
• Included modules & addons
• Documentation
  • Files organization & best-practices
  • Gulp tasks
  • JSPM
  • ES6 Syntax
  • config module
  • API service
  • express server for production
  • Deploy to Heroku
• Author
• License

Requirements

1. Node.js

Setup

1. Fork & clone this repos
2. Go to the project directory
3. npm install
4. gulp serve
5. Go to localhost:4000
6. That's it, you're ready to code!

This template comes with

• Gulp workflow
• ES6 with on-the-fly transpilation (using Babel) in development
• AngularJS 1.4 starter app
• Bundling transpiled JS for prodution
• JSPM
• SASS

The AngularJS starter app works by default with

• ui-router
• lodash
• angular-bootstrap
• A ready to go config module to set all your env variables
• A ready to go API service to handle API requests quickly & properly
• A ready to go express server for production environment

Documentation

Files organization & best-practices

Todo

Gulp tasks

Todo

JSPM

Todo

ES6 syntax

Todo

config module

The src/app/config.js module is generated by a gulp task, do not update it because it will be erased each time you run gulp serve.

In order to use environment variables in your project, you need to create a .env.json file in the project root directory. Then, for each variable, you simply need to add it in gulp/config.js (there are already 3 variables used by the API service).

Gulp will create a CONFIG module for you AngularJS app and store all your environment variables as constants inside, then, you'll be able to use them like that:

angular
  .module('myModule', [])
  .controller('MyController', [
    'CONFIG',
    (CONFIG) => {
      const myApiUrl = `${CONFIG.API_URL}/${CONFIG.API_VERSION}`;
    }
  ]);

API service

Configuration

In order to use the API service, you have to set your API url & version in a environment file.

• First, in the project root directory, create a .env.json file (it's already added in the .gitignore).
• Then, add an object with these two variables in the environment file:

  {
   "API_URL": "http://localhost:3000",
   "API_VERSION": "v1"
  }

That's it! The API service will find these variables thanks to the CONFIG module it takes in dependency and use it for all your API calls.

Usage

Add API as a dependency in all the modules you want to use it. 5 methods are available for this module, they represent the 5 HTTP methods for RESTful APIs.

  API.get('/url', {})
  API.post('/url', {})
  API.put('/url', {})
  API.patch('/url', {})
  API.delete('/url')

Each of these methods returns a promise with the resolved data. There is a full example:

angular
  .module('myModule', [])
  .controller('MyModuleController', [
    'API',
    class {
      constructor(API) {
        API.get('/users').then((res) => {
          console.log(res.data.users);
        });
      }
    }
  ]);

express server for production

Todo

Deploy to heroku

Todo

Author

Anthony Mangiavellano mangiavellano.anthony@gmail.com.

• http://mangiavellano.com/
• https://www.linkedin.com/in/mangiavellano

License

WTFPL. http://www.wtfpl.net/