Explore various methods of retrieving and displaying data using AngularJS and the MEAN Stack.
Introduction
In the following two-part post, we will explore several methods of retrieving and displaying data using AngularJS and the MEAN Stack. The post’s corresponding GitHub project, ‘meanstack-data-samples‘, is based on William Lepinski’s ‘generator-meanstack‘, which is in turn is based on Yeoman’s ‘generator-angular‘. As a bonus, since both projects are based on ‘generator-angular’, all the code generators work. Generators can save a lot of time and aggravation when building AngularJS components.
In part one of this post, we will install and configure the ‘meanstack-data-samples’ project from GitHub, which corresponds to this post. In part two, we will we will look at several methods for retrieving and displaying data using AngularJS:
- Function within AngularJS Controller returns array of strings.
- AngularJS Service returns an array of simple object literals to the controller.
- AngularJS Factory returns the contents of JSON file to the controller.
- AngularJS Factory returns the contents of JSON file to the controller using a resource object
(In GitHub project, but not discussed in this post). - AngularJS Factory returns a collection of documents from MongoDB Database to the controller.
- AngularJS Factory returns results from Google’s RESTful Web Search API to the controller.
Preparation
If you need help setting up your development machine to work with the MEAN stack, refer to my last post, Installing and Configuring the MEAN Stack, Yeoman, and Associated Tooling on Windows. You will need to install all the MEAN and Yeoman components.
For this post, I am using JetBrains’ new WebStorm 8RC to build and demonstrate the project. There are several good IDE’s for building modern web applications; WebStorm is one of the current favorites of developers.
Complexity of Modern Web Applications
Building modern web applications using the MEAN stack or comparable technologies is complex. The ‘meanstack-data-samples’ project, and the projects it is based on, ‘generator-meanstack’ and ‘generator-angular’, have dozens of moving parts. In this simple project, we have MongoDB, ExpressJS, AngularJS, Node.js, yo, Grunt, Bower, Git, jQuery, Twitter Bootstrap, Karma, JSHint, jQuery, Mongoose, and hundreds of other components, all working together. There are almost fifty Node packages and hundreds of their dependencies loaded by npm, in addition to another dozen loaded by Bower.
Installing, configuring, and managing all the parts of a modern web application requires a basic working knowledge of these technologies. Understanding how Bower and npm install and manage packages, how Grunt builds, tests, and serves the application with ExpressJS, how Yo scaffolds applications, how Karma and Jasmine run unit tests, or how Mongoose and MongoDB work together, are all essential. This brief post will primarily focus on retrieving and displaying data, not necessarily how the components all work, or work together.
Installing and Configuring the Project
Environment Variables
To start, we need to create (3) environment variables. The NODE_ENV
environment variable is used to determine the environment our application is operating within. The NODE_ENV
variable determines which configuration file in the project is read by the application when it starts. The configuration files contain variables, specific to that environment. There are (4) configuration files included in the project. They are ‘development’, ‘test’, ‘production’, and ‘travis’ (travis-ci.org). The NODE_ENV
variable is referenced extensively throughout the project. If the NODE_ENV
variable is not set, the application will default to ‘development
‘.
For this post, set the NODE_ENV
variable to ‘test
‘. The value, ‘test
‘, corresponds to the ‘test
‘ configuration file (‘meanstack-data-samples\config\environments\test.js
‘), shown below.
// set up ===================================== var express = require('express'); var bodyParser = require('body-parser'); var errorHandler = require('errorhandler'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var methodOverride = require('method-override'); var session = require('express-session'); var path = require('path'); var env = process.env.NODE_ENV || 'development'; module.exports = function (app) { if ('test' == env) { console.log('environment = test'); app.use(function staticsPlaceholder(req, res, next) { return next(); }); app.set('db', 'mongodb://localhost/meanstack-test'); app.set('port', process.env.PORT || 3000); app.set('views', path.join(app.directory, '/app')); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(favicon('./app/favicon.ico')); app.use(logger('dev')); app.use(bodyParser()); app.use(methodOverride()); app.use(cookieParser('your secret here')); app.use(session()); app.use(function middlewarePlaceholder(req, res, next) { return next(); }); app.use(errorHandler()); } };
The second environment variable is PORT
. The application starts on the port indicated by the PORT
variable, for example, ‘localhost:3000’. If the the PORT
variable is not set, the application will default to port ‘3000
‘, as specified in the each of the environment configuration files and the ‘Gruntfile.js’ Grunt configuration file.
Lastly, the CHROME_BIN
environment variable is used Karma, the test runner for JavaScript, to determine the correct path to browser’s binary file. Details of this variable are discussed in detail on Karma’s site. In my case, the value for the CHROME_BIN
is ‘C:\Program Files (x86)\Google\Chrome\Application\chrome.exe'
. This variable is only necessary if you will be configuring Karma to use Chrome to run the tests. The browser can be changes to any browser, including PhantomJS. See the discussion at the end of this post regarding browser choice for Karma.
You can easily set all the environment variables on Windows from a command prompt, with the following commands. Remember to exit and re-open your interactive shell or command prompt window after adding the variables so they can be used.
REM cofirm the path to Chrome, change value if necessary | |
setx /m NODE_ENV "test" | |
setx /m PORT "3000" | |
setx /m CHROME_BIN "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" |
Install and Configure the Project
To install and configure the project, we start by cloning the ‘meanstack-data-samples‘ project from GitHub. We then use npm and bower to install the project’s dependencies. Once installed, we create and populate the Mongo database. We then use Grunt and Karma to unit test the project. Finally, we will use Grunt to start the Express Server and run the application. This is all accomplished with only a few individual commands. Please note, the ‘npm install’ command could take several minutes to complete, depending on your network speed; the project has many direct and indirect Node.js dependencies.
# install meanstack-data-samples project | |
git clone https://github.com/garystafford/meanstack-data-samples.git | |
cd meanstack-data-samples | |
npm install | |
bower install | |
mongoimport --db meanstack-$NODE_ENV --collection components components.json --drop # Unix | |
# mongoimport --db meanstack-%NODE_ENV% --collection components components.json --drop # Windows | |
grunt test | |
grunt server |
If everything was installed correctly, running the ‘grunt test’ command should result in output similar to below:
If everything was installed correctly, running the ‘grunt server’ command should result in output similar to below:
Running the ‘grunt server’ command should start the application and open your browser to the default view, as shown below:
Karma’s Browser Choice for Unit Tests
The GitHub project is currently configured to use Chrome for running Karma’s unit tests in the ‘development’ and ‘test’ environments. For the ‘travis’ environment, it uses PhantomJS. If you do not have Chrome installed on your machine, the ‘grunt test’ task will fail during the ‘karma:unit’ task portion. To change Karma’s browser preference, simply change the ‘testBrowser’ variable in the ‘./karma.conf.js’ file, as shown below.
// Karma configuration | |
module.exports = function (config) { | |
// Determines Karma's browser choice based on environment | |
var testBrowser = 'Chrome'; // Default browser | |
if (process.env.NODE_ENV === 'travis') { | |
testBrowser = 'PhantomJS'; // Must use for headless CI (Travis-CI) | |
} | |
console.log("Karma browser: " + testBrowser); | |
... | |
// Start these browsers, currently available: | |
// Chrome, ChromeCanary, Firefox, Opera, | |
// Safari (only Mac), PhantomJS, IE (only Windows) | |
browsers: [testBrowser], |
I recommend installing and using PhantomJS headless WebKit, locally. Since PhantomJS is headless, Karma runs the unit tests without having to open and close browser windows. To run this project on continuous integration servers, like Jenkins or Travis-CI, you must PhantomJS. If you decide to use PhantomJS on Windows, don’t forget add the PhantomJS executable directory path to your ‘PATH’ environment variable to, after downloading and installing the application.
Code Generator
As I mentioned at the start of this post, this project was based on William Lepinski’s ‘generator-meanstack‘, which is in turn is based on Yeoman’s ‘generator-angular‘. Optionally, to install the ‘generator-meanstack’ npm package, globally, on our system use the following command The ‘generator-meanstack’ code generator will allow us to generate additional AngularJS components automatically, within the project, if we choose. The ‘generator-meanstack’ is not required for this post.
npm install -g generator-meanstack
Part II
In part two of this post, we will explore each methods of retrieving and displaying data using AngularJS, in detail.
#1 by laserbeak43 on August 21, 2014 - 6:26 am
Great article. I wish I knew how to configure this to work in Visual Studio…
#2 by Gary A. Stafford on December 25, 2014 - 8:02 pm
Note, the Google Web Search API is no longer available as of September 29, 2014. The post’s example post will no longer return a result set. Please migrate to the Google Custom Search API (https://developers.google.com/custom-search/). I will be demonstrating the new Custom Search API in a future post.
The GitHub project has been updated to Custom Search API.