ack-angular

Extra special directives, components, providers and pipes to aide in tackling everyday interface development needs in Angular. Demos and Examples here


> Source Repository : src branch here

Table of Contents

- Install
- Importing into Project
- Dependency Map
- Components
- Work on This Project
- Building Example
- Resources

Install

``bash
npm install --save-dev web-animations-js ack-x ack-angular-fx ack-angular
`

Importing into Project

ack-angular uses file based imports, importing the index does nothing.

$3

#### Various Import Examples
`javascript
import { pipes, components } from "ack-angular"

//save as above
import { declarations as pipes } from "ack-angular/pipes"
import { declarations as components } from "ack-angular/declarations"
`

#### Dependency Based Import Examples
If you attempt to import any of the following, certain dependencies must have already been installed.

check dependency map

`javascript
//requires @angular/router imports
import { RouteReporter } from "ack-angular/RouteReporter.directive"
import { RouteWatchReporter } from "ack-angular/RouteWatchReporter"
`

Dependency Map

If you import the following files, make sure you have installed it's dependencies

> You can ignore all of this if you used ack-webpack to install jsDependencies

- ack-angular/RouteReporter.directive.ts
- Import Example : import { RouteReporter } from "ack-angular/RouteReporter.directive"
- Dependency Install npm install @angular/router --save-dev
- ack-angular/RouteWatchReporter.ts
- Import Example : import { RouteWatchReporter } from "ack-angular/RouteWatchReporter"
- Dependency Install npm install @angular/router --save-dev

> The Extended Documentation may help bring further understanding as to what is required and when to import dependencies

Components

Directives and Components making development life more joyful

Common Components

Include one file and access several

`javascript
import { pipes as ackPipes , components as ackComps } from "ack-angular/declarations";
import { NgModule } from '@angular/core';

@NgModule({
declarations:[...ackComps, ...ackPipes]
})
`

Complex Components

Components that have additional dependencies or restrictions

$3

A directive that exposes @angular/router metadata for use in a component template
`javascript
import { RouterModule } from '@angular/router';
import { RouteWatchReporter } from "ack-angular/RouteWatchReporter"
import { RouteReporter } from "ack-angular/RouteReporter.directive"
import { NgModule } from '@angular/core';

@NgModule({
imports:[ RouterModule.forRoot() ]
})
`

Work on This Project

Everything in this topic is run in an command prompt terminal

Clone project source files
`bash
git clone -b src https://github.com/AckerApple/ack-angular
`

Building Example

Install example dependencies
`bash
npm run build
`

Dev Project Watching
`bash
npm run watch
`

$3

Before publishing, update the package version number in:
- package.json
- ack-angular/package.json

After running the build command:
- git push /ack-angular to master branch
- npm publish ack-angular folder
- git push /example/www/ to gh-pages branch
- git push / to src` branch

Resources

- Examples and Docs
- Repository
- Angular Cheatsheet