Showing posts with label Angular JS. Show all posts
Showing posts with label Angular JS. Show all posts

Tuesday, December 20, 2016

Which is the Front-end technologies for SharePoint Framework development?

Angular JS , breadcrumb in Sharepoint
Which is the Front-end technologies for SharePoint Framework development?
Microsoft has clearly mentioned in their key notes, they are building the framework and it is related samples using KnockoutJs and ReactJs with Typescript. Since it is an open-source based development model, choosing the framework/technologies are completely our choices, based on our knowledge and requirements. Here I have listed out a few front-end technologies.
  1. Angular 1.x - https://angularjs.org/
  2. Angular 2 - https://angular.io/
  3. ReactJs - https://facebook.github.io/react/
  4. KnockoutJs - http://knockoutjs.com/
  5. Ember.Js - http://emberjs.com/
  6. Backbone.Js - http://backbonejs.org/
  7. Aurelia.io - http://aurelia.io/
Read more »
By at No comments:
Labels: , , , , ,

Friday, August 26, 2016

Mouse Events

Angular JS ,
Mouse Events

Mouse events moves

ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave

mouse button is clicked

ng-mousedown
ng-mouseup
ng-click
Read more »
By at No comments:
Labels:

Angular JS Events

Angular JS ,
Angular JS Events
Angular JS Events

  1. ng-blur
  2. ng-change
  3. ng-click
  4. ng-copy
  5. ng-cut
  6. ng-dblclick
  7. ng-focus
  8. ng-keydown
  9. ng-keypress
  10. ng-keyup
  11. ng-mousedown
  12. ng-mouseenter
  13. ng-mouseleave
  14. ng-mousemove
  15. ng-mouseover
  16. ng-mouseup
  17. ng-paste
Example:

 <div ng-app="test" ng-controller="action">

 <button ng-click="count = count+1 ">Click Me!</button>

 <p>{{ count }}</p>

 </div>
<script>
var app = angular.module('test', []);
app.controller('action', function($scope) {
    $scope.count = 0;
});
</script>
Read more »
By at No comments:
Labels:

Search /Filter in Angular JS

Angular JS ,
Search /Filter in Angular JS
Search action Angular JS

<div ng-app="mysearch" ng-controller="namesearch">


<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in name | filter:test">
    {{ x }}
  </li>
</ul>

</div>

<script>
angular.module('mysearch', []).controller('namesearch', function($scope) {
    $scope.name = [
        'Ram',
        'Nandu',
        'vel',
        'mani',
        'jubi',
       
    ];
});
</script>
Read more »
By at No comments:
Labels:

Angular JS in Scope

Angular JS , AngularJS
Angular JS in Scope


  • -binding part
  • properties and methods
  • both view and controller


 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">

 <p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
    $rootScope.color = 'blue';
});

 </script>
Read more »
By at No comments:
Labels: ,

Controller in Angular JS

Angular JS , AngularJS
Controller in Angular JS
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('test', []).controller('menu', function($scope) {
    $scope.names = [
        {furit:'Orange',vegtable:'Drumstick'},
        {furit:'Apple',vegtable:'Ladyfinger'},
        {furit:'Grape',vegtable:'Bringal'}
    ];
});
</script>


<div ng-app="test" ng-controller="menu">

<ul>
  <li ng-repeat="x in names">
{{x.furit }}
  </li>
</ul>
<ul>
  <ol ng-repeat="x in names">
{{x.vegtable}}
  </ol>
</ul>
</div>
Read more »
By at No comments:
Labels: , ,

Angular JS Databinding

Angular JS , AngularJS
Angular JS Databinding
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="test" ng-controller="myC">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
 <h1>{{lastname}}</h1>
</div>

 <script>
var app = angular.module('test', []);
app.controller('myC', function($scope) {
    $scope.firstname = "Peak";
    $scope.lastname = "Finders";
});
</script>
Read more »
By at No comments:
Labels: ,

Thursday, August 11, 2016

Calculation IN Angular JS

Angular JS ,
Calculation IN Angular JS
<script>
//Defining Services Using Service
var app = angular.module('app', []);
 
app.service('MathService', function() {
    this.add = function(a, b) { return a + b };    
    this.subtract = function(a, b) { return a - b };  
    this.multiply = function(a, b) { return a * b };
    this.divide = function(a, b) { return a / b };
});
 
app.service('CalculatorService', function(MathService){
    this.square = function(a) { return MathService.multiply(a,a); };
    this.cube = function(a) {  
        return MathService.multiply(a, MathService.multiply(a,a));  
        };
});
 
app.controller('CalculatorController', function($scope, CalculatorService) {
    $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
    }
    $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
    }
});
</script>

 
<div ng-app="app">
    <div ng-controller="CalculatorController">
        Enter a number:
        <input ng-model="number" type="number">
      <button ng-click="doSquare()"><b>X<sup>2</sup></b></button>
      <button ng-click="doCube()"><b>X<sup>3</sup></b></button>
         
        <div>Answer: {{answer}}</div>
    </div>
</div>  
Read more »
By at 2 comments:
Labels:

controller in Angular JS

Angular JS ,
controller in Angular JS
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script>  
  //Create module
  var app = angular.module("moduleName",[]);
 
  //Create the controller
  function myControl($scope) {
    $scope.yourProperty = 'This is Actioncontroller';
  }
 
  //Register controller with module
  app.controller("myControl",myControl);
</script>
</head>
<body>
<h1 ng-controller="myControl">Message -  {{  yourProperty  }}</h1> 
Read more »
By at No comments:
Labels:

MVC architecture in Angular JS

Angular JS ,
MVC architecture in Angular JS
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<script type="text/javascript">
//Creating controller here
function Customer($scope)
{
    //Creating model here
    $scope.customer =  {
         'Name'    :   'Peakfinders',
         'Address' :   'India',
         'Email'   :   'Peakfinders@gmail.com'
     }
}
</script>
<p>Displing model data in view through controller</p>
<div ng-controller="Customer">
<h3>{{ customer.Name }} </h3>
<h3>{{ customer.Address }} </h3>
<h3>{{ customer.Email }} </h3>
</div> 
Read more »
By at No comments:
Labels:

Tuesday, August 9, 2016

Addevent listener in Angular Js

Angular JS , AngularJS
Addevent listener in Angular Js

    Name:<input id="txtname" type="text"/>
    Welcome!

    <script>
      var txtipt = document.getElementById('txtname');

      txtipt.addEventListener('keyup', function(){
        var text = txtipt.value;
        console.log('New text is "' + text + '"');
      });
    </script>
Read more »
By at No comments:
Labels: ,

Wednesday, July 20, 2016

Array in Angular JS

Angular JS ,
Array in Angular JS
Example:

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

 </head>
<body>

<div ng-app="" ng-init="furit=['rag','rrr']">

 <p>Result{{ furit[1] }}</p>

 </div>

 <div ng-app="" ng-init="furit=['te','codf']">

 <p>Result <span ng-bind="furit[1]"></span></p>

 </div>
</body>
</html>

 Result:
Result rrr

Read more »
By at No comments:
Labels:

objects in Angular JS

Angular JS , AngularJS
objects in Angular JS
Objects in angular js

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

 </head>
<body>

<div ng-app="" ng-init="emp={id:'1',name:'peak'}">

 <p>The Emp Id is {{ emp.id }}</p>
</div>
</body>
</html>
Read more »
By at No comments:
Labels: ,

AngularJS Numbers

Angular JS ,
AngularJS Numbers
ng-init using in Angular JS

Example:


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

</head>
<body>

<div ng-app="">

<div ng-app="" ng-init="a=5;b=5">

<p>Total: {{ a * b }}</p>

</div>

</div>
</body>
</html>

Result:
Total:25
Read more »
By at No comments:
Labels:

Addition calculation in Angular JS

Angular JS ,
Addition calculation in Angular JS
two numbers adding in angular js
Example:
<html >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<body>

<div ng-app="">


<p>Name : <input type="text" ng-model="name" ></p>
<h1>Hello {{5+5}}</h1>

</div>
</body>
</html>
Read more »
By at No comments:
Labels:

ng-model in Angular JS

Angular JS ,
ng-model in Angular JS

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

</head>
<body>

<div ng-app="">


<p>Name : <input type="text" ng-model="name" ></p>
<h1>Hello {{name}}</h1>

</div>
</body>
</html>
Read more »
By at No comments:
Labels:

ng-app Tag in Angular JS

Angular JS ,
ng-app Tag in Angular JS
ng-app:

 anywhere  within HTML 
we will add page head
If we want to add particular div also 
Example:

 <html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

 <div>
<div ng-view>test
</div>
</div>
</body>
</html>
Result
Test
Read more »
By at No comments:
Labels:

Angular JS Overview:

Angular JS ,
Angular JS Overview:
Angular JS Overview:
  • Its is client side web application
  • Handle DOM and AJAX
  • write a CRUD application 


  1. databinding
  2. basic templating directives
  3. form validation
  4. routing 
  5. Deep-linking
  6. reusable compents
  7. dependency injection


Read more »
By at No comments:
Labels:

Angular JS Approach ,Support and Syntax,

Angular JS ,
Angular JS Approach ,Support and Syntax,
Angular JS Approach

 we need to create HTML Construct

 Angular JS Syntax

 call driectives

 Databinding as{{}}
DOM Controls structures
Support form validation and forms
Attaching co-behind to DOM Elements
Grouping of HTML into reusable components
Read more »
By at No comments:
Labels:

Angular JS Advantages

Angular JS ,
Angular JS Advantages
Angular JS Advantages
  1. Develop Across All Platforms
  2. Speed & Performance
  3. Incredible Tooling
  4. Cross Platform supports
Read more »
By at No comments:
Labels: