Architecting Angular Applications with Redux，RxJS，and NgRx

上QQ阅读APP看书，第一时间看更新

Running the demo

Before we can run our demo we need an application file, app.js. The app.js file should require in our views and also carry out the selection:

// demo/app.js

import selectionView from './selectionView';
import selectedView from './selectedView';

// carry out the selection
selectionView.selectIndex(1);

To run our demo we need to compile it. Above we are using ES2015 modules. To compile those we will use webpack. We need to install webpack by typing the following in our terminal:

npm install webpack webpack-cli --save-dev

Once we have done so we need to create webpack.config.js file where we tell Webpack how to compile our files and where to place the resulting bundle. That file looks like the following:

// webpack.config.js

module.exports = {
  entry: "./app.js",
  output: { 
    filename: "bundle.js"
  },
  watch: false
};

This tells Webpack that app.js is the entry point to our application and it should crawl all the dependencies when creating the output file, bundle.js. Webpack will by default place bundle.js in the dist directory.

One more thing, we need an HTML file that we will name index.html. We will place under the dist folder. It should look like this:

// demo/dist/index.html

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Finally, to run our application, we need to compile it with Webpack and start a HTTP server and start up a browser. We will do all that with the following command from the demo directory:

webpack && cd dist && http-server -p 5000

Now, start a browser and navigate to http://localhost:5000. You should see the following:

All of this demonstrates how to views can be made to communicate using a dispatcher and a store.