More material for Angular part

jbandi · Aug 26, 2014 · d410c89 · d410c89
1 parent 11367c9
commit d410c89
Show file tree

Hide file tree

Showing 67 changed files with 25,158 additions and 9 deletions.
diff --git a/05-Angular/00-Concepts/02-SimpleController/index.html b/05-Angular/00-Concepts/02-SimpleController/index.html
@@ -4,7 +4,7 @@
     <title>Simple Angular Example</title>
     <!--<link rel="stylesheet" href="css/app.css"/>-->
 </head>
-<body ng-app ng-controller="myCtrl" >
+<body id="app" ng-app ng-controller="myCtrl" >
 
     <script src="lib/angular.min.js"></script>
     <script src="js/app.js"></script>

diff --git a/05-Angular/00-Concepts/03-SimpleModule/index.html b/05-Angular/00-Concepts/03-SimpleModule/index.html
@@ -2,12 +2,11 @@
 <html>
 <head>
     <title>Simple Angular Example</title>
-
     <link rel="stylesheet" href="css/app.css"/>
-
 </head>
-<body id="app" ng-app="myApp" ng-controller="MyCtrl">
+<body id="app" ng-app="myApp" ng-controller="MyCtrl" ng-cloak>
     {{property}}
+
 <script src="lib/angular.min.js"></script>
 <script src="js/app.js"></script>
 </body>

diff --git a/05-Angular/00-Concepts/04-TwoWayDatabinding/index.html b/05-Angular/00-Concepts/04-TwoWayDatabinding/index.html
@@ -8,8 +8,8 @@
 </head>
 <body ng-app="myApp" ng-controller="MyCtrl" ng-cloak>
 
-    <div>Quantity: <input type="text" ng-model="item.quantity"/></div>
-    <div>Price: <input type="text" ng-model="item.price"/></div>
+    <div>Quantity: <input type="number" ng-model="item.quantity"/></div>
+    <div>Price: <input type="number" ng-model="item.price"/></div>
     <div>Total Amount: {{item.getAmount()}}</div>
 
     <br/>

diff --git a/05-Angular/00-Concepts/06-MoreDirectives/index.html b/05-Angular/00-Concepts/06-MoreDirectives/index.html
@@ -12,8 +12,8 @@
 <br/>
 <div ng-repeat="product in products">
     <div>
-        <h1>{{product.name}}</h1>
-        <h2>${{product.price}}</h2>
+        <h1>{{product.name }}</h1>
+        <h2>{{product.price }}</h2>
         <p>{{product.description}}</p>
         <button>Add to Cart!</button>
         <hr/>

diff --git a/05-Angular/00-Concepts/06-MoreDirectives/js/app.js b/05-Angular/00-Concepts/06-MoreDirectives/js/app.js
@@ -6,7 +6,7 @@ myApp.controller('MyCtrl', ['$scope', function($scope) {
     $scope.products =  [
         {
             name: "Vacuum Cleaner",
-            price: 121.95,
+            price: 111.95,
             description: "It really sucks!",
             notAvailable: false,
             inStock: true

diff --git a/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/css/app.css b/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/css/app.css
@@ -0,0 +1,3 @@
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+    display: none !important;
+}
diff --git a/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/index.html b/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Angular Example</title>
+
+    <link rel="stylesheet" href="css/app.css"/>
+
+</head>
+<body>
+<div ng-app="myApp" ng-controller="FirstCtrl" ng-cloak>
+    {{property}}
+</div>
+<script src="lib/angular.min.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/js/app.js b/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/js/app.js
@@ -0,0 +1,21 @@
+var myApp = angular.module('myApp',[]);
+
+var Calculator = function(){
+    // This is a constructor function.
+    this.add = function(val1, val2) {
+
+        return val1 + val2;
+    };
+}
+
+myApp.controller('FirstCtrl', ['Calculator', '$scope', function(calculator, $scope) {
+
+    var v1 = 41;
+    var v2 = 2;
+
+    $scope.property = calculator.add(v1, v2);
+}]);
+
+myApp.service('Calculator', Calculator);
+
+
diff --git a/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/lib/angular.min.js b/05-Angular/00-Concepts/09-CustomServices/03-ServiceService/lib/angular.min.js
diff --git a/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/css/app.css b/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/css/app.css
@@ -0,0 +1,3 @@
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+    display: none !important;
+}
diff --git a/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/index.html b/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Angular Example</title>
+
+    <link rel="stylesheet" href="css/app.css"/>
+
+</head>
+<body ng-app="myApp" ng-controller="FirstCtrl" ng-cloak>
+    {{property}}
+    <script src="lib/angular.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/js/app.js b/05-Angular/00-Concepts/09-CustomServices/04-ServiceProvider/js/app.js
@@ -0,0 +1,24 @@
+var myApp = angular.module('myApp',[]);
+
+myApp.controller('FirstCtrl', ['MyService', '$scope', function(MyService, $scope) {
+    $scope.property = MyService.theNumber;
+}]);
+
+myApp.provider('MyService', function() {
+
+    var myNumber = 42;
+
+    this.setTheNumber = function(n){
+        myNumber = n;
+    };
+
+    this.$get = function(){
+        return {
+            theNumber: myNumber
+        }
+    }
+});
+
+myApp.config(['MyServiceProvider', function(myServiceProvider){
+    myServiceProvider.setTheNumber(43);
+}]);