التخطي إلى المحتوى الرئيسي

المشاركات

عرض الرسائل ذات التصنيف 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...