Git Product home page Git Product logo

angular-ui's Introduction

Build Status Test Coverage Code Climate Issue Count npm version

AMD Core - Angular UI

Overview

This project is an Angular 2 UI Component Library, and is in very early stages of development!

Features

  • Native Angular DOM manipulation
  • 100% Angular Universal compatible
  • Pure CSS driven animations
  • Built to be themeable

Cross Browser Support

BrowserStack Logo

BrowserStack provides live, web-based browser testing with access all real mobile and desktop browsers. We use BrowserStack to automate running our tests across all modern browsers to ensure consistency in how our components look and behave on different browsers, ensuring that you have a solid foundation on which to build your Angular application.

Installation

$ npm install --save-dev @amd-core/angular-ui

Useage

CSS

@import '~@amd-core/angular-ui/reset-ui-theme.css';
@import '~@amd-core/angular-ui/base-ui-theme.css';

Buttons

button-example.module.ts

import { NgModule } from '@angular/core';
import { AmdButtonModule } from '@amd-core/angular-ui';

import { ButtonExampleComponent } from './button-example.component.ts';

@NgModule{(
  imports: [AmdButtonModule],
  declarations: [ButtonExampleComponent]
)}
export class ButtonExampleComponent { }

button-example.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'amd-button-example',
  templateUrl: './button-example.component.html'
})
export class AmdButtonComponent {
  public onPrimaryButtonClicked(): void {
    console.log('Primary button clicked!');
  }

  public onSecondaryButtonClicked(): void {
    console.log('Secondary button clicked!');
  }
}

button-example.component.html

<button amd-button class="button-primary" (click)="onPrimaryButtonClicked()">
  Primary Button
</button>

<button amd-button class="button-secondary" (click)="onSecondaryButtonClicked()">
  Secondary Button
</button>

Contributing

Setup

Install NodeJS

Installation instructions are available here.

Clone the repository locally

Note that this project uses a submodule for the demo project to avoid repeating code from the AMD Angular Seed project. To clone this project and include the submodule, run the following:

$ git clone https://github.com/amd-core/amd-angular-ui.git

Install the project's dependencies

The dependencies need to be installed for the both the main project and demo sub project.

$ npm install
$ cd demo
$ npm install

Run the demo

$ cd demo
$ npm start

angular-ui's People

Watchers

James Cloos avatar Nathan Mc Grath avatar

angular-ui's Issues

Create Button Directive

  • Directive
  • Reset UI Theme contribution
  • Base UI Theme contribution
  • Unit Tests
  • Integration Tests

Output ES2015 module format

Outputting ES2015 format would allow for projects importing this library to perform tree-shaking, removing any modules/components that they're not actually using.

At the moment, this isn't possible with Webpack but webpack/webpack#2933 is tracking the progress of its implementation.

It seems to be moving slowly, so depending on whether or not it actually gains traction, this project might need to move to another build system.

If it is implemented, the project should output 2 Webpack builds in parallel.

module.exports = [
  Merge(CommonConfig, {
    output: {
      filename: '[name].umd.js',
      libraryTarget: 'umd'
    }
  }),
  Merge(CommonConfig, {
     output: {
       filename: '[name].module.js',
       libraryTarget: 'es2015'
     }
   })
];

AOT compilation failing when imported to another project

AOT compilation is failing in the amd-angular-seed project when importing this library from NPM.

ERROR in Unexpected value 'AmdButtonModule in C:/Programming/amd-core/amd-angular-seed/node_modules/@amd-core/angular-ui/typings/amd-form/amd-button/amd-button.module.d.ts' imported by the module 'AppModule in C:/Programming/amd-core/amd-angular-seed/src/app/app.module.ts'. Please add a @NgModule annotation.

ERROR in ./src/main.aot.ts
Module build failed: Error:
Invalid source file: C:\Programming\amd-core\amd-angular-seed\src\main.aot.ts. Ensure that the files supplied to lint have a .ts, .tsx, .js or .jsx extension.

    at Linter.getSourceFile (C:\Programming\amd-core\amd-angular-seed\node_modules\tslint\lib\linter.js:207:23)
    at Linter.lint (C:\Programming\amd-core\amd-angular-seed\node_modules\tslint\lib\linter.js:74:31)
    at lint (C:\Programming\amd-core\amd-angular-seed\node_modules\tslint-loader\index.js:70:10)
    at Object.module.exports (C:\Programming\amd-core\amd-angular-seed\node_modules\tslint-loader\index.js:140:3)

The TSLint error is likely to be caused by the first error.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.