Adds syntax highlighting and snippets to AngularJS v1.x in Atom.
Originally converted from the AngularJS TextMate bundle.
Contributions are greatly appreciated. Please fork this repository and open a pull request to add snippets, make grammar tweaks, etc.
You can use autocompletes for directives in HTML and angular.js's variables and function in JavaScript. See settings for more details.
If you type some prefix and press Tab or Enter, you can use autocompletes in below.
ng-app
ng-bind
ng-bind-html
ng-bind-template
ng-blur
ng-change
ng-checked
ng-class
ng-class-even
ng-class-odd
ng-click
ng-cloak
ng-controller
ng-copy
ng-csp
ng-cut
ng-dblclick
ng-disabled
ng-focus
ng-form
ng-hide
ng-href
ng-if
ng-include
ng-init
ng-jq
ng-keydown
ng-keypress
ng-keyup
ng-list
ng-model
ng-model-options
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-non-bindable
ng-open
ng-pluralize
ng-show
ng-transclude
ng-view
ng-messages
ng-message
ng-messages-include
ng-swipe-left
ng-swipe-righ
ng-dirty
ng-false-value
ng-invalid
ng-maxlength
ng-minlength
ng-message-exp
ng-options
ng-paste
ng-pattern
ng-pristine
ng-readonly
ng-required
ng-repeat
ng-repeat-start
ng-repeat-end
ng-selected
ng-src
ng-srcset
ng-style
ng-submit
ng-switch
ng-switch-when
ng-switch-default
ng-trim
ng-true-value
ng-valid
ng-value
angular
bind
bootstrap
copy
element
equals
extend
forEach
fromJson
identity
injector
isArray
isDate
isDefined
isElement
isFunction
isNumber
isObject
isString
isUndefined
lowercase
module
noop
reloadWithDebugInfo
toJson
uppercase
$anchorScroll
$animate
$cacheFactory
$compile
$controller
$document
$exceptionHandler
$filter
$http
$httpBackend
$interpolate
$interval
$locale
$location
$log
$parse
$q
$rootElement
$rootScope
$sce
$sceDelegate
$templateCache
$templateRequest
$timeout
$window
$animateProvider
$compileProvider
$controllerProvider
$filterProvider
$httpProvider
$interpolateProvider
$locationProvider
$logProvider
$parseProvider
$rootScopeProvider
$sceDelegateProvider
$sceProvider
$injector
$provide
$ariaProvider
$aria
$cookieStore
$cookies
mock
$exceptionHandlerProvider
TzDate
dump
inject
$resource
$routeProvider
$route
$routeParams
$sanitize
$swipe
controller
$scope
service
factory
provider
ngResource
defer
config
when
otherwise
directive
run
filter
You can use snippets in HTML and JavaScript. See snippets for more details.
If you type prefix and press tab,
It will be replaced by snippet for it.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/$1/angular.js"></script>
</head>
<body ng-app>
$2
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1/angular.js"></script>
<script type="text/ng-template" id="$1">
$2
</script>
<ng-include src="$1" ${2: onload="$3"} ${4: autoscroll="$5"}></ng-include>
<ng-pluralize count="$1" when="$2" ${3: offset="$4"}></ng-pluralize>
<ng-switch on="$1">$2</ng-switch>
<script type="text/ng-template">$1</script>
<ng-view ${1: onload="$2"} ${3: $autoscroll="$4"}></ng-view>
angular.module('$1', [$2])$3
var $1 = angular.module('$2', [$3])$4
var $1 = angular.module('$2', [$3], function($4) {
$5
})$6
factory('$1', function($2) {
$3
})$4
filter('$1', function($2) {
return function (input, $3) {
$4
};
})$5
service('$1', function($2) {
$3
})$4
$routeProvider.otherwise({redirectTo: '$1' });
$routeProvider.when('$1', {templateUrl: '$2', controller: '$3'});
$routeProvider.when('$1', {templateUrl: '$2', controller: '$3', resolve: {$4} });
angular.forEach($1, function(value, key) {
$2
});
.directive('$1', function($2) {
$3
return function(scope, element, attrs) {
$4
}
})$5
function (scope, element, attrs) {
$1
}
.directive('$1', function factory($2) {
var directiveDefinitionObject = {
$3
compile: function compile(tElement, tAttrs, transclude) {
$4
return function (scope, element, attrs) {
$5
}
}
};
return directiveDefinitionObject;
})$6
function compile(tElement, tAttrs, transclude) {
$1
return function (scope, element, attrs) {
$2
}
}$3
$scope.$broadcast('$1', $2);
$scope.$emit('', );
$scope.$1 = function($2) {
$3
};
$1Ctrl.prototype.$2 = function $2($3) {
$4
};
$scope.$on('$1', function(event, $2) {
$3
});
$scope.$1 = $2;
$scope.$watch('$1', function(newValue, oldValue) {
$2
});
$timeout(function() {
$2
}, $1)
var $1 = function($scope, $2) {
$3
}
$1Ctrl.$inject = [$scope, '$2'];
function $1Ctrl($scope, $2) {
$4
}
angular.module($3).controller('$1Ctrl', $1Ctrl);
/**
* @ngdoc ${1:function}
* @name $2
* @description
* $3
*
*/
$http({method: '${1:GET}', url: '$2'})
.success(function(data, status, headers, config) {
$3
})
.error(function(data, status, headers, config) {
$4
});
angular.copy(${1:source} ${2:, ${3:destination}})
angular.element(${1:element});
angular.equals(${1:object1}, ${2:object2});
angular.extend(${1:destinationObject}, ${2:sourceObject})
angular.isArray(${1:value})
angular.isDefined(${1:value})
angular.isFunction(${1:value})
angular.isNumber(${1:value})
angular.isObject(${1:value})
angular.isString(${1:value})
angular.lowercase(${1:string});
angular.uppercase(${1:string});
See emmet's document
In your keymap.cson, add the following code.
'atom-text-editor[data-grammar="text html angular"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'