https://github.com/tomastrajan/component-pattern-for-angular-js-1-x

Example of implementation of Component pattern for Angular JS 1.X using ES6 & Webpack
https://github.com/tomastrajan/component-pattern-for-angular-js-1-x

angularjs component example webpack

Last synced: 3 months ago
JSON representation

Example of implementation of Component pattern for Angular JS 1.X using ES6 & Webpack

• Host: GitHub
• URL: https://github.com/tomastrajan/component-pattern-for-angular-js-1-x
• Owner: tomastrajan
• Created: 2015-08-02T12:05:05.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-30T08:07:23.000Z (over 7 years ago)
• Last Synced: 2024-10-05T08:45:42.500Z (3 months ago)
• Topics: angularjs, component, example, webpack
• Language: JavaScript
• Size: 252 KB
• Stars: 70
• Watchers: 6
• Forks: 15
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### ATTENTION

This is one of the first Angular JS repositories I created, if you like component pattern

and want a seed project use [Angular JS 1.X ES6 seed](https://github.com/tomastrajan/angular-js-es6-testing-example)

which implements `component pattern`, contains better `webpack` build and advanced

testing support out of the box, happy hacking!

# Component Pattern for Angular JS 1.X

* original blog post describing [Component Pattern](https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b)

* presentation describing history of Angular JS concepts and [Component Pattern](https://slides.com/tomastrajan/component-pattern-for-angular-js-1-x)

![Components](/src/asset/image/components.jpg?raw=true "Component Patternf for Angular JS 1.X")

## Features

* standard implementation of a state using `ui-router`

* component implementation used as inline template in `ui-router` state definition

* ES6, Webpack

## Installation

To use it, just clone this repo and install the npm dependencies:

```shell

$ git clone https://github.com/tomastrajan/component-pattern-for-angular-js-1-x component_pattern_example

$ cd component_pattern_example

$ npm install

```

## Scripts

All scripts are run with `npm run [script]`, for example: `npm run test`.

* `build` - generate a minified build to dist folder

* `dev` - start development server, try it by opening `http://localhost:8080/`

* `test` - run all tests

* `test:live` - continuously run unit tests watching for changes

## Credits

This example uses build process from [angular-webpack-workflow](https://github.com/Foxandxss/angular-webpack-workflow),

so check it out for more information if needed.