File Templates And Snippets

File Templates and Snippets

Use file templates or snippets to help follow consistent styles and patterns. Here are templates and/or snippets for some of the web development editors and IDEs.

Sublime Text

[Style Y250]
  • Angular snippets that follow these styles and guidelines.

    • Download the Sublime Angular snippets
    • Place it in your Packages folder
    • Restart Sublime
    • In a JavaScript file type these commands followed by a TAB
    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngmodule     // creates an Angular module
    ngservice    // creates an Angular service
    ngfilter     // creates an Angular filter
    

Visual Studio

[Style Y251]
  • Angular file templates that follow these styles and guidelines can be found at SideWaffle

    • Download the SideWaffle Visual Studio extension (vsix file)
    • Run the vsix file
    • Restart Visual Studio

WebStorm

[Style Y252]
  • Angular live templates that follow these styles and guidelines.

    // These are full file snippets containing an IIFE
    ngapp     // creates an Angular module setter
    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngfilter     // creates an Angular filter
    ngservice    // creates an Angular service
    
    // These are partial snippets intended to be chained
    ngconfig     // defines a configuration phase function
    ngmodule     // creates an Angular module getter
    ngroute      // defines an Angular ngRoute 'when' definition
    ngrun        // defines a run phase function
    ngstate      // creates an Angular UI Router state definition
    

Individual templates are also available for download within the webstorm-angular-live-templates folder

Atom

[Style Y253]
  • Angular snippets that follow these styles and guidelines.

    apm install angularjs-styleguide-snippets
    

    or

    • Open Atom, then open the Package Manager (Packages -> Settings View -> Install Packages/Themes)
    • Search for the package ‘angularjs-styleguide-snippets’
    • Click ‘Install’ to install the package
  • In a JavaScript file type these commands followed by a TAB

    ngcontroller // creates an Angular controller
    ngdirective // creates an Angular directive
    ngfactory // creates an Angular factory
    ngmodule // creates an Angular module
    ngservice // creates an Angular service
    ngfilter // creates an Angular filter
    

Brackets

[Style Y254]
  • Angular snippets that follow these styles and guidelines.

  • In a JavaScript file type these commands followed by a TAB

    // These are full file snippets containing an IIFE
    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngapp        // creates an Angular module setter
    ngservice    // creates an Angular service
    ngfilter     // creates an Angular filter
    
    // These are partial snippets intended to chained
    ngmodule     // creates an Angular module getter
    ngstate      // creates an Angular UI Router state definition
    ngconfig     // defines a configuration phase function
    ngrun        // defines a run phase function
    ngwhen      // defines an Angular ngRoute 'when' definition
    ngtranslate  // uses $translate service with its promise
    

vim

[Style Y255]
  • vim snippets that follow these styles and guidelines.

  • vim UltiSnips snippets that follow these styles and guidelines.

    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngmodule     // creates an Angular module
    ngservice    // creates an Angular service
    ngfilter     // creates an Angular filter
    

Visual Studio Code

[Style Y256]
  • Visual Studio Code snippets that follow these styles and guidelines.

    • Download the VS Code Angular snippets
    • copy snippets to snippet directory, or alternatively copy and paste the snippets into your existing ones
    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngmodule     // creates an Angular module
    ngservice    // creates an Angular service
    

Emacs

[Style Y257]
  • Emacs snippets that follow these styles and guidelines.

    Note that yasnippet categorizes snippets by major mode, and there are several Emacs major modes for editing Javascript code. The snippets are in js2-mode, and the other directories contain only a dotfile to reference them there.

    • install yasnippet (M-x package-install RET yasnippet RET)
    • copy snippets to snippet directory, or modify your Emacs init to add snippet directory to yas-snippet-dirs
    ngcontroller // creates an Angular controller
    ngdirective  // creates an Angular directive
    ngfactory    // creates an Angular factory
    ngmodule     // creates an Angular module
    ngservice    // creates an Angular service
    ngfilter     // creates an Angular filter
    

Back to Table of Contents