Programming Steps: March 2016

Thursday, March 10, 2016

AngularJS Basic HTTP Authentication

AngularJS Basic HTTP Authentication
Code and Demo

http://jasonwatmore.com/post/2014/05/26/angularjs-basic-http-authentication-example

201603

AngularJS User Registration and Login

AngularJS User Registration and Login

Code and Demo

http://jasonwatmore.com/post/2015/03/10/angularjs-user-registration-and-login-example-tutorial

201603

Thursday, March 3, 2016

w3s123-AngularJS Service Http

w3s123-AngularJS Service Http
code example:

index.html

https://www.w3schools.com/angular/angular_http.asp

201603

w3s122-AngularJS Service Custom

w3s122-AngularJS Service Custom
code example:

index.html

https://www.w3schools.com/angular/angular_services.asp

201603

w3s121-AngularJS Service Interval

w3s121-AngularJS Service Interval
code example:

index.html

https://www.w3schools.com/angular/angular_services.asp

201603

w3s120-AngularJS Service TimeOut

w3s120-AngularJS Service TimeOut
code example:

index.html

https://www.w3schools.com/angular/angular_services.asp

201603

w3s119-AngularJS Filter Custom

w3s119-AngularJS Filter Custom
code example:

index.html

https://www.w3schools.com/angular/angular_filters.asp

201603

w3s118-AngularJS Filter OrderBy

w3s118-AngularJS Filter OrderBy
code example:

index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>

</div>

</body>
</html>

https://www.w3schools.com/angular/angular_filters.asp

201603

w3s117-AngularJS Filter Match

w3s117-AngularJS Filter Match
code example:

index.html

https://www.w3schools.com/angular/angular_filters.asp

201603

w3s116-AngularJS Filter Letter Case

w3s116-AngularJS Filter Letter Case
code example:

index.html

https://www.w3schools.com/angular/angular_filters.asp

201603

w3s115-AngularJS RootScope

w3s115-AngularJS RootScope
code example:

index.html

https://www.w3schools.com/angular/angular_scopes.asp

201603

w3s114-AngularJS Scopes

w3s114-AngularJS Scopes
code example:

index.html

https://www.w3schools.com/angular/angular_scopes.asp

201603

w3s113-AngularJS Controller Methods

w3s113-AngularJS Controller Methods
code example:

index.html

https://www.w3schools.com/angular/angular_controllers.asp

201603

w3s112-AngularJS Model CSS Classes

w3s112-AngularJS Model CSS Classes
code example:

index.html

https://www.w3schools.com/angular/angular_model.asp

201603

w3s111-AngularJS Model Application Status

w3s111-AngularJS Model Application Status
code example:

[SCRIPTNAME]

https://www.w3schools.com/angular/angular_model.asp

201603

w3s110-AngularJS Model Validation

w3s110-AngularJS Model Validation
code example:

index.html

https://www.w3schools.com/angular/angular_model.asp

201603

w3s109-AngularJS Model Two-Way Data Binding

w3s109-AngularJS Model Two-Way Data Binding
code example:

index.html

https://www.w3schools.com/angular/angular_model.asp

201603

w3s108-AngularJS Directives Custom

w3s108-AngularJS Directives Custom
code example:

index.html

https://www.w3schools.com/angular/angular_directives.asp

201603

w3s107-AngularJS Directives Repeat

w3s107-AngularJS Directives Repeat
code example:

index.html

https://www.w3schools.com/angular/angular_directives.asp

201603

w3s106-AngularJS Directives Data Binding

w3s106-AngularJS Directives Data Binding
code example:

index.html

https://www.w3schools.com/angular/angular_directives.asp

201603

w3s105-AngularJS Internal JS Codes

w3s105-AngularJS Internal JS Codes
code example:

index.html

https://www.w3schools.com/angular/angular_modules.asp

201603

w3s104-AngularJS External JS Files

w3s104-AngularJS External JS Files
code example:

index.html

myApp.js

myCtrl.js

https://www.w3schools.com/angular/angular_modules.asp

201603

w3s103-AngularJS Expressions

w3s103-AngularJS Expressions
code example:

https://www.w3schools.com/angular/angular_expressions.asp

201603

w3s102- AngularJS Applications

w3s102- AngularJS Applications
code example:

https://www.w3schools.com/angular/angular_intro.asp

201603

w3s101-AngularJS Extends HTML

https://www.w3schools.com/angular/angular_intro.asp

201603

Wednesday, March 2, 2016

TP117-AngularJS - Internationalization

TP117-AngularJS - Internationalization
code examples:

<html>

<head>
<title>Angular JS Forms</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "StudentController">
{{fees | currency }} <br/><br/>
{{admissiondate | date }} <br/><br/>
{{rollno | number }}
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js"></script>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('StudentController', function($scope) {
$scope.fees = 100;
$scope.admissiondate = new Date();
$scope.rollno = 123.45;
});
</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_internationalization.htm

201603

TP116-AngularJS Custom Directives

TP116-AngularJS Custom Directives
code examples:

<html>

<head>
<title>Angular JS Custom Directives</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "StudentController">
<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>
</div>

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

<script>
var mainApp = angular.module("mainApp", []);

mainApp.directive('student', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

directive.scope = {
student : "=name"
}

directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");

var linkFunction = function($scope, element, attributes) {
element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}

return directive;
});

mainApp.controller('StudentController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.rollno = 1;

$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.rollno = 2;
});

</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm

201603

TP115-AngularJS Dependency Injection

TP115-AngularJS Dependency Injection
code examples:

<html>

<head>
<title>AngularJS Dependency Injection</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>

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

<script>
var mainApp = angular.module("mainApp", []);

mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});

mainApp.value("defaultInput", 5);

mainApp.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b;
}
return factory;
});

mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);

$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});

</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_dependency_injection.htm

201603

TP114-AngularJS Services

TP114-AngularJS Services
code examples:

<html>

<head>
<title>Angular JS Services</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b
}
return factory;
});

mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});

mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_services.htm

201603

TP113-AngularJS Scopes

TP113-AngularJS Scopes
code examples:

<html>
<head>
<title>Angular JS Forms</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>

<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>

<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>

</div>

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

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});

mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});

mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});

</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_scopes.htm

201603

TP112-AngularJS Views

TP112-AngularJS Views
code examples:

<html>

<head>
<title>Angular JS Views</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp">
<p><a href = "#addStudent">Add Student</a></p>
<p><a href = "#viewStudents">View Students</a></p>
<div ng-view></div>

<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>

<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>

<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.

when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).

when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).

otherwise({
redirectTo: '/addStudent'
});
}]);

mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});

mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});

</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_views.htm

201603

TP111-AngularJS AJAX

TP111-AngularJS AJAX
code examples:

index.html

<html>
<head>
<title>Angular JS Includes</title>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "" ng-controller = "studentController">

<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>

<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>

<script>
function studentController($scope,$http) {
var url = "data.txt";

$http.get(url).then( function(response) {
$scope.students = response.data;
});
}
</script>

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

</body>
</html>

data.txt

[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},

{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},

{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},

{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]

https://www.tutorialspoint.com/angularjs/angularjs_ajax.htm

201603

TP110 - AngularJS Includes

TP110 - AngularJS Includes code examples:

index.html

<html>

<head>
<title>Angular JS Includes</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="studentController">
<div ng-include="'main.html'"></div>
<div ng-include="'subjects.html'"></div>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: 500,

subjects: [{
name: 'Physics',
marks: 70
}, {
name: 'Chemistry',
marks: 80
}, {
name: 'Math',
marks: 65
}, {
name: 'English',
marks: 75
}, {
name: 'Hindi',
marks: 67
}],

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>

</body>

</html>

main.html

<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>

<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
</table>

subjects.html

<p>Subjects:</p>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>

<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>

https://www.tutorialspoint.com/angularjs/angularjs_includes.htm

201603

TP109- AngularJS Forms

TP109- AngularJS Forms
code examples:

<html>
<head>
<title>Angular JS Forms</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>

<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">

<form name = "studentForm" novalidate>
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input name = "firstname" type = "text" ng-model = "firstName" required>
<span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input name = "lastname" type = "text" ng-model = "lastName" required>
<span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>

<tr>
<td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
<span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show = "studentForm.email.$error.required">Email is required.</span>
<span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>

<tr>
<td>
<button ng-click = "reset()">Reset</button>
</td>
<td>
<button ng-disabled = "studentForm.firstname.$dirty &&
studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
studentForm.lastname.$invalid || studentForm.email.$dirty &&
studentForm.email.$invalid" ng-click="submit()">Submit</button>
</td>
</tr>

</table>
</form>
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "MaheshParashar@tutorialspoint.com";
}

$scope.reset();
});
</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_forms.htm

201603

TP108-AngularJS Modules

TP108-AngularJS Modules
code examples:

<html>

<head>
<title>Angular JS Modules</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">

<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>

<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>

<tr>
<td>Subject:</td>
<td>

<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>

<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>

</td>
</tr>
</table>

</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

</script>
</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_modules.htm

201603

TP107-AngularJS HTML DOM

TP107-AngularJS HTML DOM
code examples:

<html>

<head>
<title>AngularJS HTML DOM</title>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">

<table border = "0">
<tr>
<td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
</tr>

<tr>
<td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click Me!</button></td>
</tr>

<tr>
<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td><button ng-hide = "showHide2">Click Me!</button></td>
</tr>

<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>

</div>

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

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_html_dom.htm

201603

TP106-AngularJS Tables

TP106-AngularJS Tables
code examples:

<html>

<head>
<title>Angular JS Table</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">

<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>

<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>

<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>

<tr>
<td>Subject:</td>

<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>

<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>

</table>
</td>

</tr>
</table>

</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_tables.htm

201603

TP105-AngularJS Filters

TP105-AngularJS Filters
code examples:

<html>

<head>
<title>Angular JS Filters</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>

<tr>
<td>Enter last name: </td>
<td><input type = "text" ng-model = "student.lastName"></td>
</tr>

<tr>
<td>Enter fees: </td>
<td><input type = "text" ng-model = "student.fees"></td>
</tr>

<tr>
<td>Enter subject: </td>
<td><input type = "text" ng-model = "subjectName"></td>
</tr>
</table>
<br/>

<table border = "0">
<tr>
<td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
</tr>

<tr>
<td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
</tr>

<tr>
<td>fees: </td><td>{{student.fees | currency}}
</td>
</tr>

<tr>
<td>Subject:</td>

<td>
<ul>
<li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
</td>
</tr>
</table>

</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,

subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
],

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>

</body>
</html>

https://www.tutorialspoint.com/angularjs/angularjs_filters.htm

201603

TP104-AngularJS Controllers

TP104-AngularJS Controllers
code examples:

<html>

<head>
<title>Angular JS Controller</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>

You are entering: {{student.fullName()}}
</div>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>

</body>
</html>

ref: https://www.tutorialspoint.com/angularjs/angularjs_controllers.htm

201603

TP103-AngularJS Expressions

TP103-AngularJS Expressions
code examples:

<html>

<head>
<title>AngularJS Expressions</title>
</head>

<body>
<h1>Sample Application</h1>

<div ng-app = "" ng-init = "quantity = 1;cost = 30; student = {firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
<p>Expense on Books : {{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>

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

</body>
</html>

ref: https://www.tutorialspoint.com/angularjs/angularjs_expressions.htm

201603

Learn the powerful enterprise adaptable database:

Thursday, March 10, 2016

Thursday, March 3, 2016

Wednesday, March 2, 2016