Saturday, 7 May 2016

Bind Model in AngularJS with Example.

Creating a Module

A module is created by using the AngularJS function angular.module


Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:


Example:- 

Step :- 1  --- Add HTML Page in Application.

Step :- 2  --- Add Angular JS file into  Application.

Step :- 3 --- then create path of anular.js.min file on HTML Page.


//----------AppJS Source Code-----------------

var appUI = angular.module("appUI", []);

appUI.controller("appCtrl", function ($scope) {
    $scope.firstName = "VICKY";
    $scope.lastName = "RAJ";

});



//----------Source Code-----------------

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../AppJS/angular.min.js"></script>
    <script src="../AppJS/firstApp.js"></script>
</head>
<body ng-app="appUI" ng-controller="appCtrl">
    <div>
        <div>
            <table align="center">
                   <tr><td>Enter First Name</td><td><input type="text" ng-model="firstName" placeholder="First Name" /></td></tr>
                   <tr><td>Enter Last Name</td><td><input type="text"  ng-model="lastName" placeholder="Last Name" /></td></tr>
                  <tr><td>First Name</td><td >{{firstName}}</td></tr>
                  <tr><td>Last Name</td><td>{{lastName}}</td></tr>
            </table>
        </div>
    </div>
</body>

</html>

---------------------------------------------------------------------------------------------





Saturday, 30 April 2016

JavaScript Function With Example

JavaScript Function


Definition :-

 In JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces {}.

Syntax:-
----------------------------------------------
function functionName(parameters){
    statements
}

Example:-
-----------------------------------
function myFunction(a, b) {
    return a * b;
}

How to use this function in Script.

<!DOCTYPE html>
<html>
<body>

<h1>a function returns the result : </h1>

<p id="demo"></p>

<script>
function myFunction(a, b) {
    return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Result:- 

a function returns the result: 12


Saturday, 20 February 2016

JQuery Calendar Example

JQuery Calendar Example


A Simple Calendar In html with JQuery using Date Picker.



Code:-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"> 
    </script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $("#calendar").datepicker
            ({
                defaultDate: '01/01/' + new Date().getFullYear(),
                minDate: '01/01/' + new Date().getFullYear(),
                maxDate: '12/31/' + (new Date().getFullYear() + 1),
                numberOfMonths: [2, 6],
            });
        });
    </script>
    <style>
        #header {
            background-color:#00ff21;
            height:100px;
            width:100%;
            text-align:center;
        }
        #footer {
            background-color: #808080;
            height: 100px;
            width: 100%;
            color: white;
            text-align: center;
        }
        #calendar {
            margin-left:175px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Calendar</h1>
    </div>
    <div id='calendar'>
    </div>
    <div id="footer">
        <h2>All Right are reserved at Dot Net By Vickypedia</h2>
    </div>
</body>
</html>


Output :- 



Saturday, 6 February 2016

First Application in AngularJS

First Application of AngularJS

Step 1 :- Start Visual Studio then  Create Empty Web Application.



Step :- Add HTML page in your Application.


Step 3 :- Add Script file / Source link in your page...

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>



Step 4:- Write Code   :--

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <h1>First Example of AngularJS</h1>
        <p>Please Enter "Hello World"/Text in the TextBox:
            <input type="text" ng-model="text"></p>
        <h2 ng-bind="text"></h2>
    </div>
    <div id="footer"><h3>Powered By DotNet By Vickypedia</h3></div>
</body>
</html>




Step 5 :- Run your Application ...




Introduction of AngularJS

Introduction of AngularJS

Introduction of AngularJS

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.



Definition of AngularJS

AngularJS is a structural framework for dynamic web apps.

Advantages of AngularJS

  • 1-AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
  • 2-AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
  • 3-AngularJS code is unit testable.
  • 4-AngularJS uses dependency injection and make use of separation of concerns.
  • 5-AngularJS provides reusable components.
  • 6-AngularJS, developer write less code and get more functionality.

Disadvantages of AngularJS

Though AngularJS comes with lots of plus points but same time we should consider the following points −
  • 1-Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
  • 2-Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

The AngularJS Components

The AngularJS framework can be divided into following three major parts −
  • ng-app − This directive defines and links an AngularJS application to HTML.
  • ng-model − This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind − This directive binds the AngularJS Application data to HTML tags.

AngularJS Environment Setup

Click on this link :-https://angularjs.org/
Download Script file & Add in your Application.

*(To see in Image.............)



Saturday, 30 January 2016

Hello World Programming with Node.JS

Hello World Programming with Node.JS

1st :-  Install node.js Application....if not Install node.js                  Application on your system then visit this link...(

2nd:- Open Command Prompt then type "node".

3rd :- Write Code for the "Hello World". 
           (To see in image................................)



4th :- Enjoying Programming....!!

How to start node js programming

How to start node.js programming 

1st :-visit this link( https://nodejs.org/en/download/ )



2nd:- Download the node.js Application .

3rd:- Install node.js Application on your windows.

4th:- After completed installation then open Command Prompt &              type "node".




5th:-Start Programming :-....................!!


Factorial of a Number

Recently Viewed