(Reference Guide) Web Development with Bootstrap 4 and Angular 2 (Second Edition) eBook

Book Description

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.

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

Table of Contents

1: Saying Hello!

• Setting up a development environment
• A TypeScript crash course
• What are promises?
• Angular 2 concepts
• SystemJS loader and JSPM package manager
• Writing your first application
• Creating and bootstrapping an Angular component
• Integrating Bootstrap 4
• Summary

2: Working with Bootstrap Components

• Bootstrap 4
• Introduction to Sass
• Example project
• Designing layouts with grids and containers
• Using images
• Using Cards
• Using buttons
• Navs
• Navbars
• Summary

3: Advanced Bootstrap Components and Customization

• How to capture a customer's attention
• Products page layout
• Summary

4: Creating the Template

• Diving deeper into Angular 2
• Welcome page analysis
• Application structure
• Navigation component
• Template expressions
• Template statements
• Data binding
• Built-in directives
• Structural directives
• Category product component
• Summary

5: Routing

• Modern web applications
• Routing
• The router configuration
• Redirecting routes
• Router outlet
• Router links
• Product card
• Products grid component
• Router change events
• Routing strategies
• Summary

6: Dependency Injection

• What is dependency injection?
• A real-life example
• Dependency injection
• ReflectiveInjector
• The hierarchy of injectors
• Category service
• The shopping cart
• Summary

7: Working with Forms

• HTML form
• Bootstrap forms
• Formless search
• Product View
• Angular 2 forms
• Cart view
• The Checkout View
• Summary

8: Advanced Components

• Directives
• The directive lifecycle
• The Angular lifecycle hooks
• Instantiation
• Initialization
• Change detection and rendering
• Content projection (only for components)
• After view (only for components)
• Parent to child communications
• Destroying
• Summary

9: Communication and Data Persistence

• Client to server communication
• Web API
• REST
• The HttpModule
• The in-memory Web API
• The HTTP client
• The HTTP Promises
• RxJS library
• Observables versus promises
• Observables in search-by-title
• Introduction to Firebase
• Connecting to Firebase
• Deploying the application to Firebase
• Summary

10: Advanced Angular Techniques

• Webpack
• Webpack migration
• Preparing our project for production
• User authentication
• Adding authentication in the application
• Enabling authentication provider
• AngularFirebase2 authentication
• The ng2-bootstrap
• Angular CLI
• Just-in-time compilation
• AOT compilation
• Summary