AngularJS 1.0 Masterclass - Deep Dive & Understand AngularJS

Understand Core Concepts, Create Custom Directives, Custom Services, Routing and Hands On Using Modularized Approach.

Created bySandip Gautam

Last updated 7/2020

English

What you'll learn

Create Medium to Complex Web Applications Using AngularJS
No Faffing, All Lectures are Packed with Information
You will have understanding of All the Core Concepts of AngularJS
You will know why angularjs is so popular and why you should start using it
Dont just learn Angularjs But understand it with JavaScript, HTML, Design Pattern and Clean Code concept
You will know mostly used directives and filters of AngularJS
You will know how Dependency Injection, two way data binding, scope to scope communication works
You will know when to use $apply and $watch methods of scope
You will know how to handle business logic in controller and how controller inheritance works
You will know how to use AngularJS built in services and how to create your own services to encapsulate single responsibilities or business logic
Server side interaction using Mongo Lab API and how to use promises
You will know how to Create Single Page Applications
You will know how to Create Custom Directives & Filters
Awesome discounts on all of my upcoming courses
Get Hands on By Creating An Application Using Modularized Approach
Complimentary Contents for Free

Course content

10 sections • 85 lectures • 6h 4m total length

Whats Inside This Course5:10
What You Should Know, Before Taking This Course0:31
How to Take This Course1:01
Softwares To Be Installed0:51
Course Material - All Source Code0:04

JavaScript Specials: Modules Can Help You Remain Organized6:37
Angular Modules: One Stop Shop for All the Components7:43
JavaScript Specials: IIFE4:38
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.
Moving our First Module to IIFE2:10
HTML Specials: Now you can decorate me with Custom Attributes2:52
Connecting Module and HTML: I am Peter Parker, I wanna be a Spiderman2:46
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.
JavaScript Specials: Problems with addition of two numbers in JavaScript5:01
Design Pattern Specials: MVC can make your weekend more enjoyable5:18
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.
Directives: I am HTML, I am good at Presentations6:34
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.
Controllers: I am JavaScript, I can Handle the Business Logic9:01
Models: Not so Old, We are POJO2:56
Pattern Specials: Dependency Injection can help reduce your emotional attachment6:31
My Name is $scope and I have been Gifted to Controller by the Secret Santa3:25
JavaScript Specials: Data Binding in Classical Template Systems2:58
Explore data binding in classical template systems with AngularJS and see how boilerplate code connects data models to DOM elements.
Angular Data Binding: Continous Updates, Model is a Single Source of Truth2:35
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.
Pattern Specials: SRP to handle one task at one place2:22
Services: What can I do for you Sir!4:47
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.
Filters: Please give me data and not the WATER2:05
AngularJS Core Concepts

Programming Specials: Imperative vs. Declarative2:52
Binding Directives: One Way Binding Directives8:07
AngularJS Specials: Multiple ways of applying Directives1:54
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.
Binding Directives: Two Way Binding Directives3:14
Template Directives: Give me Collection, I will give you Table7:04
Template Directives: Views Abstraction using ng-include Directive5:46
Template Directives: Switching Elements using ng-switch Directive4:08
Template Directives: Hiding Unprocessed Inline Template Binding Expressions1:56
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.
Element Directives: Showing, Hiding and Conditionally Removing Elements4:48
Element Directives: Manage State & Enhance Elements6:02
Style Directives: Manage Classes & CSS6:51
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.
Events Directives: Manage User Interaction2:16
Formatting Filters5:49
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.
Array Transforming Filters9:19

AJAX Specials: Server Side Interaction Using Pure JavaScript3:24
Meet $http Service3:29
MongoLab Specials: Creating a Database and Tables4:03
CRUD Using $http and MongoLab - Part 17:45
CRUD Using $http and MongoLab - Part 23:51
Design Pattern Specials: The Singleton Design Pattern3:19
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.
Custom Services to Encapsulate Responsibilities4:23
$q Service: Promises Are Made to be Kept5:41

Single Page Applications, What are They and Why We Need Them2:21
SPA Specials: Story of HASH & Your Own Mini-SPA4:32
$location Service: Knows Everything About Browser URL1:48
Planning The Shell and Partials of The Application3:16
$routeProvider Service: Configuring The Routes and Controllers5:20
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.
$routeParams Service: Getting Passed Information From URL3:57

Domain Specific Language: Your Own Custom Elements1:58
Component Directive4:39
Component Directive: Dynamic Binding Using Parent Scope1:20
Component Directive: Directives Can Have Other Directives As Well1:35
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.
Component Directive: Taking Template Out of Directive Definition2:04
Component Directive: Handling User Interaction in Directives Controller3:26
The Misunderstood Concept of Directives Scope Made Understood4:18
OOB Directive: Use "=" Symbol to Pass Objects3:41
OOB Directive: Use "@" Symbol to Pass String Values1:18
OOB Directive: Use "&" Symbol to Call the Function on Parent Scope4:52
Custom Filter - Because We Need Our Own Data Transformation1:40

The Requirement4:39
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.
Analysis & Design5:23
Folder Structure2:41
Application Layout - 1013:47
Application Layout - 1027:37
First Directive of Application4:10
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.
First Service of Application4:05
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 Data Using First Service3:10
Render Data Using Second Service6:08
Render Data Using Third Service4:17
The Chart Directive6:14
Code Refactoring7:44

Requirements

Basic knowledge of HTML, CSS and Javascript
How to use a text editor
Basic knowledge of programming

Description

[COURSE UPDATED on 30 April 2015]

Why AngularJS?

AngularJS is the most popular JavaScript framework out there in the market backed by Google. AngularJS helps you in creating complex web applications in less time. It's gonna add value to your resume and even help in getting good salary job.

Why You Should Take This Course?

This course is gonna help you make complex web application in AngularJS. This course will not only help you learn AngularJS, but to understand it, as it covers lot of JavaScript, HTML, Clean Coding, Design Pattern concepts, which you should understand to know better about AngularJS. This course uses AngularJS Version 1.3.

What's Inside This Course?

Why You Should Know AngularJS?
AngularJS Core Concepts along with JavaScript, HTML, Design Patterns & Clean Code Concepts.
Using Directives & Filters to Make Views
How to Keep Data in Scope & Business Logic in Controllers
AngularJS Built in Services Which Includes Server Side Interaction Using Mongo Lab API & Creating Your Own Custom Services
Create Single Page Application Using Routing
Create Custom Directives & Custom Filters
Hands on With Practical Application
And More Contents to Come…

Exercise Files:

This course contains all the exercise files, divided into two folders, one as starting folder and other one as completed folder.

Who this course is for:

Anyone who is in Web Development profile
Web Site Designers can also add value to there resume
Developer knowing jQuery, Backbone or Ember can also get benefits

AngularJS 1.0 Masterclass - Deep Dive & Understand AngularJS

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 8min

Why AngularJS1 lecture • 5min

AngularJS Core Concepts: Get Your ToolBox Filled with Tools18 lectures • 1hr 20min

Directives & Filters for Presentation14 lectures • 1hr 10min

Scope for Data and Controllers for Business Logic6 lectures • 35min

AngularJS Services & Custom Services to Encapsulate Responsibilities8 lectures • 36min

Single Page Applications6 lectures • 21min

Presentation using Custom Directives & Custom Filters11 lectures • 31min

Presentation using Custom Directives - 1024 lectures • 18min

Hands On - Lets Make an App Using Modularized Approach12 lectures • 1hr

Requirements

Description

Who this course is for: