Atom AngularJS Boilerplate Snippets

Adds AngularJS boilerplate snippets from best practices in Atom.

Based on John Papa's guides, and Jason Miazga's Atom snippets.

Key Features

AngularJS template snippets from best practices
Utilizes SOLID principles for Rule of 1, and readability.
HTML index boilerplate snippet
JS boilerplate snippets for app module, controller, constant, filter, filter ng-repeat, directive, directive with controller, factory, custom module, service

Install

Console

apm install angularjs-boilerplate-snippets

Atom Editor
Go to Atom > Preferences... then search for "AngularJS Boilerplate Snippets" in the Packages tab.

Snippets

Type a prefix and press tab, and the snippet will replace it.

HTML

angindex - Index Boilerplate

Javascript

angapp - Primary App Module
angcon - Controller
angconst - Constant
angdir - Directive
angdir - Directive w/ Controller
angfact - Factory
angfilt - Filter
angfiltng - Filter Ng-Repeat
angmod - Custom Module
angser - Service

Examples

angindex

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="app" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="app" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="app" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>${1:Title}</title>
  <meta name="description" content="${2: Description}" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <span src="//ajax.googleapis.com/ajax/libs/angularjs/${1:1.3.14}/angular.js"></span>

</head>
<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <div class="container" ng-view=""></div>
</body>
</html>

angapp

(function() {
  'use strict';

  angular.module('${1:app}', [
    $2
  ]);

})();

angcon

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .controller('${2:MyController}',${2: MyController});

    ${2:MyController}.$inject = [${3:'$scope'}];

  function ${2:MyController}(${3:$scope}){

    /*jshint validthis: true */
    var vm = this;

    activate();

    ////////////////////////////

    function activate(){
      $4
    }

  }

})();

angconst

(function() {
  'use strict';

    angular
        .module('${1:app}')
        .constant('${2:myConstant}', ${3:'value'})$4;

})();

angdir

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .directive('${2:myDirective}', ${2:myDirective});

  ${2:myDirective}.$inject = [${3:'dataservice'}];

  function ${2:myDirective}(${3:dataservice}){
    // Usage: ...
    var directive = {
      restrict: '${4:ACE}',
      templateUrl: '${5:templateUrl}',
      scope: {
      },
      link: link
    };
    return directive;

    ////////////////////////////

    function link(scope, element, attrs){
      $6
    }

  }

})();

angdirc

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .directive('${2:myDirective}', ${2:myDirective});

  function ${2:myDirective}(){

    var directive = {
      restrict: '${3:ACE}',
      templateUrl: '${4:templateUrl}',
      scope: {
      },
      link: link,
      controller: '${5:myController}',
      controllerAs: 'vm',
      bindToController: true
    };
    return directive;

    ////////////////////////////

    function link(scope, element, attrs, vm){
      $6
    }

  }

})();

angfact

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .factory('${2:myfactory}', ${2:myfactory});

  ${2:myfactory}.$inject = [${3:'$http'}];

  function ${2:myfactory}(${3:$http}){

    var service = {
      ${4:getIndex}: ${4:getIndex}
    };

    return service;

    ////////////////////////////

    function ${4:getIndex}(){
      $5
    }

  }

})();

angfilt

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .filter('${2:myFilter}', ${2:myFilter});

  ${2:myFilter}.$inject = [${3:'$dataservice'}];

  function ${2:myFilter}(${3:dataservice}){

    return function(${4:val}){

      $5

      return ${4:val};

    };
  }

})();

angfiltng

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .filter('${2:myFilter}', ${2:myFilter});

  ${2:myFilter}.$inject = [${3:'$dataservice'}];

  function ${2:myFilter}(${3:dataservice}){

    return function(${4:obj},${6:val}){
      var filtered = [];
        angular.forEach(${4:obj}, function(${5:item}) {
          if(${5:item} == ${6:val}){
            filtered.push(${5:item});
          }
        });
      return filtered;
    };
  }

})();

angmod

(function() {
  'use strict';

  angular.module('${1:module}', [$2]);

})();

angserv

(function() {
  'use strict';

  angular
    .module('${1:app}')
    .service('${2:myservice}', ${2:myservice});

  ${2:myservice}.$inject = [${3:'$http'}];

  function ${2:myservice}(${3:$http}){

    /*jshint validthis: true */
    var svc = this;

    svc.${4:getIndex} = ${4:getIndex};

    ////////////////////////////

    function ${4:getIndex}(){
      $5
    }

  }

})();

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request

History

Check Release list.