diff --git a/images/Thumbs.db b/images/Thumbs.db new file mode 100644 index 0000000..504e418 Binary files /dev/null and b/images/Thumbs.db differ diff --git a/images/Two_Way_Data_Binding.png b/images/Two_Way_Data_Binding.png new file mode 100644 index 0000000..3a9c6d1 Binary files /dev/null and b/images/Two_Way_Data_Binding.png differ diff --git a/images/concepts-databinding1.png b/images/concepts-databinding1.png new file mode 100644 index 0000000..87b7ffd Binary files /dev/null and b/images/concepts-databinding1.png differ diff --git a/images/concepts-databinding2.png b/images/concepts-databinding2.png new file mode 100644 index 0000000..be8cbaf Binary files /dev/null and b/images/concepts-databinding2.png differ diff --git a/images/concepts-scope.png b/images/concepts-scope.png new file mode 100644 index 0000000..298cabf Binary files /dev/null and b/images/concepts-scope.png differ diff --git a/index.html b/index.html index 9d73789..e1e7df0 100644 --- a/index.html +++ b/index.html @@ -36,14 +36,17 @@
+ +

Angular JS

HTML Enhanced Web Apps

- Created by - Vinayak Patil + Authored by - Vinayak Patil

+

Heads Up

@@ -51,6 +54,7 @@

Heads Up
+

SPA - Single Page Applications

@@ -60,7 +64,7 @@

SPA - Single Page Applications

-

Advantages ?

+

Advantages?

  • Makes your app as ‘snappy’ as a native app.
  • Reduces load on server.
    • @@ -69,13 +73,14 @@

    Advantages ?

-

Disadvantage ?

+

Disadvantage?

  • Relies entirely on JavaScript.
+

Course Structure

+ +
+

Course Prerequisites

+ +
+ +

Agenda: For Beginners

@@ -107,8 +126,7 @@

Why AngularJS?

-

MVC done right

- MVC done right +

It's a modular Framework

@@ -117,13 +135,10 @@

Write less code

Teaches new HTML tricks

-

Dependency Injection

- -
@@ -147,7 +162,7 @@

Unit Testing Ready

-
+ +
-->

Controllers and Scope

+ + + +
+

Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope

+
+ +
-

Using Angular Controllers, we are able to map a section of html to a AngularJS Scope

+

Contoller Registration


-<div ng-controller="MainCtrl">
-  ...
-</div>
-<script>
-  function MainCtrl($scope) {
+var myApp = angular.module('myApp',[]);
+
+myApp.controller('GreetingController', ['$scope', function($scope) {
+  $scope.greeting = 'Hola!';
+}]);
+
+
- } -</script> +
+

Controller Instantiation

+ 

+<div ng-controller="GreetingController">
+  {{ greeting }}
+</div>
+
+ + + +
+

Scope is the glue between application controller and the view

+ + Angular Components +
+
-

Controller is used to augment scope object

- +

Scope Hierarchy

+ + Scope Hierarchy +
+

We can create a child scope in 3 ways

    -
  • Scope is an object in memory
    • -
  • Scope can be nested
    • -
  • We can create a child scope in 3 ways -
      -
    • Child scope uses same scope as parent
      • -
    • Child scope inherits from parent scope
      • -
    • Child scope is isolated from parent
      • -
    -
    • +
  • Child scope uses same scope as parent
    • +
  • Child scope inherits from parent scope
    • +
  • Child scope is isolated from parent
+ +
+

Scope Events Propagation

+ 

+angular.module('eventExample', [])
+.controller('EventController', ['$scope', function($scope) {
+  $scope.count = 0;
+  $scope.$on('MyEvent', function() {
+    $scope.count++;
+  });
+}]);                 
+
+

The event can be broadcasted ($broadcast) to the scope children or emitted ($emit) to scope parents.

+
+ +
+

Two way data-binding

+ + Two_Way_Data_Binding + +
+ +
+

DEMO

+
+