Shiva Tutorials – Learn Programming Simply

المشاركات

عرض الرسائل ذات التصنيف Angular JS

Angular JS Introduction

Angular JS Introduction:- https://www.shivatutorials.com/search/label/JAVASCRIPT https://www.shivatutorials.com/search/label/Jquery It is a plugin of JavaScript which is used to create a dynamic web application using HTML+CSS+Bootstrap and web services. Angular JS use MVC Design pattern to develop an application, MVC means model, view, and controller. The model means data access layer, we will use a third party script such as PHP,Java,.NET, Node to create a model layer using API (application programming interface). View means User access layer, we will use HTML 5+CSS3+Bootstrap to create a user access layer. Controller means Business access layer, it will provide complete dynamic programming using JavaScript, Jquery, or typescript. What is the difference between Angular and Angular JS? Angular js is the 1.0 version of angular, initially angular use javascript without using the node package manager and node library hence it is called Angular JS. later...

قراءة المزيد

Create Simple Interest program in Angular JS

Create a Simple Interest program in Angular JS:- step 1st:- Create HTML Form and add angular library Step2nd:- add ng-app and ng-controller under body section or <div> step3rd:- add angular event under button tag ng-click step4th:- define controller script using javascript add module using ng-app attribute var app = angular.modules('appname',[]); [] means angular route ,default is null app.controller('controllername',function($scope){ }); ...

قراءة المزيد

RadioButton in Angular JS

We can implement radio button using two different ways:- 1) using Array Object <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <div ng-repeat="item in arr"><input type="radio" value="{{item}}" name="a" ng-model="$parent.course" />{{item}} </div> <input type="button" value="Click" ng-click="fun()" /> <br><br> {{msg}} </div> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myctrl',function($scope) { $scope.arr = ["C","CPP","DS","JAVA","PHP","iOS","An...

قراءة المزيد

CheckBox in Angular JS

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <div ng-repeat="c in course"> <label><input type="checkbox" ng-model="msg.selected[c]" ng-true-value="'{{c}}'" ng-false-value="''">{{c}}</label> </div> <input type="button" value="Click" ng-click="fun()" /> {{res}} </div> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myctrl',function($scope) { $scope.msg = { selected:{} }; $scope.course = [ "C","CPP","JAVA",".NET","PHP","iOS","Android" ...

قراءة المزيد

Pass Parameter value under event in angular JS

Pass Parameter value under event in angular JS:- We can pass param directly under the calling function which will be received by called function:- <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" > <input type="text" ng-model="num" /> <br> <br> <input type="button" value="sq" ng-click="fun('sq')"> <input type="button" value="cube" ng-click="fun('cb')"> <br> {{res}} </div> <script type="text/javascript"> angular.module('myApp',[]).controller("myCtrl",function($scope) { $scope.num=0; $scope.fun=function(arg){ ...

قراءة المزيد

ng-repeat of Angular JS

ng-repeat of Angular JS:- It is used to display Array or JSON data similar to foreach loop of Java. We will mostly bind tables, drop-down lists, and Listbox data using ng-repeat. Syntax of ng-repeat <tr ng-repeat="var in source"> <td>var</td> </tr> Example of ng-repeat to bind data in the dropdown list :- <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="a"> <option ng-repeat="item in arr" value="{{item}}">{{item}}</option> </select> {{a}} </div> <script> angular.module('myApp',[]).controller('myCtrl',function($scope){ $scope.arr = ["C","CPP",...

قراءة المزيد

Dropdownlist example in Angular JS

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <select ng-model="$parent.course"> <option ng-repeat="item in arr" value="{{item}}" >{{item}} </option> </select> <input type="button" value="Click" ng-click="fun()" /> <br><br> {{msg}} </div> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myctrl',function($scope) { $scope.arr = ["C","CPP","DS","JAVA","PHP","iOS","Android"]; $scope.fun=function() { if ($scope.course!=undefined) ...

قراءة المزيد

Create User Define Directive in Angular Application

Create User Define Directive in Angular Application:- Directive is used to provide predefine functionality under angular application we can create our own directive tag using directive(); app.module('modulename',[]).directive('directivename',function(){ return{ template :value}}) Example of Directive Elements of Angular JS:- <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <scs></scs> </div> <script> angular.module('myapp',[]).directive('scs',function(){return {template:'<marquee>welcome in SHIVA Concept Solution</marquee>'}}); </script> </body> </html>

قراءة المزيد

ListBox Example in Angular JS

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="angular.min.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> <select ng-model="$parent.course" multiple="true"> <option ng-repeat="item in arr" value="{{item}}" >{{item}} </option> </select> <input type="button" value="Click" ng-click="fun()" /> <br><br> {{msg}} </div> <script type="text/javascript"> var app = angular.module('myapp',[]); app.controller('myctrl',function($scope) { $scope.arr = ["C","CPP","DS","JAVA","PHP","iOS","Android"]; $scope.fun=function() { if ($sco...

قراءة المزيد

Services in Angular JS

Services in Angular JS :- It is used to add external functionality ,features in angular js application from Remote Web Server. Service always will be defined as a method in angular JS Controller. Service use to provide business code as well as Http data from web server. To access Http data angular provide $http variable which will be defined under controller section. Complete Code to get registration web service data in angular js application. CORS should be enabled in angular JS Web services then it will be displayed . .................................................................................................. <!DOCTYPE html> <html> <head> <title> AngularJs $http.get() Service Response Example </title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="serviceApp" ng-controller="serviceCtrl...

قراءة المزيد

Angular JS Form Validation

Angular JS Form Validation:- 1) Form Validation :- 2) Angular js Form Validation :- Angular JS Support HTML 5 Validation and it is used to manage State of Validation error according to events. It contain predefined variable to handle validation process. $untouched The field has not been touched yet $touched The field has been touched $pristine The field has not been modified yet $dirty The field has been modified $invalid The field content is not valid $valid The field content is valid Example of Angular Js Form validation using Name and Emailid Id Field <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <div ng-app=""> <form name="frm"> <input type="text" name="n" ng-model="n" required>...

قراءة المزيد

Create Five Page Web Application using Angular.

Create Five Page Web Application using Angular:- ...................................................................................................................................... 1) First Create HTML Page 2) Link two plugin first angular and another will be route configuration plugin. 3) Create a header, middle, and footer section 4) create ng-app and ng-controller section then write <div ng-view> </div> It is used to load the child template of the angular main page 5 Create Controller file and define different routing path app=angular.module('modulename',[ngRoute]); app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl : 'pagename', controller : 'contoller' }) .when('/pathname', { templateUrl : 'pagename', controlle...

قراءة المزيد

Angular JS Interview Question

Angular JS Interview Question :- ANGULAR JS 1.0 and ANGULAR JS Framework 2.0,4.0,5.0,6.0,7.0 .................................................................................................... Q1 what is difference between Angular JS and normal javascript? Q2 what is directive elements in angular js? ng-model ng-bind ng-repeat ng-pattern ng-style Q3 what is $scope variable in Angular? Q4 what is Angular API? Q5 what is module in Angular JS and How we can create Module? Q6 what is Component and Sub Component and root Component? Q7 what is data binding concept in angular js ,explain one-way and two-way binding with example Q8 what is Property binding and Event binding? Q9 what is dependancy injection in angular JS .how we can implement them Q10 what SPA means Single Page Application? Q 11 what is Routing Concept.ho...

قراءة المزيد