Author: admin

Working with JSON

by

March 23, 2017

10:59 am

Leave a comment on Working with JSON

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <h2>JSON</h2>
        <fieldset>
            <legend>
                String
            </legend>
            <div ng-init='name = {"first_name":"Shailesh", "last_name" : "Sonare"}'>
                {{name.first_name}} <br/>
                {{name.last_name}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Numbers
            </legend>
            <div ng-init='months = {"jan": 1, "feb" : 2}'>
                {{months.jan}} <br/>
                {{months.feb}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Objecs
            </legend>
            <div ng-init='result = {employee:{"name": "Shailesh", "age" : 28}}'>
                {{result.employee.name}} <br/>
                {{result.employee.age}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Array
            </legend>
            <div ng-init='result = {employee:[{"name": "Shailesh", "age" : 28},{"name": "Mahesh", "age" : 26}]}'>
                {{result.employee[0].name}} <br/>
                {{result.employee[1].age}}
            </div>
            <div ng-init='result2 = {months:["Jan","Feb"]}'>
                {{result2.months[0]}} <br/>
                {{result2.months[1]}}
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {

        });
    </script>
</html>

 

 

Routing without hashtag

by

March 22, 2017

11:58 am

Leave a comment on Routing without hashtag

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <base href="/">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    </head>
    <body ng-app="myApp">
        <aside>
            <a href="testlab/angular/sample/26_routing_without_hashing.html">Home</a>
            <a href="red">Red</a>
            <a href="green">Green</a>
            <a href="blue">Blue</a>
            <a href="default">Default</a>
        </aside>
        <section ng-view></section>
    </body>
    <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.config(function ($routeProvider, $locationProvider) {
            $routeProvider
                    .when("/red", {
                        template: "<h2 style='color:red;'>Red Color</h2>"
                                /*
                                 templateUrl : "red.html",
                                 controller : "myCtrl"
                                 */
                    })
                    .when("/green", {
                        template: "<h2 style='color:green;'>Green Color</h2>"
                    })
                    .when("/blue", {
                        template: "<h2 style='color:blue;'>Blue Color</h2>"
                    })
                    .otherwise({
                        template: "<h2>Default Black Color</h2>"
                    });

            $locationProvider.html5Mode(true);
        });
    </script>
</html>

 

 

Routing

by

March 22, 2017

11:57 am

Leave a comment on Routing

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    </head>
    <body ng-app="myApp">
        <aside>
            <a href="#red">Red</a>
            <a href="#green">Green</a>
            <a href="#blue">Blue</a>
            <a href="#default">Default</a>
        </aside>
        <section ng-view></section>
    </body>
    <script>
        var app = angular.module("myApp", ["ngRoute"]); // where ngRoute is a dependent module
        app.config(function ($routeProvider) {
            $routeProvider
                    .when("/red", {
                        template: "<h2 style='color:red;'>Red Color</h2>"
                    })
                    .when("/green", {
                        template: "<h2 style='color:green;'>Green Color</h2>"
                    })
                    .when("/blue", {
                        template: "<h2 style='color:blue;'>Blue Color</h2>"
                    })
                    .otherwise({
                        template: "<h2>Default Black Color</h2>"
                    });
        });
    </script>
</html>

 

 

Services

by

March 22, 2017

11:56 am

Leave a comment on Services

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <h2>Scope</h2>
        <fieldset>
            <legend>
                Location
            </legend>
            <div>
                Absolute URL {{current_url}} <br/>
                Protocol {{protocol}} <br/>
                Port {{port}} <br/>
                Host {{host}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Timeout
            </legend>
            <div>
                {{greeting}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Time Interval
            </legend>
            <div>
                {{counter}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Custom Service
            </legend>
            <div>
                Square of 5 is {{square}} <br/>
                Cube of 5 is {{cube}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                HTTP Service
            </legend>
            <div>
                {{ajax_response}}
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.service('square_cube', function () {
            this.square = function (x) {
                return x * x;
            }

            this.cube = function (x) {
                return x * x * x;
            }
        });

        app.controller("myCtrl", function ($scope, $location, $timeout, $interval, square_cube, $http) {

            $scope.current_url = $location.absUrl();
            $scope.protocol = $location.protocol();
            $scope.port = $location.port();
            $scope.host = $location.host();

            $timeout(function () {
                $scope.greeting = "Hello India"
            }, 5000);

            $scope.counter = 0;

            $interval(function () {
                $scope.counter = $scope.counter + 1;
            }, 1000);

            $scope.square = square_cube.square(5);
            $scope.cube = square_cube.cube(5);

            $http.get('ajax_response.html').then(function (response) {
                $scope.ajax_response = response.data[1].name;
            });

        });
    </script>
</html>

 

 

Scope

by

March 22, 2017

11:56 am

Leave a comment on Scope

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <h2>Scope</h2>
        <fieldset>
            <legend>
                Circle
            </legend>
            <div ng-controller="Circle">
                Radius = {{radius}} <br/>
                Diameter = {{diameter}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
            {{globalMessage}}
        </fieldset>
        <fieldset>
            <legend>
                Root Scope
            </legend>
            <div>
                {{globalMessage}}
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.run(function ($rootScope) {
            $rootScope.globalMessage = "I am from root Scope available throughout the module";
        });

        app.controller("Circle", function ($scope) {
            $scope.radius = 5;
            $scope.diameter = $scope.radius * 2;
            $scope.area = 3.14 * $scope.radius * $scope.radius;
            $scope.circumference = 2 * 3.14 * $scope.radius;
        });
    </script>
</html>

 

 

Controller

by

March 22, 2017

11:55 am

Leave a comment on Controller

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <h2>Controller</h2>
        <fieldset>
            <legend>
                Circle
            </legend>
            <div ng-controller="Circle">
                Radius = {{radius}} <br/>
                Diameter = {{diameter}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Rectangle
            </legend>
            <div ng-controller="Rectangle">
                Length = {{length}} <br/>
                Breadth = {{breadth}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.controller("Circle", function ($scope) {
            $scope.radius = 5;
            $scope.diameter = $scope.radius * 2;
            $scope.area = 3.14 * $scope.radius * $scope.radius;
            $scope.circumference = 2 * 3.14 * $scope.radius;
        });

        app.controller("Rectangle", function ($scope) {
            $scope.length = 5;
            $scope.breadth = 6;
            $scope.area = $scope.length * $scope.breadth;
            $scope.circumference = 2 * $scope.length * $scope.breadth;
        });
    </script>
</html>

 

 

Modules

by

March 22, 2017

11:54 am

Leave a comment on Modules

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <fieldset>
            <legend>
                Modules
            </legend>
            <div>
                Radius = {{radius}} <br/>
                Diameter = {{diameter}} <br/>
                Area = {{area}} <br/>
                Circumference = {{circumference| number:2}} <br/>
            </div>
        </fieldset>
    </body>
    <script>
        var app = angular.module("myApp", []);

        app.controller("myCtrl", function ($scope) {
            $scope.radius = 5;
            $scope.diameter = $scope.radius * 2;
            $scope.area = 3.14 * $scope.radius * $scope.radius;
            $scope.circumference = 2 * 3.14 * $scope.radius;
        });
    </script>
</html>

 

 

Angular Expression

by

March 22, 2017

11:53 am

Leave a comment on Angular Expression

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="">
        <fieldset>
            <legend>
                Angular Expression
            </legend>
            <div>
                Square of 5 is {{5 * 5}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Addition of x and y
            </legend>
            <div ng-init="x = 5;y = 6">
                {{x + ' + ' + y}} = {{x + y}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Concatenation
            </legend>
            <div ng-init="first_name = 'Shailesh'; last_name = 'Sonare'">
                {{first_name + " " + last_name}}
            </div>
        </fieldset>
    </body>
</html>

 

 

Directives

by

March 22, 2017

11:52 am

Leave a comment on Directives

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="">
        <fieldset>
            <legend>
                Single Variables
            </legend>
            <div ng-init="name = 'Angular JS'">
                Hello {{name}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Multiple Variables
            </legend>
            <div ng-init="first_name = 'Angular';last_name = 'JS'">
                Hello {{first_name + ' ' + last_name}}
            </div>
        </fieldset>
        <fieldset>
            <legend>
                Model
            </legend>
            <div ng-init="model_variable = 'Hello Model'">
                <input type="text" ng-model="model_variable" />
                Hello {{model_variable}}
                <div ng-bind="model_variable"></div>
            </div>
        </fieldset>
        <fieldset>
            <legend>
                JSON objects
            </legend>
            <div ng-init="months={'first':'January', 'last':'December'}">
                First Month : {{months.first}} <br/>
                Last Month : {{months.last}}
            </div>
        </fieldset>
        Hello {{'World'}}
    </body>
</html>

 

 

Angular Html

by

March 22, 2017

11:51 am

Leave a comment on Angular Html

Angular JS

 

<DOCTYPE html>
<html>
    <head>
        <meta CHARSET="UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="">
            Hello {{'Angular'}}
        </div>
        Hello {{'World'}}
    </body>
</html>