├── Jasmine.xml ├── README.md ├── angularjs_directive.xml ├── angularjs_global.xml ├── angularjs_html.xml ├── angularjs_module.xml ├── angularjs_route.xml ├── angularjs_scope.xml └── build ├── README.footer.md ├── README.header.md └── readmeUpdate.py /Jasmine.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | 37 | 54 | 71 | 87 | 105 | 125 | 146 | 166 | 186 | 206 | 226 | 246 | 266 | 286 | 305 | 324 | 343 | 362 | 381 | 400 | 419 | 438 | 457 | 476 | 496 | 516 | 536 | 556 | 577 | 596 | 615 | 635 | 655 | 676 | 697 | 716 | 736 | 737 | 738 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Introduction 2 | 3 | This repository contains LiveTemplates for [AngularJS](http://angularjs.org/) and [Jasmine](https://github.com/pivotal/jasmine) to be used with [JetBrains](http://www.jetbrains.com/) products such as [IntelliJ](http://www.jetbrains.com/idea/) or [WebStorm](http://www.jetbrains.com/webstorm/). 4 | 5 | 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. 6 | 7 | Check out the [blog post](http://pkozlowskios.wordpress.com/2012/07/15/live-templates-for-angular-js-in-webstorm/) for more! 8 | 9 | ## Installation 10 | 11 | ### IntelliJ 12 | Copy the Live Template xml files into your user's IntelliJ folder. This is typically in `[home directory]/.IntelliJIdea/config/templates` or in `~/Library/Preferences/IntelliJIdea/templates` on a Mac. If IntelliJ is currently open, you will need to restart the IDE. 13 | 14 | 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. 15 | 16 | ### WebStorm 17 | AFAIK WebStorm doesn't have any particular installation (or import) procedure for LiveTemplates. 18 | Instead just drop `*.xml` files from this repository into WebStorm's folder where it stores LiveTemplates. 19 | Usually this is the `[your home directory]/.WebIde40/config/templates`. 20 | 21 | ## How to use the Live Templates 22 | The following show the available abbrivations and their default implementations. Variables that are editable upon template expansion are delemited with the $ sign (ex. `$filterName$`). 23 | `$END$` indicates where the cursor will be placed upon template completion. 24 | 25 | ## Live Templates 26 | ### AngularJS 27 | #### Globals 28 | `ngc` - Define a new Angular Controller. You can change the controller name and parameters. 29 | 30 | ```JavaScript 31 | var $controllerName$ = function($scope, $injectables$) { 32 | $END$ 33 | } 34 | ``` 35 | `ngfor` - angular.foreach loop 36 | 37 | ```JavaScript 38 | angular.forEach($iterateOver$, function(value, key){ 39 | $END$ 40 | }); 41 | ``` 42 | #### Scope related abbrevations 43 | `$f` - Define a new $scope'd function (usually inside an AngularJS Controller). You can change the function name and arguments. 44 | 45 | ```JavaScript 46 | $scope.$functionName$ = function($args$) { 47 | $END$ 48 | }; 49 | ``` 50 | `$v` - Defines a new $scope'd variable inside an AngularJS controller. 51 | 52 | ```JavaScript 53 | $scope.$variable$ = $value$; 54 | $END$ 55 | ``` 56 | `$va` - Defines a new $scope'd variable inside an AngularJS controller and assigns a value from a contstructor arguments. 57 | 58 | ```JavaScript 59 | $scope.$variable$ = $variable$; 60 | $END$ 61 | ``` 62 | `$w` - Define a $watch for an expression. You can change the expression to be watched. 63 | 64 | ```JavaScript 65 | $scope.$watch('$watchExpr$',function(newValue, oldValue){ 66 | $END$ 67 | }); 68 | ``` 69 | `$on` - Define a $on for a $broadcast/$emit on the $scope inside an Angular Controller. You can change the event name to listen on. 70 | 71 | ```JavaScript 72 | $scope.$on('$eventName$', function(event, $args$) { 73 | $END$ 74 | }); 75 | ``` 76 | `$b` - Define a $broadcast for a $scope inside an Angular Controller / Angular Controller Function. You can change the event name and optional event arguments. 77 | 78 | ```JavaScript 79 | $scope.$broadcast('$eventName$', $eventArgs$); 80 | $END$ 81 | ``` 82 | `$e` - Define an $emit for a $scope inside an Angular Controller / Angular Controller Function. You can change the event name and optional event arguments. 83 | 84 | ```JavaScript 85 | $scope.$emit('$eventName$', $eventArgs$); 86 | $END$ 87 | ``` 88 | #### Module related abbrevations 89 | `ngm` - A new angular module without a config function. 90 | 91 | ```JavaScript 92 | angular.module('$moduleName$',[$moduleDependencies$]); 93 | $END$ 94 | ``` 95 | `ngma` - A new angular module without a config function and a variable assigment. 96 | 97 | ```JavaScript 98 | var $moduleName$ = angular.module('$moduleName$',[$moduleDeps$]); 99 | $END$ 100 | ``` 101 | `ngmc` - A new angular module with a config function 102 | 103 | ```JavaScript 104 | var $moduleName$ = angular.module('$moduleName$',[$moduleDeps$], function($configDeps$){ 105 | $END$ 106 | }); 107 | ``` 108 | `ngmfa` - A factory in a module 109 | 110 | ```JavaScript 111 | factory('$factoryName$', function($dependencies$){ 112 | $END$ 113 | }); 114 | ``` 115 | `ngms` - Define an Angular Module Service to be attached to a previously defined module. You can change the service name and service injectables. 116 | 117 | ```JavaScript 118 | service('$serviceName$', function($injectables$) { 119 | $END$ 120 | }); 121 | ``` 122 | `ngmfi` - Define an Angular Module Filter to be attached to a previously defined module. You can change the filter name. 123 | 124 | ```JavaScript 125 | filter('$filterName$', function($injectables$) { 126 | return function(input, $args$) { 127 | $END$ 128 | }; 129 | }) 130 | ``` 131 | #### Directives related abbrevations 132 | `ngdcf` - A compile function 133 | 134 | ```JavaScript 135 | function compile(tElement, tAttrs, transclude) { 136 | $END$ 137 | return function (scope, element, attrs) { 138 | } 139 | } 140 | ``` 141 | `ngdlf` - A linking function in a directive. 142 | 143 | ```JavaScript 144 | function (scope, element, attrs$ctrl$) { 145 | $END$ 146 | } 147 | ``` 148 | `ngdc` - A directive with a compile function 149 | 150 | ```JavaScript 151 | directive('$directiveName$', function factory($injectables$) { 152 | var directiveDefinitionObject = { 153 | $directiveAttrs$ 154 | compile: function compile(tElement, tAttrs, transclude) { 155 | $END$ 156 | return function (scope, element, attrs) { 157 | } 158 | } 159 | }; 160 | return directiveDefinitionObject; 161 | }) 162 | ``` 163 | `ngdl` - A directive with a linking function only. 164 | 165 | ```JavaScript 166 | .directive('$directiveName$', function($directiveDeps$) { 167 | 168 | return function(scope, element, attrs$ctrl$) { 169 | $END$ 170 | } 171 | }); 172 | ``` 173 | #### Routes related abbrevations 174 | `ngrw` - Defines a when condition of an AngularJS route. 175 | 176 | ```JavaScript 177 | $routeProvider.when('$url$', { 178 | templateUrl: '$templateUrl$', 179 | controller: '$controller$' 180 | }); 181 | $END$ 182 | ``` 183 | `ngrwr` - Defines a when condition of an AngularJS route with the resolve block. 184 | 185 | ```JavaScript 186 | $routeProvider.when('$url$', { 187 | templateUrl: '$templateUrl$', 188 | controller: '$controller$', 189 | resolve: {$END$ 190 | } 191 | }); 192 | ``` 193 | `ngro` - Defines an otherwise condition of an AngularJS route. 194 | 195 | ```JavaScript 196 | $routeProvider.otherwise(redirectTo : '$url$'}); 197 | $END$ 198 | ``` 199 | #### HTML - abbrevations to be used in HTML files 200 | `ngindex` - Simple way of bootstraping angular app for prototyping purposes 201 | 202 | ```HTML 203 | 204 | 205 | 206 | 207 | 208 | $END$ 209 | 210 | 211 | ``` 212 | `ngsa` - Script tag importing base AngularJS file from CDN 213 | 214 | ```HTML 215 | 216 | $END$ 217 | ``` 218 | `ngst` - A script tag holding Angular's template 219 | 220 | ```HTML 221 | 224 | ``` 225 | `ngb` - A binding in AngularJS 226 | 227 | ```HTML 228 | {{$binding$}}$END$ 229 | ``` 230 | ### Jasmine 231 | #### Various Jasmine + AngularJS abbrevations 232 | `jasd` - Jasmine describe template 233 | 234 | ```HTML 235 | describe('$describe$', function() { 236 | $END$ 237 | }); 238 | ``` 239 | `jasi` - Jasmine it template 240 | 241 | ```HTML 242 | it('$should$', function() { 243 | $END$ 244 | }); 245 | ``` 246 | `jasbi` - beforeEach with Angular's inject 247 | 248 | ```HTML 249 | beforeEach(inject(function(_$$rootScope_$other$){ 250 | $END$ 251 | })); 252 | ``` 253 | `jasbm` - beforEach with AngularJS module 254 | 255 | ```HTML 256 | beforeEach(module($moduleName$)); 257 | $END$ 258 | ``` 259 | `jasb` - beforeEach 260 | 261 | ```HTML 262 | beforeEach(function(){ 263 | $END$ 264 | }); 265 | ``` 266 | `jasii` - Jasmine it template with injectables 267 | 268 | ```HTML 269 | it('$should$', inject(function($injectables$) { 270 | $END$ 271 | })); 272 | ``` 273 | ## Credits 274 | * [Pawel Kozlowski](https://github.com/pkozlowski-opensource) for initial creation of the Angular JS Live Templates 275 | * [Jaymes Bearden](https://github.com/jaymes-bearden) expansion, testing and documentation 276 | * [John Lindquist](https://github.com/johnlindquist) for showing what is possible with a good IDE in his amazing video tutorials -------------------------------------------------------------------------------- /angularjs_directive.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | 36 | 55 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /angularjs_global.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /angularjs_html.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | 38 | 55 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /angularjs_module.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | 39 | 58 | 76 | 94 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /angularjs_route.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 22 | 41 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /angularjs_scope.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 21 | 39 | 56 | 73 | 91 | 109 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /build/README.footer.md: -------------------------------------------------------------------------------- 1 | ## Credits 2 | * [Pawel Kozlowski](https://github.com/pkozlowski-opensource) for initial creation of the Angular JS Live Templates 3 | * [Jaymes Bearden](https://github.com/jaymes-bearden) expansion, testing and documentation 4 | * [John Lindquist](https://github.com/johnlindquist) for showing what is possible with a good IDE in his amazing video tutorials -------------------------------------------------------------------------------- /build/README.header.md: -------------------------------------------------------------------------------- 1 | ## Introduction 2 | 3 | This repository contains LiveTemplates for [AngularJS](http://angularjs.org/) and [Jasmine](https://github.com/pivotal/jasmine) to be used with [JetBrains](http://www.jetbrains.com/) products such as [IntelliJ](http://www.jetbrains.com/idea/) or [WebStorm](http://www.jetbrains.com/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. 4 | 5 | Check out the [blog post](http://pkozlowskios.wordpress.com/2012/07/15/live-templates-for-angular-js-in-webstorm/) for more! 6 | 7 | ## Installation 8 | 9 | ### IntelliJ 10 | Copy the Live Template xml files into your user's IntelliJ folder. This is typically in `[home directory]/.IntelliJIdea/config/templates`. If IntelliJ is currently open, you will need to restart the IDE. 11 | 12 | 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. 13 | 14 | ### WebStorm 15 | AFAIK WebStorm doesn't have any particular installation (or import) procedure for LiveTemplates. 16 | Instead just drop `*.xml` files from this repository into WebStorm's folder where it stores LiveTemplates. 17 | Usually this is the `[your home directory]/.WebIde40/config/templates`. 18 | 19 | ## How to use the Live Templates 20 | The following show the available abbrivations and their default implementations. Variables that are editable upon template expansion are delemited with the $ sign (ex. `$filterName$`). 21 | `$END$` indicates where the cursor will be placed upon template completion. 22 | 23 | -------------------------------------------------------------------------------- /build/readmeUpdate.py: -------------------------------------------------------------------------------- 1 | import os 2 | import xml.etree.ElementTree as etree 3 | 4 | def printTemplates(tplGroupXmlTree, tplGroupName, lang): 5 | print('####'+tplGroupName) 6 | for template in tplGroupXmlTree.getroot(): 7 | print('`'+template.attrib['name']+'` - ' + template.attrib['description']+'\n') 8 | print('```'+lang) 9 | print(template.attrib['value']) 10 | print('```') 11 | 12 | print('##Live Templates') 13 | print('###AngularJS') 14 | printTemplates(etree.parse('angularjs_global.xml'), 'Globals', 'JavaScript') 15 | printTemplates(etree.parse('angularjs_scope.xml'), 'Scope related abbrevations', 'JavaScript') 16 | printTemplates(etree.parse('angularjs_module.xml'), 'Module related abbrevations', 'JavaScript') 17 | printTemplates(etree.parse('angularjs_directive.xml'), 'Directives related abbrevations', 'JavaScript') 18 | printTemplates(etree.parse('angularjs_route.xml'), 'Routes related abbrevations', 'JavaScript') 19 | printTemplates(etree.parse('angularjs_html.xml'), 'HTML - abbrevations to be used in HTML files', 'HTML') 20 | print('###Jasmine') 21 | printTemplates(etree.parse('Jasmine.xml'), 'Various Jasmine + AngularJS abbrevations', 'HTML') --------------------------------------------------------------------------------