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:
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:
Download the Snippets
You can download the snippets from GitHub using the following URL:
https://github.com/ozkary/angularjs-visual-studio-code-snippets.git
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.
In recent days Angular plays vital role to loading your site content in a fastest way, so it’s a required skill for everyone, thanks for sharing this useful information to our vision keep blogging.
ReplyDeleteRegards,
Angularjs training in chennai|Angularjs training chennai
The oracle database is capable of storing the data in two forms such as logically in the form of table spaces and physically like data files.
ReplyDeleteOracle Training in Chennai | oracle dba training in chennai
ReplyDeleteVery informative content that guided me to know the details about the training offered in different technology. Angular JS is a structural framework for dynamic web application and angular's data binding eliminates much of the code that you would otherwise write it.
Angularjs Training in Chennai | angularjs course in chennai