SharePoint Issues: Angular JS

Showing posts with label Angular JS. Show all posts

Showing posts with label Angular JS. Show all posts

Friday, August 26, 2016

Controller in Angular JS

Raghu Raja 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>

Angular JS Databinding

Raghu Raja 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>

Thursday, August 11, 2016

Calculation IN Angular JS

Raghu Raja 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>

controller in Angular JS

Raghu Raja 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>

MVC architecture in Angular JS

Raghu Raja 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>

Created By Drizzleinfotech | Distributed By CopyRights 2020