Scribd Logo
Upload

Welcome to Scribd!

  • 55 MVC Framework Intoduction To AngularJS Directives Expressions Data Types Module and Controllers 20-02-2023

    Uploaded by

    fokac40868
    8 views11 pages

    Original Title

    55 MVC Framework Intoduction to AngularJS Directives Expressions Data Types Module and Controllers 20-02-2023

    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
    8 views11 pages

    55 MVC Framework Intoduction To AngularJS Directives Expressions Data Types Module and Controllers 20-02-2023

    Uploaded by

    fokac40868

    Copyright:

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

    <!

    DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <body>

    <div ng-app="">
    <p>Input something in the input box:</p>
    <p>Name : <input type="text" ng-model="name1" placeholder="Enter name here"></p>
    <h2>Hello(ng-bind) <span ng-bind="name1"></span></h2>
    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    <div ng-app="">
    <p>My first expression: {{ 5 + 5 }}</p>
    <p>Input something in the input box:</p>
    <p>Name: <input type="text" ng-model="name"></p>
    <p>{{name}}</p>

    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <body>

    <div ng-app="" ng-init="firstName='vellore'">

    <p>The name is <span ng-bind="firstName"></span></p>

    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
    ></script><body>
    <p>Change the value of the input field:</p>
    <div ng-app="" ng-init="myCol='yellow'">
    <input type="text" style="background-color:{{myCol}}" ng-model="myCol">
    </div>
    <p>AngularJS resolves the expression and returns the result.</p>
    <p>The background color of the input box will be whatever you write in the input field.
    </p></body></html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"
    ></script><body>

    <div ng-app="" ng-init="quantity=5;cost=5;">

    <p>Total in dollar: {{ quantity * cost }}</p>


    </div>
    </div>

    </body></html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <body>

    <div ng-app="" ng-init="points=[1,15,19,2,40]">

    <p>The third result is {{ points[1] }}</p>

    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <body>

    <div ng-app="" ng-init="names=[


    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'},{name:'vijay',country:'india'}]">

    <p>Looping with objects:</p>


    <ul>
    <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}</li>
    </ul>

    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>

    <div ng-app="" ng-init="firstName='John';lastName='Doe';">

    <p>The full name is: {{ firstName + " " + lastName }}</p>

    </div>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
    <body>

    <div ng-app="" ng-init="names=['Jani','Hege','Kai','vit']">


    <p>Looping with ng-repeat:</p>
    <ul>
    <li ng-repeat="x in names">
    {{ x }}
    </li>
    </ul>
    </div>

    </body>
    </html>
    <!DOCTYPE html><html><script src=
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script><body>
    <div ng-app="myApp" ng-controller="myCtrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    {{ firstName + " " + lastName }}
    </div><script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
    $scope.firstName = "VIT";
    $scope.lastName = "Vellore";
    });</script></body></html>
    <!DOCTYPE html>
    <html>
    <head>
    <script src =
    "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script></head>
    <body ng-app = "myapp">
    <div ng-controller = "HelloController" >
    <h2>Welcome {{helloTo.title}} to the world of Web Technology!</h2>
    <h2>Welcome {{helloTo.num}} to the world of Web Technology!</h2>
    </div><script>
    angular.module("myapp", []).controller("HelloController",
    function($scope) {
    $scope.helloTo = {};
    $scope.helloTo.title = "AngularJS today";
    $scope.helloTo.num = 4;
    });</script></body></html>

    You might also like