O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Web Development with Bootstrap 4 and Angular 2 - Second Edition

Book Description

Combine the power of Bootstrap 4 and Angular 2 to build cutting-edge web apps that truly stand out from the crowd

About This Book

  • Updated for the latest releases of Angular and Bootstrap, this book shows you how to build web applications with cutting-edge web technologies
  • Combine the best of both worlds to build single page apps with elegant user interfaces
  • Build, develop, and customize your application using Angular and Bootstrap
  • Packed with tips to help you avoid potential stumbling blocks while developing

Who This Book Is For

Whether you know a little about Bootstrap or Angular or you’re a complete beginner, this book will enhance your capabilities in both frameworks and you’ll build a fully functional web app. A working knowledge of HTML, CSS, and JavaScript is required to fully get to grips with Bootstrap and Angular.

What You Will Learn

  • Develop Angular 2 single page applications using an ecosystem of helper tools
  • Get familiar with Bootstrap’s new grid and helper classes
  • Embrace TypeScript and ECMAScript 2015 to write more maintainable code
  • Use custom directives for Bootstrap 4 with the ng2-bootstrap library
  • Understand the component-oriented structure of Angular 2 and its router
  • Make use of the built-in HTTP library to work with API endpoints
  • Use observables and streams to manage the app’s data and state
  • Combine Angular 2 and Bootstrap 4 along with Firebase in the development of a solid example

In Detail

Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.

Inside this title you'll dive, fingers first, into the basics of both the tools, and once you're familiar with them, you'll move onto Bootstrap's new grid system and Angular's built-in directives. You'll then learn how to format output using Angular's pipes and how to make use of the built-in router to set up routes for all your components.

Webpack will be your buddy to wrap up your project. Then, after throwing in some SASS to make things pretty, you'll learn how to validate the forms you've built and debug your application. Finally, you'll go on to learn how to obtain smooth transitioning from Bootstrap to Angular and then how to hook up with a server and use Firebase as the persistence layer.

Once you're done with this book, you'll not only have a lovely little e-commerce application running, but you'll also take with you the confidence to innovate and build your own applications with ease.

Style and approach

This practical, step-by-step guide shows you how to think in terms of components and modules and build web apps with Angular and Bootstrap. Starting with building a foundation in Angular and Bootstrap, the book shows you how to combine the two frameworks to build apps that have a strong architecture (Angular) and a clear UI (Bootstrap).

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 code file.

Table of Contents

  1. Web Development with Bootstrap 4 and Angular 2 - Second Edition
    1. Web Development with Bootstrap 4 and Angular 2 - Second Edition
    2. Credits
    3. About the Authors
    4. About the Reviewer
    5. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    6. 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
    7. 1. Saying Hello!
      1. Setting up a development environment
        1. Defining a shell
        2. Installing Node.js
        3. Setting up npm
        4. Installing Git
        5. Code editor
      2. A TypeScript crash course
        1. Types
        2. Arrow function
        3. Block scope variables
        4. Template literals
        5. The for-of loop
        6. Default value, optional and rest parameters
        7. Interfaces
        8. Classes
        9. Modules
        10. Generics
      3. What are promises?
        1. Event loop
        2. Asynchronous results via events
        3. Asynchronous results via callbacks
        4. Asynchronous results via promises
      4. Angular 2 concepts
        1. Building blocks of Angular 2
        2. Module
        3. Metadata
        4. Directives
        5. Attribute directives
        6. Structural directives
        7. Component
        8. Template
        9. Data binding
        10. Service
        11. Dependency injection
      5. SystemJS loader and JSPM package manager
        1. SystemJS Loader
        2. JSPM package manager
      6. Writing your first application
        1. TypeScript compile configuration
        2. Task automation and dependency resolution
      7. Creating and bootstrapping an Angular component
        1. Compiling and running
        2. Adding user input
      8. Integrating Bootstrap 4
      9. Summary
    8. 2. Working with Bootstrap Components
      1. Bootstrap 4
      2. Introduction to Sass
        1. Setting up of Ruby
        2. Setting up of Sass
        3. Sass crash course
          1. Variables
          2. Mathematical expressions
          3. Functions
          4. Nesting
          5. Imports
          6. Extends
          7. Placeholders
          8. Mixins
          9. Function directives
      3. Example project
        1. The scenario
        2. Gathering customer requirements
        3. Preparing use-cases
        4. Welcome page
        5. Products page
        6. Products page
        7. Cart page
        8. Checkout page
      4. Designing layouts with grids and containers
      5. Using images
      6. Using Cards
      7. Using buttons
        1. General button styles
        2. Outline button styles
        3. Button sizes
        4. Block level button styles
        5. The button with active style
        6. The button with inactive state
        7. Radio buttons and checkboxes
      8. Navs
        1. The base Nav
        2. Inline navigation
        3. Tabs
        4. Pills
        5. Stacked pills
        6. Navigation with dropdowns
      9. Navbars
        1. Content
        2. Colors
        3. Containers
        4. Responsive Navbar
        5. Responsive utilities
        6. The Navbar content alignment
      10. Summary
    9. 3. Advanced Bootstrap Components and Customization
      1. How to capture a customer's attention
        1. Displaying content with Jumbotron
        2. Typography
          1. Headings
          2. Sub-headings
          3. Display headings
          4. Lead
          5. Inline text elements
          6. Abbreviations
          7. Blockquotes
          8. Address
        3. Displaying content with a carousel
          1. Carousel container
          2. Carousel inner
          3. Carousel item
          4. Carousel indicators
          5. Carousel controls
      2. Products page layout
        1. Quick Shop component
        2. Input group
          1. Text addons
          2. Sizing
          3. Checkboxes and radio option addons
          4. Button addons
          5. Drop-down menu addons
          6. Segmented buttons
        3. Categories component
        4. List group
          1. Listing with tags
          2. Linked list groups
          3. Button list groups
          4. Contextual classes
          5. Custom content
        5. Creating a product grid
          1. Nested rows
        6. Product component
        7. Images
          1. Responsive images
          2. Image shapes
          3. Image alignment
        8. Tags
        9. Button groups
          1. Sizing
          2. Button toolbars
          3. Nesting drop-downs
          4. Vertical button groups
        10. Drop-down menus
          1. Drop-down containers
          2. Drop-down triggers
          3. Drop-down menus with items
          4. Menu alignment
          5. Menu headers and dividers
          6. Menu dividers
          7. Disabling menu items
        11. Tables
          1. table-inverse
          2. Striped rows
          3. Bordering tables
          4. Making rows hoverable
          5. Table head options
          6. Making table smaller
          7. Contextual classes
          8. Responsive tables
          9. Reflowing tables
        12. Shopping cart component
      3. Summary
    10. 4. Creating the Template
      1. Diving deeper into Angular 2
      2. Welcome page analysis
        1. Single responsibility principle
        2. Naming conventions
        3. Barrels
      3. Application structure
        1. Folders-by-feature structure
        2. Shared folder
      4. Navigation component
        1. Decorators
        2. Tree of components
        3. NavItem object
      5. Template expressions
        1. Expression context
        2. Template reference variable
        3. Expression guidelines
        4. Expression operators
          1. The Elvis operator
          2. The pipe operator
          3. The custom pipes
      6. Template statements
        1. Statement context
        2. Statement guidelines
      7. Data binding
        1. HTML attributes versus DOM properties
        2. Interpolation
        3. Property binding
        4. Attribute binding
        5. Class binding
        6. Style binding
        7. Event binding
        8. Custom events
        9. Two-way data binding
      8. Built-in directives
        1. NgClass
        2. NgStyle
        3. NgIf
        4. NgSwitch
        5. NgFor
      9. Structural directives
        1. Custom structural directive
      10. Category product component
      11. Summary
    11. 5. Routing
      1. Modern web applications
      2. Routing
        1. Routing path
        2. Installing the router
        3. The base URL
        4. The Angular router
      3. The router configuration
        1. Creating basic routes
        2. Query parameters
        3. Router parameters
        4. Route versus query parameters
        5. Register routing in bootstrap
      4. Redirecting routes
      5. Router outlet
        1. Welcome View
        2. The footer component
        3. The category data
        4. Category card view
        5. The product data
        6. Products View
        7. Quick shop component
        8. List of categories component
        9. Update the CategoryModule
      6. Router links
      7. Product card
      8. Products grid component
        1. Card groups
        2. Card columns
        3. Card desks
        4. Combine them all together
        5. The product module
        6. Update the AllModule
      9. Router change events
      10. Routing strategies
      11. Summary
    12. 6. Dependency Injection
      1. What is dependency injection?
      2. A real-life example
      3. Dependency injection
        1. Constructor injection
        2. Other injection methods
        3. Components versus services
      4. ReflectiveInjector
        1. Injectable decorator
        2. Inject decorator
        3. Optional decorator
        4. Configuring the injector
        5. Class providers
        6. Aliased class providers
        7. Value providers
          1. Multiple values
          2. Factory providers
      5. The hierarchy of injectors
      6. Category service
        1. Injector provider for category service
        2. Product service
        3. Injector provider for product service
      7. The shopping cart
        1. The Cart model and CartItem
        2. The CartService
        3. The Cart menu component
        4. Cart module
        5. Update the Navbar
        6. Update the Cart via Service
      8. Summary
    13. 7. Working with Forms
      1. HTML form
      2. Bootstrap forms
        1. Form controls
        2. Form layouts
        3. Standard form
        4. Inline form
        5. Hidden labels
        6. Form control size
        7. Help text
        8. Form grid layout
        9. Stacked checkboxes and radios
        10. Inline checkboxes and radios
        11. Static control
        12. Disabled states
        13. Read-only inputs
        14. Validation styles
      3. Formless search
        1. User input from event object
        2. User input from a template reference variable
      4. Product View
        1. Product image
        2. Product information
        3. The CategoryTitle pipe
        4. Cart information in Product View
          1. Quantity and amount
          2. Actions
        5. Product View component
        6. Adding ProductView to the ProductModule
        7. Product View route definition with a parameter
        8. Navigation to Product View
      5. Angular 2 forms
        1. Forms setup
        2. Template-driven forms
        3. The NgForm directive
        4. The NgModel directive
        5. Track change-state and validity with NgModel
        6. The NgModelGroup directive
        7. Model-driven forms
        8. The FormGroup directive
        9. The FormControlName directive
        10. The FormGroupName directive
        11. The FormBuilder class
        12. A FormControl directive
        13. Built-in validators
        14. Creating a custom validator
        15. Creating a custom validator directive
      6. Cart view
        1. Cart view route definition
        2. Navigation to cart view
      7. The Checkout View
        1. Checkout view route definition
        2. Navigation to Checkout View
      8. Summary
    14. 8. Advanced Components
      1. Directives
        1. Attribute directives
        2. Structural directives
        3. Components
      2. The directive lifecycle
      3. The Angular lifecycle hooks
      4. Instantiation
      5. Initialization
      6. Change detection and rendering
        1. NgZone service
        2. Change detection
        3. Immutable objects
        4. Change detection strategy
        5. Triggering change detection programmatically
      7. Content projection (only for components)
        1. Component styles
          1. Special selectors
            1. The :host pseudo-class
            2. The :host-context pseudo-class
            3. The /deep/ selector
        2. Non-view encapsulation
        3. Emulated view encapsulation
        4. Native view encapsulation
      8. After view (only for components)
      9. Parent to child communications
        1. Parent to child communication via input binding
        2. Parent to child communication via a local variable
        3. Parent-child communication via a call to ViewChild
        4. Parent-child communication via a service
      10. Destroying
      11. Summary
    15. 9. Communication and Data Persistence
      1. Client to server communication
      2. Web API
      3. REST
        1. REST response formats
        2. REST and AJAX
        3. REST API design guidelines
      4. The HttpModule
      5. The in-memory Web API
      6. The HTTP client
      7. The HTTP Promises
      8. RxJS library
      9. Observables versus promises
      10. Observables in search-by-title
      11. Introduction to Firebase
        1. Creating a Firebase project
        2. Installing Firebase CLI tools
        3. Initializing a project directory
        4. Importing data into Firebase
        5. The Firebase database rules
      12. Connecting to Firebase
        1. Installing AngularFire2 and Firebase
        2. The AngularFire2 and Firebase setup
        3. Getting categories from Firebase
        4. Getting products from Firebase
      13. Deploying the application to Firebase
      14. Summary
    16. 10. Advanced Angular Techniques
      1. Webpack
      2. Webpack migration
        1. Installing Webpack CLI
        2. Updating packages
        3. Updating TypeScript configuration
        4. Creating Webpack configuration file
        5. Updating the markup
      3. Preparing our project for production
        1. The three main entries
        2. Webpack plugins
          1. The DefinePlugin
          2. The ProvidePlugin
          3. The ProgressPlugin
          4. The LoaderOptionsPlugin
          5. The CommonsChunkPlugin
          6. The UglifyJsPlugin
          7. The extract-text-webpack-plugin
          8. The webpack-md5-hash plugin
          9. The html-webpack-plugin
        3. Loaders
        4. Loader naming conventions and search order
        5. The bootstrap-loader
        6. The css-loader
        7. The file-loader
        8. The postcss-loader
        9. The raw-loader
        10. The resolve-url-loader
        11. The sass-loader
        12. The style-loader
        13. The ts-loader
        14. The url-loader
      4. User authentication
      5. Adding authentication in the application
      6. Enabling authentication provider
      7. AngularFirebase2 authentication
        1. Authentication service
        2. The SignInComponent
        3. Angular Guards
        4. Logout in Navbar
        5. Updating the Firebase database rules
        6. Time to play
      8. The ng2-bootstrap
        1. Updating the slideshow on the welcome page
        2. Update the drop-down cart in Navbar
      9. Angular CLI
      10. Just-in-time compilation
      11. AOT compilation
      12. Summary