Angularjs Visual Studio Code Snippets

When working with AngularJS, we can quickly notice that a very repetitive task is creating the different AngularJS modules, services, controllers as well as other components for our application. In an effort to facilitate this task, we have created some code snippets that can be leveraged as seed for our module implementation.

The main purpose for these snippets is to provide a consistent format for our files with the same naming conventions and comment blocks. This is very handy with working in a team of multiple software developers.

What is a Visual Studio code snippet?

Visual Studio has a feature that allows us to quickly add code snippet to our files. To access this feature, we can right click anywhere on the file, and select Code Snippet from the Context menu. This shows a list of folders with snippets. After inserting a snippet, the code with highlighted labels is inserted into the document. The highlighted labels are placeholder that can be replaced by the specific content for your file. Take a look at this video for more information:

Download the Snippets

You can download the snippets from GitHub using the following URL:


The common format for these files looks as follows:

The highlighted areas can be replaced with the information that is relevant to your project. We should note that all labels with the same tag are also replaced by the information entered. So in the case of the controller above, all ‘app’ and ‘myController’ tags are replaced as shown next:

(function () {
    'use strict';

    var app = angular.module('baseball');
    app.controller('baseball.ctrl.team', [ctrlteam]);

    function ctrlteam() {



Import Snippet to Visual Studio

To import the snippets, open Visual Studio and follow these steps:
  • Click on Tools menu
  • Code Snippet Manager
  • Add a folder
  • Click Import

This allows us to know import the snippet files into the new folder.  You are all welcome to add other snippets or modify a file to match your needs.

Hope it helps.