Adds AngularJS boilerplate snippets from best practices in Atom.
Based on John Papa's guides, and Jason Miazga's Atom snippets.
- 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
Console
apm install angularjs-boilerplate-snippets
Atom Editor
Go to Atom > Preferences... then search for "AngularJS Boilerplate Snippets" in the Packages tab.
Type a prefix and press tab, and the snippet will replace it.
angindex- Index Boilerplate
angapp- Primary App Moduleangcon- Controllerangconst- Constantangdir- Directiveangdir- Directive w/ Controllerangfact- Factoryangfilt- Filterangfiltng- Filter Ng-Repeatangmod- Custom Moduleangser- Service
<!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">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/${1:1.3.14}/angular.js"></script>
</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>(function() {
'use strict';
angular.module('${1:app}', [
$2
]);
})();(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
}
}
})();(function() {
'use strict';
angular
.module('${1:app}')
.constant('${2:myConstant}', ${3:'value'})$4;
})();(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
}
}
})();(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
}
}
})();(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
}
}
})();(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};
};
}
})();(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;
};
}
})();(function() {
'use strict';
angular.module('${1:module}', [$2]);
})();(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
}
}
})();- 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
Check Release list.
MIT License © Justin Blough