angular basics

tanvi-surana · Mar 16, 2017 · 502e2ea · 502e2ea
1 parent 836ddeb
commit 502e2ea
Show file tree

Hide file tree

Showing 11 changed files with 460 additions and 0 deletions.
diff --git a/addNumbers.html b/addNumbers.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+    <title></title>
+</head>
+<body ng-app="myFirstApp">
+  <div ng-controller="firstController">
+   <input ng-model="input1" type="number">
+   <input ng-model="input2" type="number">
+   {{x}}
+   <button ng-click="resultantVal()">Add</button>
+    Trying
+    {{addedVal}}
+
+</div>   
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
+    <script>
+
+        var app=angular.module('myFirstApp',[])
+
+        app.controller('firstController',function($scope){
+
+            $scope.x=1
+
+             $scope.resultantVal=function()
+            {
+                console.log("called")
+               $scope.addedVal=$scope.input1+$scope.input2
+               console.log($scope.addedVal)
+            }
+        })
+
+    </script>
+</body>
+</html>
diff --git a/angularBootstrap.html b/angularBootstrap.html
@@ -0,0 +1,40 @@
+<html>
+
+<head>   
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <title>Angular Demo</title>
+</head>      
+<body ng-app="myApp">   
+
+
+    <div ng-controller="AppCtrl">
+
+
+          <div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
+
+
+        </div>
+    </div>
+
+
+
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
+    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>   
+    <script>
+
+        var app = angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
+
+        app.controller('AppCtrl', function($scope, $http)
+        {
+            $scope.ismeridian = true; 
+            $scope.hstep = 1;
+            $scope.mstep = 15;
+        })  
+
+
+    </script>
+
+</body>
+</html>
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,51 @@
+<html>
+    <head>
+        <title></title>    
+    </head>
+    <body>
+      <div ng-app="myFirstApp">
+         <div id="numbers">
+             <div id="row123">
+                 <div ng-model="val1"></div>
+                 <div ng-model="val2"></div>
+                 <div ng-model="val3"></div>
+             </div>
+             <div id="row456">
+                 <div ng-model="val4"></div>
+                 <div ng-model="val5"></div>
+                 <div ng-model="val6"></div>
+             </div>
+             <div id="row789">
+                 <div ng-model="val7"></div>
+                 <div ng-model="val8"></div>
+                 <div ng-model="val9"></div>
+             </div>
+         </div>
+         <div id="operators">
+
+         </div>  
+      </div>
+
+
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
+    <script>
+
+        var app=angular.module('myFirstApp',[])
+
+        app.controller('firstController',function($scope){
+
+            $scope.x=1
+
+             $scope.resultantVal=function()
+            {
+                console.log("called")
+               $scope.addedVal=$scope.input1+$scope.input2
+               console.log($scope.addedVal)
+            }
+        })
+
+    </script>
+    </body>
+</html>
diff --git a/data.json b/data.json
@@ -0,0 +1,5 @@
+[
+    {"id":101, "name":"Name 1", "role":"Role 1"},
+    {"id":102, "name":"Name 2", "role":"Role 2"},
+    {"id":103, "name":"Name 3", "role":"Role 3"}            
+]
diff --git a/filter.html b/filter.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+
+    </head>
+
+
+<body>
+    <div ng-app="creatingFilter" ng-controller="firstControl">
+       {{"abc" | convertToArr}}
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
+
+    <script>
+        var app=angular.module('creatingFilter',[]);
+        app.controller('firstControl',function($scope){
+            $scope.mystr="abcdef";
+        })
+
+        app.filter('convertToArr',function()
+        {
+            return function(input)
+            {
+                return input.split('');
+            }
+        })
+    </script>
+</body>
+</html>
diff --git a/filterSearch.html b/filterSearch.html
@@ -0,0 +1,47 @@
+<html>
+<title>Angular Demo</title>
+
+    <link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"/>
+
+<body ng-app="myApp">  
+    <div ng-controller="AppCtrl">
+
+        <button ng-click="loadData()">Load</button>
+
+        <input type="text" ng-model="search.name" placeholder="Search by Name"/>
+        <input type="text" ng-model="search.role" placeholder="Search by Role"/>
+        <input type="text" ng-model="search.$" placeholder="Search Anything"/>
+        <div>
+
+            <ul ng-repeat="employee in employees | filter: search ">
+                <li>{{employee.id}}</li>
+                <li>{{employee.name | uppercase}}</li>
+                <li>{{employee.role}}</li>
+            </ul>
+
+        </div>
+    </div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
+    <script>
+        var app = angular.module('myApp', [])
+
+        app.controller('AppCtrl', function($scope, $http){
+
+            console.log($scope)
+
+            $scope.loadData = function(){
+                $http({
+                url: 'data.json',
+                method: 'GET'
+                }).then(function(res){
+                    console.log(res)
+                    $scope.employees = res.data
+                })
+            }
+
+        })  
+    </script>
+
+</body>
+</html>
diff --git a/filterThumbNail2.html b/filterThumbNail2.html
@@ -0,0 +1,75 @@
+<html>
+<title>Angular Demo</title>
+
+    <link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<body ng-app="myApp">   
+
+
+    <div ng-controller="AppCtrl">
+
+           <input type="text" ng-model="search.name" placeholder="search anything"/>
+
+<!--            <div ng-repeat="i in arr | filter: search">-->
+                <thumb-cntrl ng-repeat="i in arr | filter:search" name={{i.name}}></thumb-cntrl>      
+<!--            </div>-->
+    </div>
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
+    <script>
+
+            var app = angular.module('myApp', [])
+            app.directive('thumbCntrl',function(){
+            return{
+                restrict:'E',
+                templateUrl:'partial/thumbnail2.html',
+                replace:true, //If you don't write replace true, template is added 
+                //to panel-cntrl
+                transclude:true,//allows you to add text
+                scope:{},
+                link:function(scope,element,attrs)
+                {
+                    //jquery type
+                    console.log("In the link function");
+                    console.log(attrs.name);
+                    scope.name=attrs.name;
+                    console.log(scope)
+                    scope.test = "dsasg"
+
+                }
+            }
+        })
+        app.controller('AppCtrl', function($scope, $http)
+        {
+            $scope.arr=[
+                {name: 'Ravi'},
+                {name: 'Priya'},
+                {name: 'Amit'},
+                {name:'Priya'},
+            ];
+
+            //console.log($scope)            
+        })  
+
+
+//        app.controller('AppCtrl', function($scope, $http){
+//            
+//            console.log($scope)
+//            
+//            $scope.loadData = function(){
+//                $http({
+//                url: 'data.json',
+//                method: 'GET'
+//                }).then(function(res){
+//                    console.log(res)
+//                    $scope.arr = res.data
+//                })
+//            }
+//                    
+//        })  
+
+    </script>
+
+</body>
+</html>
diff --git a/filterThumbnail.html b/filterThumbnail.html
@@ -0,0 +1,66 @@
+<html>
+<title>Angular Demo</title>
+
+    <link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"/>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<body ng-app="myApp">            
+    <div ng-controller="AppCtrl">
+
+           <input type="text" ng-model="search.$" placeholder="search anything"/>
+
+            <div ng-repeat="i in arr | filter: search">
+                <thumb-cntrl>{{i}} </thumb-cntrl>      
+            </div>
+    </div>
+
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
+    <script>
+
+            var app = angular.module('myApp', [])
+            app.directive('thumbCntrl',function(){
+            return{
+                restrict:'E',
+                templateUrl:'partial/thumbnail.html',
+                replace:true, //If you don't write replace true, template is added 
+                //to panel-cntrl
+                transclude:true,//allows you to add text
+
+                link:function(scope,element,attrs)
+                {
+                    //jquery type
+
+                }
+            }
+        })
+        app.controller('AppCtrl', function($scope, $http)
+        {
+            $scope.arr=[];
+            $scope.arr.push("abc");
+            $scope.arr.push("def");
+            $scope.arr.push("ghi");
+            $scope.arr.push("abcdef");
+            //console.log($scope)            
+        })  
+
+
+//        app.controller('AppCtrl', function($scope, $http){
+//            
+//            console.log($scope)
+//            
+//            $scope.loadData = function(){
+//                $http({
+//                url: 'data.json',
+//                method: 'GET'
+//                }).then(function(res){
+//                    console.log(res)
+//                    $scope.arr = res.data
+//                })
+//            }
+//                    
+//        })  
+
+    </script>
+
+</body>
+</html>