Learning Angular JS – Sibeesh Passion https://sibeeshpassion.com My passion towards life Thu, 20 Aug 2015 05:33:39 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Learning Angular JS – Sibeesh Passion https://sibeeshpassion.com 32 32 Learning AngularJS: HTML DOM https://sibeeshpassion.com/learning-angularjs-html-dom/ https://sibeeshpassion.com/learning-angularjs-html-dom/#disqus_thread Wed, 29 Apr 2015 20:21:03 +0000 https://sibeeshpassion.com/?p=1601 Today we will learn about Angular JS HTML DOM elements. We will be discussion about ng-disabled, ng-show, ng-hide, ng-show-conditional expression in this article. These are the tags we can use for manipulating our dom elements. It is very easy to handle these tags. We will explain this with examples. I hope you will like this article.

If you are new to Angular JS then I suggest you read the basics of Angular JS here:

  • Basics of AngularJS
  • AngularJS Search Box Using Filter
  • Learning AngularJS: $http

    • Using the code

    The ng-disabled directive normally binds the data to the disabled property of our HTML elements. The following is the example for that.

    [html]
    <b>ng-disabled</b>
    <div ng-app="">
    <p>
    <input type="checkbox" ng-model="myVal" />Please enable me
    </p>
    <p>
    <button ng-disabled="!myVal ">Wow! You enabled me :)</button>
    </p>
    </div>
    [/html]

    Here we have a model that is a check box. What we do is, whenever a user clicks that checkbox we are applying that value to the ng-disabled property of the button. Please see the following output.

    Learning AngularJS

    Learning AngularJS

    Learning AngularJS

    Learning AngularJS

    Now we will explain ng-show.

    The ng-show shows or hides the HTML controls depending on the ng-show value.

    Please see the following example.
    [html]
    <b>ng-show</b>
    <p>
    <input type="checkbox" ng-model="showhide" />Please show me
    </p>
    <p ng-show="showhide">Am I visible? {{showhide}}</p>
    [/html]

    In the preceding example we are taking the value from the model showhide and applying to the ng-show.

    Please see the output below.

    Learning AngularJS

    Learning AngularJS

    Learning AngularJS

    Learning AngularJS

    You can apply any expression also. We will discuss that in the following example.
    [html]
    <b>ng-show-Conditional expressions</b>
    <div ng-init="isAdmin=true">
    <p ng-show="isAdmin == true">Admin User</p>
    </div>
    [/html]

    The preceding will show the output as:

    Learning AngularJS

    Learning AngularJS

    ng-hide

    The ng-hide directive is the same as the ng-show:
    [html]
    <b>ng-hide</b>
    <p ng-hide="true">Not visible.</p>
    <p ng-hide="false">Visible.</p>
    [/html]

    In the preceding example we are applying the ng-hide value directly. We can use the ng-model for the same as we discussed in the preceding examples.

    This will return the output as follows.

    Learning AngularJS

    Learning AngularJS

    Complete HTML
    [html]
    <!DOCTYPE html>
    <html
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Angular JS HTML Dom – www.sibeeshpassion.com</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
    <b>ng-disabled</b>
    <div ng-app="">
    <p>
    <input type="checkbox" ng-model=" myVal " />Please enable me
    </p>
    <p>
    <button ng-disabled="!myVal ">Wow! You enabled me :)</button>
    </p>
    <b>ng-show</b>
    <p>
    <input type="checkbox" ng-model="showhide" />Please show me
    </p>
    <p ng-show="showhide">Am I visible? {{showhide}}</p>
    <b>ng-show-Conditional expressions</b>
    <div ng-init="isAdmin=true">
    <p ng-show="isAdmin == true">Admin User</p>
    </div>
    <b>ng-hide</b>
    <p ng-hide="true">Not visible.</p>
    <p ng-hide="false">Visible.</p>
    </div>
    </body>
    </html>
    [/html]

    Conclusion

    Now that is all for today, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.

    Kindest Regards
    Sibeesh venu

    ]]>     https://sibeeshpassion.com/learning-angularjs-html-dom/feed/ 0     Learning AngularJS: $http https://sibeeshpassion.com/learning-angularjs-http/ https://sibeeshpassion.com/learning-angularjs-http/#disqus_thread Sun, 29 Mar 2015 20:18:58 +0000 https://sibeeshpassion.com/?p=1561 Hi all, I hope you are fine. Today we will learn about AngularJS Basic $http. If you are new to AngularJS then I suggest you read the Basics of AngularJS.

    Now with the assumption that you have read my previous article, we are starting.

    This article explains $http in Angular JS.

    Using the code

    $http is a service for reading data from web services. It uses the get (service URL) method for the process. We will see that with an example.
    [html]
    <div ng-app="httpApp" ng-controller="httpController">
    <ul>
    <li ng-repeat="det in details">{{ det.name + ‘, ‘ + det.countrycode }}
    </li>
    </ul>
    </div>
    [/html]

    In the preceding code, we have an Angular app httpApp and a controller httpController. Now we need to create our controller part, right?
    [js]
    < script >
    var app = angular.module(‘httpApp’, []);
    app.controller(‘httpController’, function($scope, $http) {
    $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=- 22.4&west=55.2&lang=de&username=demo")
    .success(function(response) {
    $scope.details = response.geonames;
    });
    }); < /script>
    [/js]

    In the preceding code we are using the $http.get() method of Angular. In the URL part we have given a sample web service URL of geo data. You can get these free web services here.

    So in the success part we are returning the response of the web service.

    Now if you write the response.geonames in the success in the browser console as follows, you will get the array as shown below.

    console.log(response.geonames);

    Learning AngularJS http

    Learning AngularJS http


    Once it is returned we are showing the response data to the UI using the repeat directive.

    So that is all.

    Output

    Learning AngularJS http

    Learning AngularJS http

    Now apply the CSS

    Add the following CSS to your page.
    [css]
    < style > li {
    border: 1px solid#ccc;
    border – right: none;
    border – left: none;
    padding: 2px;
    text – align: center;
    list – style: none;
    } < /style>
    [/css]

    Once you add the CSS you will get output as follows.

    Learning AngularJS http

    Learning AngularJS http

    Cool. We did it.

    Complete HTML
    [html]
    <!DOCTYPE html>
    <html
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Angular $http – sibeeshpassion </title>
    <style>
    li {
    border: 1px solid #ccc;
    border-right: none;
    border-left: none;
    padding: 2px;
    text-align: center;
    list-style:none;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="httpApp" ng-controller="httpController">
    <ul>
    <li ng-repeat="det in details">{{ det.name + ‘, ‘ + det.countrycode }} </li>
    </ul>
    </div>
    <script>
    var app = angular.module(‘httpApp’, []);
    app.controller(‘httpController’, function ($scope, $http) {
    $http.get("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=sibeeshvenu")
    .success(function (response) {
    $scope.details = response.geonames;
    console.log(response.geonames);
    });
    });
    </script>
    </body>
    </html>
    [/html]

    Conclusion

    Now that is all for the day, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.

    Kindest Regards
    Sibeesh venu

    ]]>     https://sibeeshpassion.com/learning-angularjs-http/feed/ 1