diff --git a/README.md b/README.md index e5540ca02c..897bc1822a 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,8 @@ -# angular-seed — the seed for AngularJS apps +# angular-seed — forked for webpack -This project is an application skeleton for a typical [AngularJS](http://angularjs.org/) web app. -You can use it to quickly bootstrap your angular webapp projects and dev environment for these -projects. - -The seed contains a sample AngularJS application and is preconfigured to install the Angular -framework and a bunch of development and testing tools for instant web development gratification. - -The seed app doesn't do much, just shows how to wire two controllers and views together. +This fork is specifically to show an example of using the [angular-webpack-plugin](https://github.com/stackfull/angular-webpack-plugin). The code is unchanged. +See [the original](https://github.com/angular/angular-seed) for more information on the project itself. ## Getting Started @@ -27,263 +21,21 @@ its package manager (npm) installed. You can get them from [http://nodejs.org/] Clone the angular-seed repository using [git][git]: ``` -git clone https://github.com/angular/angular-seed.git +git clone https://github.com/stackfull/angular-seed.git cd angular-seed ``` ### Install Dependencies -We have two kinds of dependencies in this project: tools and angular framework code. The tools help -us manage and test the application. - -* We get the tools we depend upon via `npm`, the [node package manager][npm]. -* We get the angular code via `bower`, a [client-side code package manager][bower]. - -We have preconfigured `npm` to automatically run `bower` so we can simply do: - ``` npm install ``` -Behind the scenes this will also call `bower install`. You should find that you have two new -folders in your project. - -* `node_modules` - contains the npm packages for the tools we need -* `app/bower_components` - contains the angular framework files - -*Note that the `bower_components` folder would normally be installed in the root folder but -angular-seed changes this location through the `.bowerrc` file. Putting it in the app folder makes -it easier to serve the files by a webserver.* - ### Run the Application -We have preconfigured the project with a simple development web server. The simplest way to start -this server is: - -``` -npm start -``` - -Now browse to the app at `http://localhost:8000/app/index.html`. - - - -## Directory Layout - - app/ --> all of the files to be used in production - css/ --> css files - app.css --> default stylesheet - img/ --> image files - index.html --> app layout file (the main html template file of the app) - index-async.html --> just like index.html, but loads js files asynchronously - js/ --> javascript files - app.js --> application - controllers.js --> application controllers - directives.js --> application directives - filters.js --> custom angular filters - services.js --> custom angular services - partials/ --> angular view partials (partial html templates) - partial1.html - partial2.html - - test/ --> test config and source files - protractor-conf.js --> config file for running e2e tests with Protractor - e2e/ --> end-to-end specs - scenarios.js - karma.conf.js --> config file for running unit tests with Karma - unit/ --> unit level specs/tests - controllersSpec.js --> specs for controllers - directivessSpec.js --> specs for directives - filtersSpec.js --> specs for filters - servicesSpec.js --> specs for services - - -## Testing - -There are two kinds of tests in the angular-seed application: Unit tests and End to End tests. - -### Running Unit Tests - -The angular-seed app comes preconfigured with unit tests. These are written in -[Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma -configuration file to run them. - -* the configuration is found at `test/karma.conf.js` -* the unit tests are found in `test/unit/`. - -The easiest way to run the unit tests is to use the supplied npm script: - -``` -npm test -``` - -This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and -watch the source and test files for changes and then re-run the tests whenever any of them change. -This is the recommended strategy; if your unit tests are being run every time you save a file then -you receive instant feedback on any changes that break the expected code functionality. - -You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to -check that a particular version of the code is operating as expected. The project contains a -predefined script to do this: - -``` -npm run test-single-run -``` - - -### End to end testing - -The angular-seed app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests -are run with the [Protractor][protractor] End-to-End test runner. It uses native events and has -special features for Angular applications. - -* the configuration is found at `test/protractor-conf.js` -* the end-to-end tests are found in `test/e2e/` - -Protractor simulates interaction with our web app and verifies that the application responds -correctly. Therefore, our web server needs to be serving up the application, so that Protractor -can interact with it. - ``` npm start ``` -In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed -project comes with a predefined script to do this: - -``` -npm run update-webdriver -``` - -This will download and install the latest version of the stand-alone WebDriver tool. - -Once you have ensured that the development web server hosting our application is up and running -and WebDriver is updated, you can run the end-to-end tests using the supplied npm script: - -``` -npm run protractor -``` - -This script will execute the end-to-end tests against the application being hosted on the -development server. - - -## Updating Angular - -Previously we recommended that you merge in changes to angular-seed into your own fork of the project. -Now that the angular framework library code and tools are acquired through package managers (npm and -bower) you can use these tools instead to update the dependencies. - -You can update the tool dependencies by running: - -``` -npm update -``` - -This will find the latest versions that match the version ranges specified in the `package.json` file. - -You can update the Angular dependencies by running: - -``` -bower update -``` - -This will find the latest versions that match the version ranges specified in the `bower.json` file. - - -## Loading Angular Asynchronously - -The angular-seed project supports loading the framework and application scripts asynchronously. The -special `index-async.html` is designed to support this style of loading. For it to work you must -inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help -do this. - -``` -npm run update-index-async -``` - -This will copy the contents of the `angular-loader.js` library file into the `index-async.html` page. -You can run this every time you update the version of Angular that you are using. - - -## Serving the Application Files - -While angular is client-side-only technology and it's possible to create angular webapps that -don't require a backend server at all, we recommend serving the project files using a local -webserver during development to avoid issues with security restrictions (sandbox) in browsers. The -sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr, -etc to function properly when an html page is opened via `file://` scheme instead of `http://`. - - -### Running the App during Development - -The angular-seed project comes preconfigured with a local development webserver. It is a node.js -tool called [http-server][http-server]. You can start this webserver with `npm start` but you may choose to -install the tool globally: - -``` -sudo npm install -g http-server -``` - -Then you can start your own development web server to serve static files from a folder by -running: - -``` -http-server -``` - -Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just -configure your server to serve the files under the `app/` directory. - - -### Running the App in Production - -This really depends on how complex is your app and the overall infrastructure of your system, but -the general rule is that all you need in production are all the files under the `app/` directory. -Everything else should be omitted. - -Angular apps are really just a bunch of static html, css and js files that just need to be hosted -somewhere they can be accessed by browsers. - -If your Angular app is talking to the backend server via xhr or other means, you need to figure -out what is the best way to host the static files to comply with the same origin policy if -applicable. Usually this is done by hosting the files by the backend server or through -reverse-proxying the backend server(s) and webserver(s). - - -## Continuous Integration - -### Travis CI - -[Travis CI][travis] is a continuous integration service, which can monitor GitHub for new commits -to your repository and execute scripts such as building the app or running tests. The angular-seed -project contains a Travis configuration file, `.travis.yml`, which will cause Travis to run your -tests when you push to GitHub. - -You will need to enable the integration between Travis and GitHub. See the Travis website for more -instruction on how to do this. - -### CloudBees - -CloudBees have provided a CI/deployment setup: - - - - -If you run this, you will get a cloned version of this repo to start working on in a private git repo, -along with a CI service (in Jenkins) hosted that will run unit and end to end tests in both Firefox and Chrome. - - -## Contact - -For more information on AngularJS please check out http://angularjs.org/ +Now browse to the app at `http://localhost:8000/app/index-webpack.html`. -[git]: http://git-scm.com/ -[bower]: http://bower.io -[npm]: https://www.npmjs.org/ -[node]: http://nodejs.org -[protractor]: https://github.com/angular/protractor -[jasmine]: http://pivotal.github.com/jasmine/ -[karma]: http://karma-runner.github.io -[travis]: https://travis-ci.org/ -[http-server]: https://github.com/nodeapps/http-server \ No newline at end of file diff --git a/app/index-webpack.html b/app/index-webpack.html new file mode 100644 index 0000000000..a763c3b40a --- /dev/null +++ b/app/index-webpack.html @@ -0,0 +1,33 @@ + + + + + + + + + My AngularJS App + + + + + + + + + + + + +
+ +
Angular seed app: v
+ + + + diff --git a/package.json b/package.json index 5035daf20b..9ad183c331 100644 --- a/package.json +++ b/package.json @@ -6,29 +6,27 @@ "repository": "https://github.com/angular/angular-seed", "license": "MIT", "devDependencies": { + "angular-webpack-plugin": "^0.0.3", + "bower": "^1.3.1", + "exports-loader": "^0.6.2", + "http-server": "^0.6.1", "karma": "~0.10", + "karma-junit-reporter": "^0.2.2", "protractor": "~0.20.1", - "http-server": "^0.6.1", - "bower": "^1.3.1", "shelljs": "^0.2.6", - "karma-junit-reporter": "^0.2.2" + "webpack": "^1.4.7" }, "scripts": { "postinstall": "bower install", - "prestart": "npm install", "start": "http-server -a localhost -p 8000", - "pretest": "npm install", "test": "karma start test/karma.conf.js", "test-single-run": "karma start test/karma.conf.js --single-run", - "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update", - "preprotractor": "npm run update-webdriver", "protractor": "protractor test/protractor-conf.js", - "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('app/bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\"" } } diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000000..1a0bc4550a --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,43 @@ +// webpack configuration for the angular-seed project using the +//angular-webpack-plugin. +var path = require('path'); +var AngularPlugin = require('angular-webpack-plugin'); + + +module.exports = { + // The entrypoint module is 'myApp' in angular module names, but is in the + // app/js/app.js file - so we have an alias below. + entry: 'myApp', + output: { + path: 'app', + filename: 'app.min.js' + }, + resolve: { + root: [ + // We want roots to resolve the app code: + path.resolve('app', 'js'), + // and the bower components: + path.resolve('app', 'bower_components')], + alias: { + // This one first to match just the entrypoint module. + // We only need this because the module name doesn't match the file name. + myApp$: 'myApp/app', + // This one maps all our modules called 'myApp.something' to the app/js + // directory + myApp: path.resolve('app', 'js'), + // This is also needed because the module name doesn't match the file name + // but we don't need to locate the file because it is a bower component + // with a file name the same as the directory (component) name: + // bower_components/angular-route/angular-route + ngRoute$: 'angular-route' + } + }, + plugins: [ + // The angular-webpack-plugin will: + // - make the angular variable available by importing the 'angular' module + // whenever it is seen in the code. + // - treat angular.module() dependencies as requires + // - try to resolve modules using angular conventions. + new AngularPlugin() + ] +};