# angular-tags

> A transform library to generate angular directives from components like html tags

Latest version **0.0.1** (published 2015-01-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install angular-tags
pnpm add angular-tags
yarn add angular-tags
bun add angular-tags
```

Provides the command `angular-tags`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2015-01-26 |
| First published | 2015-01-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | David Rodenas |
| Maintainers | drpicox |
| Keywords | angular, tags, components |

## Links

- npm: https://www.npmjs.com/package/angular-tags
- Repository: https://github.com/drpicox/angular-tags
- Issues: https://github.com/drpicox/angular-tags/issues
- npm.io page: https://npm.io/package/angular-tags

## Dependencies (6)

- [lodash](https://npm.io/package/lodash.md) ^2.4.1
- [cheerio](https://npm.io/package/cheerio.md) ^0.18.0
- [minimist](https://npm.io/package/minimist.md) ^1.1.0
- [es6-promise](https://npm.io/package/es6-promise.md) ^2.0.1
- [autoprefixer-core](https://npm.io/package/autoprefixer-core.md) ^5.0.0
- [underscore.string](https://npm.io/package/underscore.string.md) ^3.0.1

## Recent versions

- 0.0.1 (latest) — 2015-01-26

## README

Angular-Tags
============

Transformation utility to convert _polymer-like_ elements into 
angular directives, so all directive logic is kept toghether. Ex:


```html
<!-- 'hello-world.ntag' -->
<angular-element name="hello-world" bindings="name">
    <style>
        [hello-world] {
            font-size: 200%;
        }
    </style>
    <template>
        <p ng-click="helloWorld.wave()">Hello {{helloWorld.name}}!</p>
    </template>
    <script inject="">
        this.wave = function() {
            console.log('wave '+this.name);
        }
    </script>
</angular-element>
```


It can be compiled with the command:

```bash
$ angular-tags hello-world.ntag -m myApp
```


This code would generate the following directive:

```javascript
/*
	<hello-world
			data-name="=..."
			></hello-world>

	Controller HelloWorldController as helloWorld

*/
(function(angular) {
	'use strict';

	angular
		.module('ntagExample')
		.directive('helloWorld', helloWorld);

	helloWorld.$inject = ['$document'];
	function helloWorld  ( $document ) {
		var directive = {
			bindToController: true,
			controller: HelloWorldController,
			controllerAs: 'helloWorld',
			restrict: 'E',
			scope: {
				name: '=',
			},
			template: '\n        <p ng-click=\"helloWorld.wave()\">Hello {{helloWorld.name}}!</p>\n    ',
		};

		// register style for this component
		$document.find('head').append('<style>\n        [hello-world] {\n            font-size: 200%;\n        }\n    </style>');

		return directive;
	}

	HelloWorldController.$inject = [];
	function HelloWorldController  () {
        this.wave = function() {
            console.log('wave '+this.name);
        }
	}

})(angular);
```


More examples
-------------

You can find more examples here: [examples](examples/index.md).


FAQ
---

### Can I costumize my output?

Yes. Code generation is made with templates, default template is `./lib/_directive.js`,
if you want to use yours just change the `generatorBody` or `generatorFilename` properties.


### There is always a controller?

Yes. AngularJS has many options and it makes things too complicated to beginners and 
potentially creates multiple kind of solutions inside one single project. Angular-Tags
removes large number of these options and leaves a unique uniform mechanism that should
be useful for many projects.


### Why CSS is embedded in the JS?

Why not? It is the most simple solution. The compiled file is just one html file, the output file is just one another file, so there is a match one by one. But it can be customized to produce two files, one JS and other CSS. By the way, the CSS produced is autoprefixed.

---
_Source: https://npm.io/package/angular-tags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._