AngularJS 1.0 Masterclass - Deep Dive & Understand AngularJS

Compare imperative and declarative AngularJS approaches; directives encapsulate view and behavior, enable declarative data binding, reduce boilerplate, and improve testability and separation of business logic.

Learn to structure an account module with JavaScript modules that expose a public API for deposit and withdraw while keeping balance private, using the revealing module pattern.

Discover how to create an angular module with the module function, a one stop shop for components, dependencies, and apis like provider, factory, service, value, and constant.

Explore why global variables are problematic and how to isolate code with immediately invoked function expressions and namespace patterns to prevent conflicts in multi-file JavaScript projects.

Move our first angular module to an immediately invoked function expression (IIFE) by wrapping the module and defining its name and dependencies.

Learn how to add custom data- attributes to HTML elements, access them with JavaScript, and conditionally style elements—changing backgrounds to blue when attributes like data-hif highlight are true.

Connect an AngularJS module to HTML using a custom attribute, attach it to a chosen element or the whole document, and power the page with a module.

Explore JavaScript pitfalls in adding two numbers through a DOM-dependent calculate function, and learn to decouple ui from business logic to improve testability and code clarity.

Master the mvc pattern with model, view, and controller, and see how separation of concerns keeps data, ui, and business logic loosely coupled, demonstrated with a music player and calculator.

Explore how angularjs directives turn HTML into expressive views by separating model, view, and control, using custom attributes and elements like ng-app and ng-hide to encapsulate behavior.

Build and test AngularJS 1.0 controllers that handle business logic, wire a module to a view with ng-controller, ng-model, and ng-bind, and trigger calculations via a calculate function.

Learn how to create models as plain old JavaScript objects (POJOs) inside an AngularJS controller, then bind them to the view using the controller as syntax and curly braces.

Explore dependency injection as a solution to decouple modules by supplying dependencies from outside, enabling inversion of control and reliable behavior when objects like messaging or security aren’t created internally.

Explore how dependency injection creates a $scope object in AngularJS 1.0, compare controller-as syntax with traditional $scope usage, and bind functions and data between view and controller.

Explore data binding in classical template systems with AngularJS and see how boilerplate code connects data models to DOM elements.

Learn AngularJS 1.0 data binding and two-way binding, with the model as the single source of truth updating the view automatically through directives and scope.

Apply the single responsibility principle to ensure a class handles a single task at one place; refactor a controller doing addition and subtraction by separating operations.

Explore how to encapsulate related responsibilities with services in AngularJS, apply the single responsibility principle, and move business logic such as addition and subtraction out of controllers through dependency injection.

Discover how AngularJS 1.0 filters transform data for display across views, using reusable pipes to format text, such as converting content to uppercase.

Compare imperative and declarative programming within the AngularJS MVC context, exploring directives and views, and see how declarative approaches describe what to render rather than how to render it.

Master one-way binding directives in AngularJS 1.0 by using scope and expressions to render data with dynamic updates. Learn to apply one-time binding with :: and ng-bind for performance.

Explore multiple ways to apply angularjs directives, including attribute, class, and element styles, with examples using ng-bind and naming conventions while noting browser compatibility and trade-offs.

Explore two-way binding directives in angularjs, using ng-model to bind form fields to the first contact object's properties and synchronizing model and view in real time.

Master template directives to render a collection as a table with AngularJS ng-repeat, binding each object's properties, using key-value syntax and built-in variables like $index for dynamic styling.

Explore how to abstract and switch views with AngularJS ng-include, loading partials as fragments via a dynamic source expression, and toggling between table and list views for performant, scope-driven UI.

Master the ng-switch directive to conditionally swap smaller view chunks in AngularJS 1.0, using radio buttons and a switch-like expression to control which content displays and when to render.

Explore how Angular bootstrapping processes inline binding expressions and learn to hide unprocessed content with the ng-cloak directive or by concealing the body element.

Explore how to show, hide, and remove elements in AngularJS 1.0 using ng-show, ng-hide, and ng-if, and apply toggle-based controls to display forms and lists.

Explore how angularjs element directives manage state and enhance elements by binding boolean attributes, disabling controls with ng-disabled, and safely loading images with ng-src and dynamic text via $timeout.

Explore AngularJS 1.0 style directives to dynamically apply classes and styles, using ng-class and ng-style with object, array, and string syntax to control color, bold, italic, and row colors.

Explore AngularJS 1.0 event directives to manage user interaction, using ng-click and $event to handle mouse events such as mouseover, mousedown, and mouseup directly on elements.

Master AngularJS 1.0 formatting filters by applying currency, date, and string transformations with the pipe syntax, chaining filters, and building reusable custom filters across views.

Learn to transform arrays with AngularJS filters by limiting a course collection, applying search and category filters, and sorting by name and price.

Explore automatic and manual bootstrapping of AngularJS applications, wiring modules, controllers, and directives through the injector, compiler, and scope to render dynamic views.

Organize an AngularJS 1.0 app by splitting into product and cart controllers, applying the single responsibility principle, and leveraging scope inheritance to share or isolate data.

Master the publish-subscribe scope communication in AngularJS by broadcasting events from a parent scope, listening with $on in children, and using $rootScope as a centralized event bus.

Explore controller inheritance in AngularJS 1.0, showing how the parent pattern controller and child controller share or override the name property and how VM style objects affect syncing.

Learn how parent and child controllers share methods in AngularJS 1.0, override behavior, and add items using splice to insert at a chosen index.

Learn how to bridge AngularJS and external code by using $watch and $watchCollection, then invoke $apply to run the AngularJS context from non-angular events.

Learn how to perform server-side interactions with pure JavaScript using Ajax, create a cross-browser XMLHttpRequest object, handle readyState and status, and render data.

Meet the $http service in AngularJS and load data using a success function and an error function, handle the response, convert data to JavaScript objects, and log results in console.

Sign up for the cloud database service, create a database and a collection, and add course documents to store data, preparing to load it with etcher in the next step.

Learn to implement create, read, update, and delete operations in angularjs using the mongo lab rest api and $http, including loading and saving courses.

Edit and delete courses from the list using an edit form, copy data with angular.copy, and update or delete via $http to MongoLab, then refresh the course list.

Discover the singleton design pattern in JavaScript by using a constructor with a prototype work method and a self-executing getInstance to guarantee a single instance.

Explore how to build custom services with AngularJS factories to encapsulate course operations, inject dependencies, implement a singleton service for loading courses, and handle asynchronous data loading.

Demonstrates using the AngularJS $q service to create promises from asynchronous data loads, with resolve and reject, then chaining success and error callbacks for load, add, update, delete, and navigation.

Single page applications load content on the client, caching partials for instant navigation and loading data via a service, delivering a desktop-like, fast user experience.

Explore hash-based navigation in a single-page app, linking to fragments and scrolling to content. See how to handle hashchange events with location.hash and ng-include in AngularJS 1.0 for dynamic loading.

Explore the AngularJS $location service and how it exposes and manipulates the browser URL, including hash values and absolute values, with practical in-console examples.

Plan a single page application by designing a shell page with a header, left navigation, and a container that loads partials.

Configure routes with $routeProvider to map paths to templates and controllers, set a default route to /courses, and navigate between course list and details using $location.

Use the $routeParams service to read the course id from the url and load its data for editing. Populate the form and return to the course list after update.

Learn how to build domain-specific language elements with AngularJS by creating custom directives and elements, enabling cleaner markup, data binding, and reusable components like an email app header and navigation.

Create an employee card directive in AngularJS 1.0 using a directive definition object, align camelCase names with snake_case in html, and render its template as an element, attribute, or class.

Demonstrates dynamic binding in an AngularJS 1.0 component directive by binding an employee object's name and designation to the directive using the parent scope.

Explore how AngularJS directives nest within each other, render followers with ng-repeat, bind names from employee objects, and conditionally hide empty lists with ng-if.

Extract the template from the directive definition into an external file, then replace the template property with a reference to that template, wrapping it in a panel element.

Learn how a directive's control attribute handles follow button interactions and updates the followers list, moving logic from the parent scope into the directive for encapsulated, independent behavior.

Understand how directives manage scope: inherit from the parent controller when no isolated scope is defined, or create a separate object literal for isolated scope to manage employee data.

Learn how to pass objects into an AngularJS 1.0 directive using an isolated scope and the = binding, enabling dynamic employee cards populated from the parent scope.

Pass string values to an AngularJS directive using the '@' symbol by binding a message attribute with a value like employee of the year 2015 and displaying it.

Use the ampersand binding in an oob directive to call a function on the parent scope, passing arguments as an object of key-value pairs for flexibility.

Create a custom filter in angularjs 1.0 to transform user text by removing anchor tags and links with a regex, implemented via a factory function.

Use the link function to perform DOM manipulation inside a decorator directive. Create a numbers-only text input by adding an attribute, a span message, and a key down event.

Explore how AngularJS bootstraps work from top to bottom, implement a custom directive using a factory, and see how $parse, $interpolate, and $compile drive scope bindings, parsing, and DOM compilation.

Master the compile function in AngularJS 1.0 to auto compile templates, return a link function, and manually compile and append elements within a directive.

Explore AngularJS transclusion, injecting HTML parts by reference with a directive and template, preserving and rendering child elements through the transclude mechanism.

Build a dynamic AngularJS dashboard using directives, scope, controllers, services, and partials; enable city search with vendor details and a seven-day forecast via OpenWeatherMap API using Highcharts and Bootstrap.

Analyze requirements and partition the vendor dashboard into modular features using model-view-controller (mvc) structure, models, views, controllers, services, and directives for weather forecast data and interactions.

Organize the AngularJS project by building a folder structure with app, content, vendor code, and tests, then set up index and module layouts with Bootstrap and CSS.

Create the main AngularJS app module with dependencies, build a shell page for header, footer, and navigation, and load partials through the ng-view directive using Bootstrap styling.

Build and connect modules for search, detail, and forecast in an AngularJS 1.0 app, configure routes with $routeProvider, load partials, and troubleshoot initial route rendering.

Develop the first AngularJS directive for the application to power a city search, emitting the search string and rendering a list of matching cities while a listener handles the event.

Create a reusable AngularJS 1.0 service to encapsulate the Open Map API, exposing a find by location API and populating a cities list from $http promises.

Render city data on the UI by looping cities, displaying images, names, country, and temperatures, while correcting image URLs and formatting values for clickable detail navigation.

Render city weather data by invoking a second service with the route id, handle promises with success and error callbacks, and bind results for back to search and forecast navigation.

Render data from a third service in AngularJS 1.0 by building a forecast module, handling promises, and presenting a forecast table with formatted temperature and date.

Create an AngularJS 1.0 chart directive with an isolated scope and a link function to bind forecast data and render time axis, temperature, and wind speed series with Highcharts.

Refactor by encapsulating repeated weather logic into a shared Angular service, creating reusable functions for images, flags, Kelvin conversion, and time, and apply controller inheritance to reduce duplication.