Integrating angularjs with an ExpressJS project

Now that we have most of our server-side code working, we’ll start working on our angularjs code.

Let’s download the angular-seed project as a ZIP download from https://github.com/areai51/angular-seed and extract the contents of the ZIP file.

Now, we will only take the content of the app folder along with the package.json and bower.json files and place it within the public folder of angcms.

In the terminal, navigate to the angcms/public folder and run the following two commands:

npm install
bower install

Note that we do not run npm start from within the public folder, as we will be using the Express server that runs at port 3000.

Your folder structure should look something like the following:

Integrating angularjs with an ExpressJS project
The next step is to define the routes in our ExpressJS app such that all routes are managed by angularjs, except for those that start with a/api/.For this, we will add the following catch-all route at the end of the angcms/routes/index.js file as follows:

router.get('*', function(request, response) {
    response.sendfile('./public/index.html');
});

The routes in ExpressJS are executed sequentially, and hence, the catch-all route needs to be at the end.

Restart your app.js node application and point the browser URL to http://localhost:3000/index.html. Verify that the page displayed is the default index.html file of angular-seed.