Table Of ContentAngularJS Web Application Development
Blueprints
Table of Contents
AngularJS Web Application Development Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
About JavaScript MVC frameworks
How AngularJS was born
The idea behind this book
What this book covers
What you need for this book
Software versions
Copying the code files
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Introduction to AngularJS and the Single Page Application
Delving into Single Page Apps
Anatomy of a simple AngularJS app
Models and views
Building an Address Book App
Understanding the scope in AngularJS
Styling the app
Sorting the contacts alphabetically
Adding contacts to the Address Book
The ng-show and ng-hide directives
Summary
2. Setting Up Your Rig
Setting up Node.js
Creating a simple Node.js web server with ExpressJS
Setting up Grunt
Installing Grunt-cli
Creating the package.json file
Creating your Grunt tasks
Grunt tasks to merge and concatenate files
Running shell commands via Grunt
Yeoman – the workflow tool
Installing Yeoman
Running your app
Unit testing with Karma
Using Protractor for End-to-End tests
Installing Selenium Server
Understanding the example_spec.js file
Understanding the conf.js file
Writing your own Protractor test cases
Summary
3. Rapid Prototyping with AngularJS
Understanding the application that we will Prototype
Introducing Grid Layouts and Bootstrap
Understanding the grid system
Introducing Angular UI
UI-Utils
UI-Modules
UI-Bootstrap
NG-Grid
UI-Router
IDE Plugins
Prototyping the Healthy Living website
Adding the ui.bootstrap dependency
Creating the navigation bar
Adding the carousel
Tweaking the hero unit
Adding the three content blocks
Creating a new view
Understanding routes
Building the articles view
Accordions using Angular Bootstrap
Building the image gallery
Gallery view using Bootstrap Thumbnail
Adding the star rating
Building data grids using NG-Grid
Adding the NG-Grid component
Grouping data in NG-Grid
Excel-style editing in NG-Grid
Creating a modal window to add subscribers
Real-time form validations
Summary
4. Using REST Web Services in Your AngularJS App
Understanding the response from a REST API
Testing a RESTful web service
Jump starting your app development with Angular Seed
Files and folders in Angular Seed
Adding Bootstrap libraries
Starting your Node web server
Mark-up our Layout
Creating the routes
Understanding AngularJS services
Writing your first factory service
Dependency Injection
Coding the partial
Calling the REST web service using $http
Using promise for asynchronous calls
Displaying data from the JSON response
Unit testing our application
Mocking $http during Unit testing
Creating a Pinterest style layout
Adding actions to the buttons
Summary
5. Facebook Friends’ Birthday Reminder App
Understanding the Facebook SDK
The Social Graph
The Graph API
The Graph API Explorer
Creating your Facebook app
Setting up our project
Running your application
Delving into AngularJS directives
What is a directive?
Importance of naming conventions for directives
The anatomy of a directive
Writing our first directive
Adding a Facebook login
Adding the fb-root div element
Loading the Facebook SDK
Understanding $watch and $digest
When to use $apply
Getting the user’s friend list
Getting your friends’ profile pictures and birthdays
Requesting additional permission with FB.login
Understanding isolated scope
Adding some CSS styles
Changing the routes
Adding in the logout link
Writing automated tests
Writing Unit tests with Karma
Writing End-to-End tests using Protractor
Summary
6. Building an Expense Manager Mobile App
Understanding HTML5 Web Storage
localStorage
sessionStorage
Building the Expense Manager App
Building the Add Expense form
What is $rootScope?
Understanding the .run block
Creating a value service to store CategoryList
Validating the Add Expense form
Using localStorage to save data
Building a bar chart directive based on D3
Summarizing the expenses by categories
Creating our bar chart directive
Making the app responsive
Adding the CSS media query
Scaling the D3 chart based on window size
Adding touch events
Enabling swipe gestures using ngTouch
Adding page transitions using ngAnimate
Loading the ngAnimate module
Adding CSS3 transitions
Making the app feel like a native app
Adding touch icons
Running the app in fullscreen mode
Adding additional features
Summary
7. Building a CMS on the MEAN Stack
Why the MEAN stack?
Getting started with the MEAN stack
Setting up MongoDB
Setting up ExpressJS and MongooseJS
Building the server-side app
Creating the Mongoose schemas
Creating CRUD routes
Adding a new entry to the collection
Updating a collection
Deleting a collection item
Displaying a single record
Securing your admin section
Using bcrypt to encrypt passwords
Adding a new admin user
Creating the route for authenticating login
Creating the logout route
Writing the sessionCheck middleware
Integrating AngularJS with an ExpressJS project
Generating SEO-friendly URLs using HTML5 mode
Building the admin section for CRUD operations
Creating the routes for the admin section
Building the factory services
Building the controllers for the admin section
Setting up the admin page layout
Building the listing view for the admin section
Setting up authentication in AngularJS
Creating our login page
Building a custom module for global notification
Building and initializing the message.flash module
Building the message.flash factory service
Setting up $broadcasts
Building the directive for the message.flash module
Setting a flash message
Creating our Add-Edit page controller
Creating our Add-Edit view
Writing a custom filter to autogenerate the URL field
Adding the WYSIWYG editor
Setting up an Interceptor to detect responses
Building the frontend of our CMS
Building our navigation bar directive
Building the admin-login directive
Displaying the content of a page
Setting the default home page
Summary
8. Scalable Architecture for Deployments on AWS
Understanding the various services in Amazon AWS
Delving into AWS deployment architectures
The EC2 server-based architecture
The Server-less Architecture
Deploying our app in a Server-less Architecture on AWS
Mapping a domain to S3
Mapping the S3 bucket to a CloudFront distribution
