Build Enterprise Applications with Angular 2 (and Angular 4)

Extend your Angular app's Firebase integration by performing complex queries: join data across multiple nodes, sort and filter results with limits, return from Firebase, and update multiple nodes.

Build an enterprise-style data model with restaurants, cuisines, and features, showing address and city fields, one-to-many relations, and using IDs to join data across a JSON database.

Join restaurant data with its cuisine type in Firebase using Angular by mapping the restaurant list to a cuisine observable and rendering with async pipe, while noting client-side caching.

Apply the technique of joining data across multiple objects by creating multiple nested observables for each restaurant feature and rendering them with the async pipe.

Check the existence of an object with angular fire database, render conditionally using async pipe and Elvis operator, and ensure it runs only once with the take operator on observables.

Explore Firebase sorting methods—order by key, value, and child (including grandchild) with practical examples. Sorting is single-property only, despite real-time performance, and you’ll cover filtering data next.

Explore firebase filtering by ordering by a property, using equal to and start/end at bounds, and why multi-property filters push work to the server; learn data structures for quick reads.

Learn to create Firebase indexes to optimize queries by rating or city, define dot index on properties, publish changes, and control the number of results returned.

Use limit to first or limit to last to return a subset, such as the first 50 restaurants with a five-star rating.

Learn to perform atomic, multi-location updates in Firebase by pushing a new restaurant, grabbing its key, and updating both restaurants and restaurants by city Camberwell in a single update object.

Implement authentication and authorization using Firebase as your backend for enterprise apps built with Angular. Explore how to set up secure access and permissions with Firebase.

Explore the difference between authentication and authorization, and implement Facebook login and email/password authentication in an Angular app using Firebase, with guidance on provider options.

Set up a Facebook app to get an app ID and secret, configure the OAuth redirect URL in Firebase, and implement login and logout in AngularFire with the Facebook provider.

Subscribe to the authentication state observable to track the current user, showing their display name and photo after login via providers like Facebook, Google, or email.

Learn to request additional Facebook permissions in an Angular app, use popup login with a scope, obtain an access token, and fetch data via the Graph API.

Learn to call the Facebook Graph API from an Angular app, request fields such as first name, last name, and gender, and sync data to Firebase.

Understand how user profiles store attributes like age, location, and role separate from authentication. Learn to manage registered users in Firebase authentication with reset, disable, and delete actions.

Enable email and password authentication in Firebase, register users with createUser, log in with credentials, handle promises and errors, verify emails, customize email templates, and store user profiles.

Apply authorization concepts after authentication by using Firebase security rules to control who can read and write database nodes, and guard routes on the client with Angular router.

Apply Firebase security rules to grant read and write access for authenticated users, test with the simulator, and manage cascading rules across root and per-user nodes using a $uid.

Explore adding authentication and authorization with Auth0 across Firebase alternatives and other back-end infrastructures for enterprise apps.

Describe how angular apps implement stateless authentication using JSON web tokens to access protected server APIs over https, with tokens stored in local storage and sent in headers.

Learn the structure of a json web token, including header, payload with user info and roles, and signature, secured by base64 and a server secret for authentication and authorization.

Learn how to add authentication quickly with Auth0, avoiding token infrastructure. Create a free client for a single-page Angular 2 app and follow the quick start to integrate authentication.

Create an angular authentication service that encapsulates login, isAuthenticated, and logout with auth0 lock and angular2-jwt, and register it as a provider in the app module.

Use an authentication service in an Angular app by injecting it, and toggle login/logout with isAuthenticated. Configure Google and Facebook login, set redirect origins, and inspect JWT in local storage.

Retrieve the user's profile from the authentication service using the ID token, then store it in local storage as a JSON string and expose it to components.

Update the user profile with extra attributes using a patch request to the API. Pass the JWT in the header and include user_metadata such as location to show partial updates.

Learn to add a location signup field with a placeholder where do you live, a validator function, and a minimum five character rule with an error message.

Enable API authorization and create a unique API identity. Implement middleware to verify JSON web tokens, configure audience and issuer, and test secured endpoints using Postman and Angular.

Enable cross-origin resource sharing in the node server to let an Angular app on a different port call secured APIs, using RS256 tokens and a shared audience.

Explore the fundamentals of building mobile apps with Ionic and Angular, learn Ionic architecture, deploy to Android and iOS, and explore common Ionic components to build and deploy simple apps.

Explore Ionic, a free, open source framework for building mobile apps with HTML, Angular and TypeScript. Create hybrid apps with native features via Cordova using one codebase for multiple platforms.

Install Ionic and Cordova, create a blank Ionic project with Angular 2, start a development server with live reload, and explore the source structure including app, home, assets, and theme.

Deploy your ionic app to an android device by generating a standard android project from the platform and running it through android studio or ionic run android with live reload.

Discover how to deploy an Angular app to an iPhone using a Mac and Xcode, sign for real-device testing, or deploy to iOS simulators with ionic run ios -l.

Explore the Ionic components in the Ionic framework v2, including action sheets, alerts, badges, and more, review basic usage, and explore the demos of all 28 components.

Learn to add and customize ionic lists with ion-list and ion-item, including basic, inset, and dividers, and render items from an array or firebase using an observable and async pipe.

Add item details page with a component and template, reuse the home layout, and register it in the module with declarations and an entry component for dynamic rendering and navigation.

Navigate from the home list to the item details page by pushing the selected item with the Ionic nav controller and passing it as data.

Replace navigation with a modal box, using ionic angular modal controller to create and present dialogs. Add cancel and done buttons and dismiss the modal with view controller.

Learn to replace labels with icons using iron icons from the Ionic documentation, choosing from over 700 icons, and apply platform-specific icons with explicit iOS and Android syntax.

Learn to implement input fields in Ionic apps using ion list, items, labels, and NgModel bindings, with objects to share data between the home and item details components.

Discover how to add an Ionic button, apply a round look with color options like primary, and center it on the page using text center utilities.

Explore Cordova plug-ins with Ionic and Angular to access native features like app version, camera, geolocation, and Google Maps, then learn theming and customizing icons and splash screens.

Explore the Ionic platform service to detect the environment, wait for platform readiness, and run cordova-specific code when available; use Platform.is to target Android, iOS, and portrait or landscape mode.

Explore how ionic plugins access native functionality through a JavaScript API, with platform-specific implementations and a config.xml workflow that manages plugin installation.

Learn to use the app version plugin from Ionic Native to get the version number, version code, and package name after platform.ready in an Ionic app.

Explore integrating the contacts plugin in Ionic apps, including privacy descriptions for iOS, plugin installation, and fetching/displaying contacts with a find method.

Learn to access the photo library via the Ionic camera plugin, configure usage descriptions in config.xml, and handle base64 image data with camera options and source type.

Learn to use the Ionic geolocation plugin to obtain the current position and latitude/longitude via a promise, handle permission prompts, and add a native Google map to show nearby stores.

Learn to add a Google Maps plugin to an Angular app by obtaining Android and iOS API keys, configuring credentials in Google Console, and initializing the map with styles.

Learn to theme Ionic apps with Sass variables, declaring and overriding colors across components, and understand platform globals for iOS, Android material design, and Windows.

Override ionic sass variables to customize theming across iOS, Android, and Windows, by copying defaults and redefining them in the variables file, with emphasis on components and dark mode.

Learn how to apply custom CSS in an Ionic/Angular app by overriding Ionic variables and global styles, plus platform-specific selectors for font sizes and material design.

Create per-page styles by adding a style file and scoping it with page-home selector, so styles apply only to that page and set up updating the icon and splash screen.

Customize your Ionic app's icon and splash screen by replacing the resources icon.png and splash.png, then run Ionic resources to generate high-resolution assets for all devices.

Explore integrating Angular on the client and server with Angular Universal, uncovering architecture, setup, server-side rendering for seo, third-party libraries, a complex form, and authentication and deployment.

Explore the high-level architecture of Angular front-end with a back-end core or MVC, contrasting multipage server-rendered flows with modern single-page apps and client-side routing.

Install Natcore, Node, and npm; scaffold an aspnet Natcore spa with Angular 2 using Yeoman; restore dependencies, run locally, and explore client routing with server-side data APIs.

Explore the project structure of an angular 2/4 enterprise app, including client app with components, server side rendering setup via Bhuti server, and deployment artifacts like dist and vendor.

Demonstrate server-side rendering using angular universal by rendering the weather forecast page on the server, improving search engine optimization, reducing flicker, and enabling reliable social previews.

Explore how hosting environments (development, staging, and production) shape the Angular app and its bundles. Learn to switch to development for automatic webpack rebuilds and hot module replacement.

Discover how to add third-party libraries to an angular project using npm, install type definitions for underscore, and separate vendor and main bundles to optimize bundle size and load times.

Explore a real-world angular form that talks to an API to register a patient with name, address, and medications, plus server-side validation and a JSON representation.

Implement server-side patient models with required fields and initialized collections, scaffold a controller with CRUD actions, validate input in a post action, enable camel case JSON, and test with Postman.

Learn client-side implementation in angular by building a form group with validation and remote server errors, using a patient service to post data and manage a medications array.

Implement Angular-based authentication by validating credentials via a server API, issuing a JSON web token, storing it in local storage, and sending it in a bearer authorization header.

Learn deployment of enterprise apps by packaging assemblies, views, config files, and client bundles with embedded templates, then publish via Visual Studio or dotnet publish.

Discover how Angular change detection keeps views in sync with models, explore immutability and unpunched change detection strategy, and profile performance with Chrome tools for data and complex views.

Angular uses zone to run async code and trigger change detection. A tree of components has dedicated change detectors that update the DOM when state changes occur.

Explore how change detection runs in an Angular app by implementing DoCheck across components, triggering checks on clicks and input events, and learning performance optimization strategies.

Explore Angular change detection strategies, from the default strategy that checks all binding expressions to the unposed strategy for complex views, with a note on immutability.

Explain the difference between value types and reference types in JavaScript, highlighting immutability and copying by value, and how references affect mutation and memory.

Explore how the default change detection strategy checks all binding expressions, comparing old and new state for value and reference inputs, with profiling guiding an on push optimization for performance.

Learn how the OnPush change detection strategy limits checks to component inputs, ignores subtrees, and boosts performance by treating inputs as immutable and updating with new object copies.

Explore immutable.js objects, including maps and lists, in an Angular app, learn to read and set properties with get and set, and apply the unposed strategy to optimize performance.

Profile a performance bottleneck in an Angular app, identify slow change detection on a 10,000-movie list, and apply on-push with immutable data to speed updates.

Explore Redux in Angular apps, learn when to use it and why, and implement it in an existing Angular app, while mastering Redux Dev Tools and enterprise-grade best practices.

Redux provides a lightweight state management library for medium to large single-page apps, keeping data in sync across independent views without parent-child relationships.

Explore Redux’s three building blocks: the store, actions, and reducers. See how the store holds app state, actions trigger events, and reducers, as pure functions, return new state without mutation.

Explore pure functions that produce the same output for identical inputs, avoid mutating arguments or side effects, and apply them in Redux reducers for reliable testing, undo, and time travel.

Install Redux in an Angular app, compare the two common implementations, and scaffold a minimal store with a root reducer and initial store, wired through the Angular Redux module.

Learn to implement redux-style actions to increment a counter by dispatching to the store, update the reducer to return a new immutable state, and manage the initial state.

Learn to read and display store state in Angular with the select decorator and async pipe, using path or function selectors to expose counter and messaging properties.

Use object.assign to copy the state and apply mutations without mutating the original, enforce the store shape with a TypeScript interface, and consider immutable alternatives.

Learn to prevent accidental mutations by converting plain state to an immutable map with immutable.js, using set and get to update and access properties, and test reducers.

Practice implementing redux-based state management in a two-component to-do app, where adding, toggling, or removing items updates the list and dashboard, showing the last update time and total items.

Configure Redux DevTools in an Angular app, enabling time travel debugging and action-by-action state inspection, with development mode enhancers and the ability to save and reload state.

Learn to integrate a server with an Angular app using Redux concepts: dispatch actions, reducers manage client state, handle loading and errors, compare optimistic versus pessimistic updates; avoid action creators.

Refactor fat case statements by extracting code blocks into an internal function, improving readability of the root reducer. Preview a class-based approach that encapsulates state and action to reduce repetition.

Refactor fat switch blocks by breaking a large application into tasking and messaging modules, define tasking initial state and producers, and combine reducers into a root reducer for scalable state.

Learn how to write automated tests for Angular apps from scratch, exploring benefits, when to use testing, types, pros and cons, mechanics, real-world patterns, test coverage, and practical exercises.

Explore how automated testing uses code to test code, enabling faster verification than manual testing, catching defects before production, and a pragmatic balance between test driven development and production code.

Explore unit tests, integration tests, and end-to-end tests, learning how each tests a component in isolation, with templates, and as a full application, including trade-offs.

Learn unit testing fundamentals by treating tests as first-class citizens, writing small, single-responsibility tests (under 10 lines) that test one thing, with descriptive names, using Jasmine and Karma.

Explore testing strings and arrays by validating output contains a name and by checking that arrays include currencies without relying on exact order.

Explore testing angular components with the vote component, focusing on the state change pattern, isolation via before each, and the arrange act assert pattern (setup and teardown).

Create and validate a form in Angular using the form builder to build a form group with name and email controls, verify initial state and test required validator on name.

Learn how an Angular vote component emits a vote change event with total votes, using event emitters and observables, then test the emitted data by subscribing to the event.

Learn how to unit test an Angular component by replacing a real service with a fake that returns an observable, using spyOn to verify the component initializes its properties.

Test that the component calls the server to save changes for a new to-do item, and handle success by updating the list or error by setting a message.

Learn to implement and test a confirmation box for deleting items in an angular app, using spies to simulate user confirmation and verify server calls with an observable.

Identify the limitations of unit tests for components with a router, and learn to use an Angular environment to test bindings, button interactions, and the router spy.

Explore how to measure code coverage in Angular tests, read coverage reports, and prioritize tests for critical logic to maintain meaningful test coverage within project constraints.