You are previewing Learning Web Development with Bootstrap and AngularJS.
O'Reilly logo
Learning Web Development with Bootstrap and AngularJS

Book Description

Build your own web app with Bootstrap and AngularJS, utilizing the latest web technologies

In Detail

If you're ready to progress your web development skills past HTML and CSS, this book will give you everything you need to build your own web app. You'll be taught the basics of Bootstrap and AngularJS, taking an in-depth look at what makes up each framework. After you've mastered the ideology, you'll put it into action as you build a contact manager throughout the course of the book.

We'll look at filters, routing, and views for your app and will teach you to utilize CRUD (Create, Read, Update, and Delete) to develop further. You'll learn how to connect your app to the server, customize Bootstrap, and build a directive. Along the way we'll touch on additional technologies such as Less, gulp, Grunt, and AngularStrap. Finally, we'll take a look at potential stumbling blocks and will give you tips to avoid them.

With this step-by-step guide packed with plenty of screenshots, you'll be building web apps in no time.

What You Will Learn

  • Explore Angular's built-in filters and create your own

  • Create a multi-view web app using AngularJS's router and templating system

  • Integrate AngularStrap to utilize the many plugins originally created by the Bootstrap team

  • Customize Bootstrap using Less to create a unique theme

  • Maintain the codebase of your app using the gulp and Grunt.js task-runner tools

  • Discover the meaning of CRUD and how to implement it

  • Troubleshoot any issues you may encounter while developing

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

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