AngularJS Fundamentals and Practice | Sid Azad | Skillshare

AngularJS Fundamentals and Practice

Sid Azad, Founder at VisionHatch Technologies

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
65 Lessons (4h 57m)
    • 1. Trailer

    • 2. Introduction to the class

      3:21
    • 3. Review of Web Architecture, Web-dev History and Single Page Apps

      3:01
    • 4. Review of Web Architecture, Web-dev History and Single Page Apps contd.

      3:01
    • 5. Hello, AngularJS

      3:46
    • 6. Hello, AngularJS

      5:29
    • 7. Introducing Models, Views, Scopes and Controllers

      5:14
    • 8. Introducing Models, Views, Scopes and Controllers

      4:50
    • 9. Introducing Models, Views, Scopes and Controllers

      2:07
    • 10. Scope Hierarchies,Multiple Controllers,Controller communication: Cost Calculator

      4:47
    • 11. Scope Hierarchies,Multiple Controllers,Controller communication: Cost Calculator

      4:17
    • 12. Scope Hierarchies,Multiple Controllers,Controller communication: Cost Calculator

      6:02
    • 13. How does AngularJS play with the Browser: Bootstrapping, $digest, $compile, DI

      4:14
    • 14. How does AngularJS play with the Browser: Bootstrapping, $digest, $compile, DI

      6:04
    • 15. How does AngularJS play with the Browser: Bootstrapping, $digest, $compile, DI

      4:45
    • 16. Introduction to Directives: Reusability, Code a directive, Passing data

      6:35
    • 17. Introduction to Directives: Reusability, Code a directive, Passing data

      5:26
    • 18. Introduction to Directives: Reusability, Code a directive, Passing data

      7:34
    • 19. Understanding Scopes - I

      2:35
    • 20. Understanding Scopes - II

      3:35
    • 21. Child Scopes, scopes automatically created by directives (e.g. ng-repeat)

      6:56
    • 22. Isolated scopes, Transclusion, binding in different scopes

      4:03
    • 23. Isolated scopes, Transclusion, binding in different scopes

      6:53
    • 24. compile, link, template properties

      3:51
    • 25. Nested directives, @scope: Programming nested radio button directive

      5:56
    • 26. Nested directives, @scope: Programming nested radio button directive

      5:01
    • 27. Nested directives, @scope: Programming nested radio button directive

      5:46
    • 28. Project Description and Directory Structure

      5:03
    • 29. Project Description and Directory Structure

      3:06
    • 30. Project Setup, Third party libraries, directory structure, ng-app

      4:40
    • 31. Project Setup, Third party libraries, directory structure, ng-app

      3:56
    • 32. Project Setup, Third party libraries, directory structure, ng-app

      3:55
    • 33. Setup for an SPA: Routes with ng-route and ng-view

      5:45
    • 34. Setup for an SPA: Routes with ng-route and ng-view

      4:20
    • 35. Setup for an SPA: Routes with ng-route and ng-view

      4:46
    • 36. Bootstrap CSS and Introduction to AngularJS Services

      4:53
    • 37. Bootstrap CSS and Introduction to AngularJS Services

      3:55
    • 38. Writing an authentication service, Using LocalStorage with AngularJS

      8:03
    • 39. Using templates with ng-include: Logging out

      4:08
    • 40. Using templates with ng-include: Logging out

      5:49
    • 41. Controller-Directive Communication: Projects Pane Directive

      5:58
    • 42. Controller-Directive Communication: Projects Pane Directive

      6:01
    • 43. Separation of Responsibilities in AngularJS, '&' scope

      5:04
    • 44. Separation of Responsibilities in AngularJS, '&' scope

      4:01
    • 45. Separation of Responsibilities in AngularJS, '&' scope

      4:30
    • 46. Create the project pane directive to add new projects

      4:39
    • 47. Projects Pane Directive: Adding new projects

      5:08
    • 48. Projects Pane Directive: Adding new projects

      1:38
    • 49. Projects Pane Directive: Adding new projects

      3:51
    • 50. Communicating between directives, ng-click, ng-if: Project Details Directive

      5:35
    • 51. Communicating between directives, ng-click, ng-if: Project Details Directive

      4:52
    • 52. $http: Writing the Weather Service, promises

      4:33
    • 53. $http: Writing the Weather Service, promises

      5:26
    • 54. CSS using ng-class and Searching with AngularJS ‘filter’

      2:40
    • 55. CSS using ng-class and Searching with AngularJS ‘filter’

      4:19
    • 56. CSS using ng-class and Searching with AngularJS ‘filter’

      3:29
    • 57. CSS using ng-class and Searching with AngularJS ‘filter’

      4:06
    • 58. Angular UI Bootstrap Library

      4:30
    • 59. CSS using ng-class and Searching with AngularJS ‘filter’

      2:30
    • 60. Unit Testing using Karma, Jasmine, angular-mock.js

      5:02
    • 61. Unit Testing using Karma, Jasmine, angular-mock.js

      4:53
    • 62. Write unit tests with Karma and Jasmine

      4:36
    • 63. Unit Testing using Karma, Jasmine, angular-mock.js

      1:56
    • 64. Conclusion and Review

      5:30
    • 65. Conclusion and Review - 3rd Party tools and plugins

      4:53

Project Description

Dynamic Task/ToDo List Single Page App

Introduction

  1. Review Web Fundamentals

    Review Web Fundamentals

Review of Web Architecture, Web-dev History and Single Page Apps

  1. Review Web Architecture

    Review Web Architecture using the slides in the video.

Hello, AngularJS

  1. Write the Hello World application in JavaScript and AngularJS

    Write the Hello World application in JavaScript and AngularJS and contrast with a pure javascript app.

Introducing Models, Views, Scopes and Controllers

  1. Read slides and Angular Documentation to understand angular internals

    Read slides and Angular Documentation to understand angular internals

Scope Hierarchies,Multiple Controllers,Controller communication: Cost Calculator

  1. Build a fruit cost calculator using AngularJS

    Build a fruit cost calculator app to understand angular scopes, directives

How does AngularJS play with the Browser: Bootstrapping, $digest, $compile, DI

  1. Read AngularJS Internals from the slideshow and angularjs.org

    Read AngularJS Internals from the slideshow and angularjs.org

Introduction to Directives: Reusability, Code a directive, Passing data

  1. Create an AngularJS Directive

Advanced Scopes

  1. Use the given example to understand scopes

Child Scopes, scopes automatically created by directives (e.g. ng-repeat)

  1. Change various parameters of the directives example to experiment

Directives - 2: compile, link, template properties

  1. Go through the AngularJS documentation to understand compile, link

    This is in preparation for the next step of creating an interactive directive.

Nested directives, @scope: Programming nested radio button directive

  1. Follow the plnkr to build the nested directive

Project Description and Directory Structure

Project Setup, Third party libraries, directory structure, ng-app

Setup for an SPA: Routes with ng-route and ng-view

  1. Create directories for the app and setup the initial layout

Building the Landing Page

  1. Continue the project after studying the Bootstrap widgets

Landing Page continued

  1. Create the Landing Page

Creating the Dashboard Page

  1. Build the dashboard and logout

Creating the Projects Pane Directive

Decoupling Directive/Controller, Callbacks: Writing the Projects Pane Directive

  1. Review methods to decouple directives and controllers

Projects Pane Directive: Adding new projects

  1. Create the project pane directive to add new projects

    Create the project pane directive to add new projects

Communicating between directives, ng-click, ng-if: Project Details Directive

$http: Writing the Weather Service, promises

  1. Use $http to write the WeatherSvc

CSS using ng-class and Searching with AngularJS ‘filter’

  1. Use AngularJS Filters to filter text in the projects pane

CSS using ng-class and Searching with AngularJS ‘filter’

  1. Add CSS using the ng-class built-in directive

CSS using ng-class and Searching with AngularJS ‘filter’ contd.

Unit Testing using Karma, Jasmine, angular-mock.js

  1. Review the documentation on Karma and Jasmine
  2. Write unit tests with Karma and Jasmine

Unit Testing using Karma, Jasmine, angular-mock.js contd.

  1. Write more test cases with Karma and Jasmine

Conclusion and Review

  1. Review course concepts and go over tools and plugins

    Review course concepts and go over tools and plugins

Student Projects