Learning Web Development with Bootstrap and Angular

287 Pages·2015·3.06 MB·English

by  Stephen Radford

Learning Web Development with
Bootstrap and AngularJS
Table of Contents
Learning Web Development with Bootstrap and AngularJS
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
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Hello, {{name}}
Setting up
Installing AngularJS and Bootstrap
Installing Bootstrap
Installing AngularJS
Using AngularJS
Bootstrap
Self-test questions
Summary
2. Let's Build with AngularJS and Bootstrap
Setting up
Scaffolding
Navigation
Getting to grips with Bootstrap's grid
Helper classes
Floats
Center elements
Show and hide
Working with directives
ng-click and ng-mouseover
ng-init
ng-show and ng-hide
ng-if
ng-repeat
ng-class
ng-style
ng-cloak
Self-test questions
Summary
3. Filters
Applying a filter from the view
Currency and numbers
Lowercase and uppercase
limitTo
Date
Filter
orderBy
JSON
Applying filters from JavaScript
Building your own filter
Modules
Creating a module
Creating a filter
Self-test questions
Summary
4. Routing
Installing ngRoute
Creating basic routes
Routes with parameters
The fallback route
HTML5 routing or removing #
Enabling HTML5Mode
Linking routes
Self-test questions
Summary
5. Building Views
Populating the Index view
Populating the Add Contact view
Horizontal forms
Populating the View Contact view
Title and Gravatar
The form-horizontal class
Self-test questions
Summary
6. CRUD
Read
Sharing data between views
Sharing data using $rootScope
Creating a custom service
Value
Factory
Service
Rolling our own service
Using route parameters
Creating a custom directive
Respecting line-endings
Search and adding the active page class
Search
The active page class
Create
Update
Scope
Controller
Piecing it together
Delete
Self-test questions
Summary
7. AngularStrap
Installing AngularStrap
Using AngularStrap
The modal window
Tooltip
Popover
Alert
Utilizing AngularStrap's services
Integrating AngularStrap
Self-test questions
Summary
8. Connecting to the Server
Connecting with $http
Posting data
Connecting with ngResource
Including ngResource
Configuring ngResource
Getting from the server
Posting to the server
Deleting contacts
Error handling
Alternative ways of connecting
RestAngular
Using RestAngular
Firebase
Self-test questions
Summary
9. Using Task Runners
Installing Node and NPM
Utilizing Grunt
Installing the command-line interface
Installing Grunt
Creating a package.json file
Building the Gruntfile.js file
Running Grunt
Setting up watch
Creating the default task
Utilizing gulp
Installing gulp globally
Installing gulp dependencies
Setting up the gulpfile
Restructuring our project
Self-test questions
Summary
10. Customizing Bootstrap
Compiling Less with Grunt or gulp
Downloading the source
Compiling with Grunt
Setting up Watch and LiveReload
Compiling with gulp
Setting up Watch and LiveReload
Less 101
Importing
Variables
Nested rules
Mixins
Customizing Bootstrap's styles
Typography
navbar
Forms
Buttons
The Bootstrap themes
Where to find additional Bootstrap themes
Self-test questions
Summary
11. Validation
Form validation
Pattern validation
Using minlength, maxlength, min, and max
Creating a custom validator
Self-test questions
Summary
12. Community Tools
Batarang
Installing Batarang
Inspecting the scope and properties
Monitoring performance
Visualizing dependencies
Batarang options
ng-annotate
Installing ng-annotate
Using ng-annotate with Grunt
Configuring the task
Hooking into our watch task
Using ng-annotate with gulp
Self-test questions
Summary
A. People and Projects to watch
Bootstrap projects and people
The core team
Bootstrap Expo
BootSnipp
Code guide by @mdo
Roots
Shoelace
Bootstrap 3 snippets for Sublime Text
Font Awesome
Bootstrap Icons
AngularJS projects and people
The core team
RestAngular
AngularStrap and AngularMotion
AngularUI
Mobile AngularUI
Ionic
AngularGM
Now it's your turn…
B. Where to Go for Help
The official documentation
GitHub issues
Stack Overflow
The AngularJS Google group
Egghead.io
Twitter
C. Self-test Answers
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Index
Learning Web Development with
Bootstrap and AngularJS