Scribd Logo
Upload

Welcome to Scribd!

  • Class25 angularJS

    Uploaded by

    Komal Shikha
    12 views16 pages

    Original Title

    class25 angularJS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views16 pages

    Class25 angularJS

    Uploaded by

    Komal Shikha

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Class – 25

    Date : 04-12-2020
    scope
    • It is pre define Java Script object.
    • It is a binding part between HTML and Java Script
    • When we make controller in AngularJS we pass the $scope as a argument, it
    is can't be use without controller.
    • When you adding properties or variable to scope object the HTML gets
    access to the properties.
    • View : Which is the HTML part.
    • Model : Data available for current view.

    • Which is Java Script function that makes / changes / removes / control the data.
    p13.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>AngularJS</title>
    <script src="js/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="myapp" ng-controller="demo">
    {{nm}}
    <p ng-bind="nm">nm</p> <!-- when we not want to use {{}} than we use ng-bind. -->
    </div>

    </body>
    <script>
    var app=angular.module("myapp",[]);
    app.controller("demo",function($scope)
    {
    $scope.nm="Rishikesh";
    });
    </script>
    </html>
    p14.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>AngularJS</title>
    <script src="js/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="myapp" ng-controller="demo">
    <ul>
    <li ng-repeat="val in nm"> {{val}} </li>

    </ul>
    </div>

    </body>
    <script>
    var app=angular.module("myapp",[]);
    app.controller("demo",function($scope)
    {
    $scope.nm=["Rishikesh","Kumar"];
    });
    </script>
    </html>
    custom16.js p16.html
    var mymode = angular.module("test", []); <!DOCTYPE html>
    <html ng-app="test">
    mymode.controller("mycontroller", function($scope) <head>
    { <title>Angular JS Test</title>
    $scope.city = ["Delhi","Mumbai"]; <script src="js/angular.min.js"></script>
    }); <script src="js/custom16.js"></script>
    </head>

    <body>
    <div ng-controller="mycontroller">
    <ol>
    <li ng-repeat="ss in city">{{ss}}</li>
    </ol>
    Output
    </div>
    </body>
    1.Delhi
    </html>
    2.Mumbai
    rootScope
    • rootScope is used anywhere in the HTML or view without create controller.
    <!DOCTYPE html>
    <html>
    <head>
    <title>AngularJS</title>
    <script src="js/angular.min.js"></script>

    <script>
    var app=angular.module("myapp",[]);
    app.run(function($rootScope)
    {
    $rootScope.val="Red";
    });
    app.controller("demo",function($scope)
    {
    $scope.val="Green";
    });
    </script>
    </head>
    <body>
    <div ng-app="myapp">
    <ul>
    <li ng-controller="demo"> Value of root scope : {{val}} </li>

    <li> Value of root scope : {{val}} </li>

    </ul>
    </div>

    </body>
    </html>
    custom17.js
    var mymode = angular.module("test", []);

    mymode.controller("mycontroller", function($scope)
    {
    $scope.fnm = "Rishi";
    $scope.lnm = "Kr";

    });
    mymode.run(function($rootScope)
    {
    $rootScope.fnm = "Hello Rishi Outer from root scope";
    $rootScope.hello=function()
    {
    return $rootScope.fnm + "This variable calling with the help of function";
    }
    });
    P17.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script src="js/custom17.js"></script>
    </head>

    <body>
    <div ng-controller="mycontroller">
    <input type="text" ng-model="fnm">
    <input type="text" ng-model="lnm">
    <br>
    First Name : {{ fnm }}
    <br>
    Last Name : {{ lnm }}
    </div>
    <p>{{ fnm }}</p> <!-- print value outside the controller -->
    <p>{{ hello() }}</p> <!-- print value through function outside the controller -->
    </body>
    </html>
    Custom Directive Tag in AngularJS
    Create own tag for html.

    custom18.js
    var mymode = angular.module("test", []);

    mymode.directive("rishiKumar",function (){
    //for rishi-kumar we use rishiKumar for hyphan we use capital letter without space
    var ht="This is custom Tag"
    return {template : ht}; //template means this tag used in HTML
    });

    mymode.directive(“menu",function ()
    {
    var dropdown = "<select ng-model='city'>";
    dropdown += "<option>Delhi</option>";
    dropdown += "<option>Mumbai</option>";
    dropdown += "<option>Patna</option>";

    return { template : dropdown};


    });
    p18.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script src="js/custom18.js"></script>
    </head>

    <body>
    <rishi-kumar></rishi-kumar>
    <menu></menu> <!-- we can call directly through menu -->
    <div menu></div> <!-- or we can call in div tag -->
    </body>
    </html>
    filter in angularJS
    Print in lowercase [ filter in angularJS]

    P19.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script src="js/custom.js"></script>
    </head>

    <body>
    <div>
    <input type="text" ng-model="str"> <br>
    String : {{str | lowercase}}
    </div>
    </body>
    </html>
    Print in upper case [ filter in angularJS]

    P20.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script src="js/custom.js"></script>
    </head>

    <body>
    <div>
    <input type="text" ng-model="str"> <br>
    String : {{str | uppercase}}
    </div>
    </body>
    </html>
    Print in Currency [ filter in angularJS]

    p21.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script src="js/custom.js"></script>
    </head>

    <body>
    <div>
    <input type="text" ng-model="money"> <br>
    Currency : {{money | currency }}
    <br>
    Currency : {{money | currency : "INR" : 4}}
    </div>
    </body>
    </html>
    Print in Sorted Order [ filter in angularJS]

    p22.html
    <!DOCTYPE html>
    <html ng-app="test">
    <head>
    <title>Angular JS Test</title>
    <script src="js/angular.min.js"></script>
    <script>
    var mymode = angular.module("test", []);
    mymode.controller("mycontroller", function($scope){
    $scope.colors = ['red','blue','green','yellow','grey','pink'];
    });
    </script>
    </head>
    <body>
    <div ng-controller="mycontroller">
    <ol>
    <li ng-repeat="ss in colors | orderBy : ss">{{ss}}</li>
    </ol>
    </div>
    </body>
    </html>

    You might also like