Menu Close
  • Home
  • vscode-angularjs-snippet
    •

vscode-angularjs-snippet

CodeWithAnbu

AngularJS Snippet (Visual Studio Code)

中文。

Installation

Link: AngularJS Snippet – Visual Studio Marketplace。

or, Command: ext install nicholashsiang.vscode-angularjs-snippet

Snippets

This extension covers almost all the features of AngularJS. It is recommended to look at the source code to know what prefix is and its naming rules. The whole design idea is: no need to memorize deliberately, if you understand the concept of the framework, you can fully understand the function of this extension.

JavaScript

Note: All the snippets include the final semicolon ;

// Basic

/*
# Simple & IIFE
     ngc / ngController                         // Angular Controller
     ngs / ngService                            // Angular Service
     ngd / ngDirective / ngDirective.Decorator  // Angular Directive
    ngco / ngComponent                          // Angular Component
     ngm / ngModule                             // Angular module
   ngcon / ngConfig                             // Angular Config
 ngconst / ngConstant                           // Angular Constant
         / ngDecorator                          // Angular Decorator
    ngfa / ngFactory                            // Angular Factory
     ngf / ngFilter                             // Angular Filter
         / ngProvider                           // Angular provider
     ngr / ngRun                                // Angular Run
*/

// Simple: ngc ↵
.controller('nameCtrl', ['$scope', 'nameService', function ($scope, nameService) {

}])

// IIFE: ngController  ↵
(function () {
  'use strict';

  angular
    .module('name')
    .controller('nameCtrl', nameCtrl)

  nameCtrl.$inject = ['$scope'];

  function nameCtrl($scope) {
    var $ctrl = this;

  }

}());

// ------------------------ ngForm

ngForm.
  // property
    .$pristine
    .$dirty
    .$valid
    .$invalid
    .$submitted
    .$pending
    .$error
  // method
    .$rollbackViewValue()
    .$commitViewValue()
    .$addControl()
    .$getControls()
    .$removeControl()
    .$setDirty()
    .$setPristine()
    .$setUntouched()
    .$setSubmitted()
    .$setValidity()

// ------------------------ ngModel

ngModel
  // property
    .$viewValue
    .$modelValue
    .$parsers
    .$formatters
    .$validators
    .$asyncValidators
    .$viewChangeListeners
    .$error
    .$pending
    .$untouched
    .$touched
    .$pristine
    .$dirty
    .$valid
    .$invalid
    .$name
  // method
    .$render()
    .$isEmpty()
    .$setPristine()
    .$setDirty()
    .$setUntouched()
    .$setTouched()
    .$rollbackViewValue()
    .$validate()
    .$commitViewValue()
    .$setViewValue()
    .$overrideModelOptions()
    .$processModelValue()
    .$setValidity()

// ------------------------ ngScope

ngScope
  // property
    .$id
    .$parent
    .$root
  // method
    .$new()
    .$watch()
    .$watchGroup()
    .$watchCollection()
    .$digest()
    .$suspend()
    .$isSuspended()
    .$resume()
    .$destroy()
    .$eval()
    .$evalAsync()
    .$apply()
    .$applyAsync()
    .$on()
    .$emit()
    .$broadcast()

// ngsp / ngScope.property
$scope.key = value;
// ngsm / ngScope.method
$ctrl.fn = function () { };

// ngcp / ngCtrl.property
$ctrl.key = value;
// ngcm / ngCtrl.method
$ctrl.fn = function () { };

// ngrootScope/ngrScope
$rootScope.key = value;

// ngEmit
$scope.onEmitEvent = function () {
  $scope.$emit('EMIT_EVENT_NAME', params);
};

// ngBroadcast
$scope.onBroadcastEvent = function () {
  $scope.$broadcast('BROADCAST_EVENT_NAME', params);
};

// ngOn
var clearListener = $scope.$on('EVENT_NAME', function (event, params) {

});

// ngWatch
var clearWatch = $scope.$watch('watchExpression', function(newValue, oldValue) {

});

// ngWatchGroup
var clearWatch = $scope.$watchGroup(['watchExpressions'], function(newValue, oldValue) {

});

// ngWatchCollection
var clearWatch = $scope.$watchCollection('watchExpression', function(newCollection, oldCollection) {

});

// ------------------------ ngAttr
ngAttr
  .$normalize()
  .$addClass()
  .$removeClass()
  .$updateClass()
  .$observe()
  .$set()

// ------------------------ ngSce (Strict Contextual Escaping)
ngSce.
  .isEnabled()
  .parseAs()
  .trustAs()
  .trustAsHtml()
  .trustAsCss()
  .trustAsUrl()
  .trustAsResourceUrl()
  .trustAsJs()
  .getTrusted()
  .getTrustedHtml()
  .getTrustedCss()
  .getTrustedUrl()
  .getTrustedResourceUrl()
  .getTrustedJs()
  .parseAsHtml()
  .parseAsCss()
  .parseAsUrl()
  .parseAsResourceUrl()
  .parseAsJs()

// ------------------------ uiRouter
ngState
  .get()
  .includes()
  .is()
  .reload()
  .transitionTo()
  .otherwise()
  .when();

// ngState ↵
var stateName = {
  name: "state",
  url: "path/:id?query",
  params: {
    param: null
  },
  templateUrl: "template.html",
  controller: "Controller as $ctrl"
};

// ngState.component ↵
var stateName = {
  name: "state",
  url: "url",
  component: "component",
  resolve: {
    obj: [
      "$stateParams",
      "depService",
      function($stateParams, depService) {
        return depService.getResources($stateParams.id);
      }
    ]
  }
};

// ngState.resolve ↵
var stateName = {
  name: "state",
  url: "path/:id?query",
  templateUrl: "template.html",
  controller: "Controller as $ctrl",
  resolve: {
    obj: [
      "$stateParams",
      "depService",
      function($stateParams, depService) {
        return depService.getResources($stateParams.id);
      }
    ]
  }
};

// $q

// ngq  ↵
// ngq.es6  ↵
// ngqAll  ↵
// ngqRace  ↵

// ngAjax

// $$api  ↵ A complete AJAX package

// api  ↵

// apiRequest  ↵
// apiPost  ↵
// apiPut  ↵
// apiPatch  ↵
// apiDelete  ↵
// apiHead  ↵
// apiJSONP  ↵

// apiGet  ↵
function getResource(config) {
  var url = '';
  return $$api.get(url, config);
}

// $http

// ngHTTP  ↵
// ngHTTPPost  ↵
// ngHTTPPut  ↵
// ngHTTPPatch  ↵
// ngHTTPDelete  ↵
// ngHTTPHead  ↵
// ngHTTPJSONP  ↵

// ngHTTPGet  ↵
var deferred = $q.defer();
$http.get("url", config).then(
  function(response) {
    deferred.resolve(response);
  },
  function(error) {
    deferred.reject(error);
  }
);
return deferred.promise;

// Chore

$element.on("$destroy", function() {
  // clearWatch();
  // clearListener();
  $element.off("event", handleEvent);
  $scope.$destroy();
});

$scope.$on("$destroy", function() {
  // clearWatch();
  // clearListener();
  $element.off("event", handleEvent);
});

HTML

<!-- Directive --> ng-app ng-controller ng-init ng-include ng-cut ng-copy ng-paste ng-bind ng-bind-html ng-bind-template ng-non-bindable ng-href ng-src ng-srcset ng-style ng-class ng-class-even ng-class-odd ng-cloak ng-csp ng-show ng-hide ng-if ng-ref ng-model ng-model-options ng-options ng-value ng-pattern ng-list ng-open ng-pluralize ng-selected ng-required ng-checked ng-disabled ng-readonly ng-maxlength ng-minlength ng-click ng-submit ng-dblclick ng-change ng-focus ng-blur ng-on-event-name ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-swipe-left ng-swipe-right ng-repeat ng-repeat-objects ng-repeat-start ng-repeat-end ng-switch-on ng-switch-when ng-switch-default ng-messages ng-messages-include ng-message ng-message-exp ng-message-default <!-- Template --> ng-message(tpl) ngTemplate <!-- Input --> ngInput .checkbox .date .email .month .number .radio .text .time .url .week <!-- uiRouter --> uisref/ngsref uisref.active uisref.active.abstract uiview <!-- translate --> ngtranslate/ngi18n

CSS

.ng-valid {
}
.ng-invalid {
}
.ng-valid-key {
}
.ng-invalid-key {
}
.ng-pristine {
}
.ng-dirty {
}
.ng-touched {
}
.ng-untouched {
}
.ng-pending {
}
.ng-empty {
}

Thanks to

BY: xianghongai@gmail.com

License

MIT License

Donate

xianghongai@gmail.com

View Source Code
Post Views: 57
Posted in Development