Wednesday, 28 December 2016

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title> AngularJS | Welcome </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

    <script>

        var myObj = {Name : 'Sagan', Comapny: "Apptivo Sollutions"};
        console.log(typeof myObj);
        console.log(myObj);
    </script>

 
</head>
<body>


<h3> Sample Code : (ng-controller) </h3>

<div ng-controller="LanguageCtrl">

    Select your Favourite Language:
    <button ng-click = "java()"> Java </button>
    <button ng-click= "cpp()"> C++ </button>
    <button ng-click= "python()"> Python </button>

    <p> You have Selected : {{getLanguage}} </p>

</div>

<script>

var app = angular.module("myApp",[]);
app.controller("LanguageCtrl",function($scope)
{

$scope.getLanguage = "None";

$scope.java = function()
{
$scope.getLanguage = "Java";
}

$scope.cpp = function()
{
$scope.getLanguage = "C++";
}

$scope.python = function()
{
$scope.getLanguage = "python";
}

});

</script>

<h3> Sample Code : (ng-init)</h3>

 <div ng-init= "myLanguage = [
        {name:'Java',extension:'.java'},
        {name:'JavaScript',extension:'.js'},
        {name:'Ruby',extension:'.rb'}]">
<p ng-repeat = "language in myLanguage">
Name : {{language.name}} <br>
Extension : {{language.extension}}

</p>

</div>

 <h3> Sample Code : (ng-init) with Expression </h3>

    <div> 10* 10 = {{10*10}}</div>

    <div ng-init=" number = 10"> {{number+10}}</div>


 <h3> Sample Code : (ng-init) with Expression and Bind </h3>

<div ng-init=" name = 'AngularJS'">

    <input type ="text" ng-model="name">
    <div> Hello {{name}}</div>

    <div ng-bind="name"></div>
    <div ng:bind="name"></div>
    <div x-ng-bind="name"></div>
    <div data-ng-bind="name"></div>
    <div data:ng:bind="name"></div>

 

<h3> Sample Code : Filters </h3>

<div> Upper Case Filter       :   {{ name | uppercase}}</div>

<div> Lower Case Filter       :   {{ name | lowercase}} </div>

<textarea ng-model="name"></tetxtarea>


</div>

</body>
</html>

No comments:

Post a Comment