<html ng-app="www">
<head>
<script data-require="angular.js@*" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
angular.module('www', []).
//Routing
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/f', {templateUrl: 'partial.html', controller: tt}).
when('/f/:q', {templateUrl: 'partial.html', controller: tt}).
otherwise({redirectTo: '/f'});
}]);
</script>
</head>
<body ng-controller="tt">
<script>
var scope;
//controller
function tt($scope ,$routeParams){
try{$scope.ahmed=$routeParams.q;}
catch(e){}
scope=$scope;
$scope.h="fffffffff";
//function
$scope.temp=function(){return "http://stackoverflow.com/questions/"+$routeParams.q;}
//$('input').fadeIn(2000).fadeOut(2000);
$scope.loadvcvcv=function(){
$scope.data=[{name:"marwan",Age:"50"},{name:"Ahmed",Age:"55"},{name:"mohamed",Age:"70"}]
}
$scope.loadvcvcv();
$scope.showtable=true;
$scope.h=[{name:"marwan",Age:"50"},{name:"Ahmed",Age:"55"},{name:"mohamed",Age:"70"}]
}
</script>
<!--two way binding -->
<input ng-model="h" />
<table ng-hide="showtable">
<tbody>
<tr>
<th></th>
<td>name</td>
<td>Age</td>
<!-- repeater and filters -->
</tr>
<tr ng-repeat="n in data">
<td>{{n.name}}</td>
<td>{{n.Age}}</td>
</tr>
</tbody>
</table>
<button ng-click="showtable=!showtable">show it</button>
<ul>
<input ng-model="hamada" />
<style>
/* css dynamically implemented */
.done-true{
color:green;
}
.done-false{
color:red;
}
input.ng-valid.ng-dirty{
background-color:green;
}
input.ng-invalid.ng-dirty{
background-color:red;
}
</style>
<!-- rotuing hashing -->
<a ng-repeat="g in h|filter:hamada" ng-show="showtable" href="#/f/{{$index}}">
<li href="loaction.path='#/f/{{g.name}}'" class="done-{{g.Age<50}}">{{g.name}}......{{g.Age}} <button ng-click="h.splice($index,1)">x delete me</button>
</li>
</a>
</ul>
<input ng-model="xyz" />
<input ng-model="d" />
<input type="button" ng-disabled="!xyz||!d" value="add " ng-click="h.push({name:xyz,Age:d});xyz='';d=''" />
<br />
<hr />
<!--form validation-->
<form name="f">
<input name="name" ng-model="n" required="" ng-maxlength="10" ng-minlength="2" />
<span ng-show="f.name.$error.required">this item is required</span>
<span ng-show="f.name.$error.maxlength">too long</span>
<span ng-show="f.name.$error.minlength">too short</span>
<input type="password" name="pass" ng-model="j" required="" ng-pattern="/^(?:(?=.*[a-z])(?:(?=.*[A-Z])(?=.*[\d\W])|(?=.*\W)(?=.*\d))|(?=.*\W)(?=.*[A-Z])(?=.*\d)).{8,}$/" />
<span ng-show="f.pass.$error.pattern">you must have atleast one upper</span>
<input type="email" name="email" ng-model="e" required="" />
<input type="url" name="site" ng-model="t" required="" />
<input type="number" name="sdd" ng-model="dd" required="" />
<input type="submit" ng-disabled="!f.$valid" />
</form>
<div ng-view=""></div>
</body>
</html>
// Code goes here
/* Styles go here */
<h2>hi</h2>
<p>hello {{ahmed}}</p>
<input ng-model="data[ahmed].name">
<input ng-model="data[ahmed].Age">