angularjs-boilerplate-snippets
Adds AngularJS boilerplate snippets from best practices for single responsibility in Atom.
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 Moduleangcon
- Controllerangconst
- Constantangdir
- Directiveangdir
- Directive w/ Controllerangfact
- Factoryangfilt
- Filterangfiltng
- Filter Ng-Repeatangmod
- Custom Moduleangser
- 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.
License
MIT License © Justin Blough