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

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

Install

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.

Import Samples

Various Import Examples

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

//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

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

route-reporter

A directive that exposes @angular/router metadata for use in a component template

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

git clone -b src https://github.com/AckerApple/ack-angular

Building Example

Install example dependencies

npm run build

Dev Project Watching

npm run watch

Publish Package

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