https://github.com/divyanshu-rawat/angular-js-webpack

This repository demonstrates use of webpack in angular js application to make it modular.
https://github.com/divyanshu-rawat/angular-js-webpack

angularjs commonjs-modules webpack

Last synced: about 1 year ago
JSON representation

This repository demonstrates use of webpack in angular js application to make it modular.

• Host: GitHub
• URL: https://github.com/divyanshu-rawat/angular-js-webpack
• Owner: divyanshu-rawat
• Created: 2017-04-01T09:40:03.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-22T16:43:48.000Z (almost 9 years ago)
• Last Synced: 2025-02-15T01:41:21.092Z (about 1 year ago)
• Topics: angularjs, commonjs-modules, webpack
• Language: JavaScript
• Size: 229 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#### Bundling Angular with webpack

##

[![Join the chat](https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-brightgreen.svg)](https://gitter.im/divyanshu001)

[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/divyanshurawat?utm_source=github&utm_medium=button&utm_term=divyanshurawat&utm_campaign=github)

[![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/r46956)

[![DUB](https://img.shields.io/dub/l/vibe-d.svg?style=flat)](#)

[![Divyanshu](https://img.shields.io/badge/divyanshu-owner-brightgreen.svg?style=flat)](http://www.divyanshurawat.in)

[![Say Thanks!](https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg)](https://saythanks.io/to/divyanshu-rawat)

[![Build Status](https://travis-ci.org/divyanshu-rawat/JS-Testing.svg?branch=master)](https://travis-ci.org/divyanshu-rawat/JS-Testing)

[![NPM](https://img.shields.io/badge/npm-v3.10.10-blue.svg)](https://www.npmjs.com/package/npm)

##

### Description 

* Angular is so modular you can separate your JavaScript code like your controllers and services into multiple files.

  But adding all of the script references to your HTML might be painful. No worries there is a workaround to this problem.

* webpack is a module loader that works similar to how Node handles modules.

  With webpack you can install Angular using NPM, the Node Package Manager.

 

* This application basically  monitors the status of github.com and all its related services.

##

### Installation Instructions

* Open a command prompt in the project's root directory.

* Cd into that root folder you just cloned locally.

* Open terminal in the current folder and to install all dependencies type 

```javascript

   npm install 

```

* This installs the dependencies as defined in the package.json file

```javascript

   npm run bundle 

```

* By running this command example webpack will read and analyze the entry point and its dependencies (including transitive     dependencies).Then it will bundle them all into app.bundle.js.

* Now typing 

```javascript

   http-server

```

* It will launch the server on `http://172.18.0.1:8081`

##

### Contributing

1. Create your **_branch_**: `git checkout -b my-new-feature`

2. **_Commit_** your changes: `git commit -m 'Add some feature'`

3. **_Push_** to the branch: `git push origin my-new-feature`

4. Send a **Pull Request**

5. **_Enjoy!_**

##

### Dependencies

* Angular JS,webpack

#### some examples

* Main Application.

![alt tag](https://github.com/divyanshu-rawat/Angular-JS-WebPack/blob/master/app/screenshots/appex.png)

##

* On running npm run bundle.

![alt tag](https://github.com/divyanshu-rawat/Angular-JS-WebPack/blob/master/app/screenshots/bundleex.png)

##

*  Sample example showing How webpack works.

![alt tag](https://github.com/divyanshu-rawat/Angular-JS-WebPack/blob/master/app/screenshots/sampleex.png)