angularjs-livetpls/angularjs-webstorm-livetpls

Introduction

This repository contains LiveTemplates for AngularJS and Jasmine to be used with JetBrains products such as IntelliJ or WebStorm.

Live Templates are a set of abbreviations that expand in to 'code snippets' for common tasks such as creating variables and functions. These abbreviations significantly speed up development and reduce coding errors.

Check out the blog post for more!

Installation

IntelliJ

Copy the Live Template xml files into your user's IntelliJ folder. This is typically in [home directory]/.IntelliJIdea<version>/config/templates or in ~/Library/Preferences/IntelliJIdea<version>/templates on a Mac. If IntelliJ is currently open, you will need to restart the IDE.

Note: The default Live Template expansion character is TAB. To use a Live Template abbreviation, type the abbreviation and press the expansion character. The Live Template definitions can be found in the Settings Menu (CTRL+ALT+S), IDE Settings, Live Templates, angular.js.

WebStorm

AFAIK WebStorm doesn't have any particular installation (or import) procedure for LiveTemplates. Instead just drop *.xml files from this repository into WebStorm's folder where it stores LiveTemplates. Usually this is the [your home directory]/.WebIde40/config/templates.

How to use the Live Templates

The following show the available abbrivations and their default implementations. Variables that are editable upon template expansion are delemited with the $ sign (ex. $filterName$ ). $END$ indicates where the cursor will be placed upon template completion.

Live Templates

AngularJS

Globals

ngc - Define a new Angular Controller. You can change the controller name and parameters.

var $controllerName$ = function($scope, $injectables$) {
    $END$
}

ngfor - angular.foreach loop

angular.forEach($iterateOver$, function(value, key){
  $END$
});

Scope related abbrevations

$f - Define a new $scope'd function (usually inside an AngularJS Controller). You can change the function name and arguments.

$scope.$functionName$ = function($args$) {
    $END$
};

$v - Defines a new $scope'd variable inside an AngularJS controller.

$scope.$variable$ = $value$;
$END$

$va - Defines a new $scope'd variable inside an AngularJS controller and assigns a value from a contstructor arguments.

$scope.$variable$ = $variable$;
$END$

$w - Define a $watch for an expression. You can change the expression to be watched.

$scope.$watch('$watchExpr$',function(newValue, oldValue){
  $END$
});

$on - Define a $on for a $broadcast/$emit on the $scope inside an Angular Controller. You can change the event name to listen on.

$scope.$on('$eventName$', function(event, $args$) {
    $END$
});

$b - Define a $broadcast for a $scope inside an Angular Controller / Angular Controller Function. You can change the event name and optional event arguments.

$scope.$broadcast('$eventName$', $eventArgs$);
$END$

$e - Define an $emit for a $scope inside an Angular Controller / Angular Controller Function. You can change the event name and optional event arguments.

$scope.$emit('$eventName$', $eventArgs$);
$END$

Module related abbrevations

ngm - A new angular module without a config function.

angular.module('$moduleName$',[$moduleDependencies$]);
$END$

ngma - A new angular module without a config function and a variable assigment.

var $moduleName$ = angular.module('$moduleName$',[$moduleDeps$]);
$END$

ngmc - A new angular module with a config function

var $moduleName$ = angular.module('$moduleName$',[$moduleDeps$], function($configDeps$){
    $END$
});

ngmfa - A factory in a module

factory('$factoryName$', function($dependencies$){
  $END$
});

ngms - Define an Angular Module Service to be attached to a previously defined module. You can change the service name and service injectables.

service('$serviceName$', function($injectables$) {
    $END$
});

ngmfi - Define an Angular Module Filter to be attached to a previously defined module. You can change the filter name.

filter('$filterName$', function($injectables$) {
    return function(input, $args$) {
        $END$
    };
})

Directives related abbrevations

ngdcf - A compile function

function compile(tElement, tAttrs, transclude) {
      $END$
      return function (scope, element, attrs) {
      }
}

ngdlf - A linking function in a directive.

function (scope, element, attrs$ctrl$) {
$END$
}

ngdc - A directive with a compile function

directive('$directiveName$', function factory($injectables$) {
  var directiveDefinitionObject = {
    $directiveAttrs$
    compile: function compile(tElement, tAttrs, transclude) {
      $END$
      return function (scope, element, attrs) {
      }
    }
  };
  return directiveDefinitionObject;
})

ngdl - A directive with a linking function only.

.directive('$directiveName$', function($directiveDeps$) {

    return function(scope, element, attrs$ctrl$) {
        $END$
    }
});

Routes related abbrevations

ngrw - Defines a when condition of an AngularJS route.

$routeProvider.when('$url$', {
    templateUrl: '$templateUrl$',
    controller: '$controller$'
});
$END$

ngrwr - Defines a when condition of an AngularJS route with the resolve block.

$routeProvider.when('$url$', {
    templateUrl: '$templateUrl$',
    controller: '$controller$',
    resolve: {$END$
    }
});

ngro - Defines an otherwise condition of an AngularJS route.

$routeProvider.otherwise(redirectTo : '$url$'});
$END$

HTML - abbrevations to be used in HTML files

ngindex - Simple way of bootstraping angular app for prototyping purposes

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/$version$/angular.js"></script>
    </head>
    <body ng-app>
        $END$
    </body>
</html>

ngsa - Script tag importing base AngularJS file from CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$version$/angular$suffix$.js"></script>
$END$

ngst - A script tag holding Angular's template

<script type="text/ng-template" id="$id$">
    $END$
</script>

ngb - A binding in AngularJS

{{$binding$}}$END$

Jasmine

Various Jasmine + AngularJS abbrevations

jasd - Jasmine describe template

describe('$describe$', function() {
    $END$
});

jasi - Jasmine it template

it('$should$', function() {
    $END$
});

jasbi - beforeEach with Angular's inject

beforeEach(inject(function(_$$rootScope_$other$){
  $END$
}));

jasbm - beforEach with AngularJS module

beforeEach(module($moduleName$));
$END$

jasb - beforeEach

beforeEach(function(){
  $END$
});

jasii - Jasmine it template with injectables

it('$should$', inject(function($injectables$) {
    $END$
}));

Credits

Pawel Kozlowski for initial creation of the Angular JS Live Templates
Jaymes Bearden expansion, testing and documentation
John Lindquist for showing what is possible with a good IDE in his amazing video tutorials

angularjs-livetpls / angularjs-webstorm-livetpls