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...
Showing posts with label Angular JS. Show all posts
Showing posts with label Angular JS. Show all posts
Tuesday, December 20, 2016
Friday, August 26, 2016
26
Aug
Mouse events moves
ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave
mouse button is clicked
ng-mousedown
ng-mouseup
ng-cli...
26
Aug
Angular JS Events
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
Example:
<div ng-app="test" ng-controller="action">
<button ng-click="count = count+1 ">Click Me!</button>
<p>{{...
26
Aug
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',...
26
Aug
-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',...
26
Aug
<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'},
...
26
Aug
<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...
Thursday, August 11, 2016
11
Aug
<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,...
11
Aug
<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';...
11
Aug
<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'...
Tuesday, August 9, 2016
Name:<input id="txtname" type="text"/>
Welcome!
<script>
var txtipt = document.getElementById('txtname');
txtipt.addEventListener('keyup', function(){
var text = txtipt.value;
...
Wednesday, July 20, 2016
20
Jul
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...
20
Jul
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>
</...
20
Jul
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>
&...
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}}...
20
Jul
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>
</...
20
Jul
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...
20
Jul
Angular JS Overview:
Its is client side web application
Handle DOM and AJAX
write a CRUD application
databinding
basic templating directives
form validation
routing
Deep-linking
reusable compents
dependency injection
...
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...
20
Jul
Angular JS Advantages
Develop Across All Platforms
Speed & Performance
Incredible Tooling
Cross Platform supports...
Posts
