###ANGULAR.JS
<html ng-app>
###Data Binding
<input type="text" ng-model="yourModel">
{{yourModel}}
####Default Value
{{name || "Maicol Llacson"}}
###Controllers (Model Scope)
<div ng-controller="controllerName">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<div ng-controller="anotherController">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var controllerName = function ($scope){
$scope.name = "Maicol Llacson";
$scope.age = 20;
};
var anotherController = function ($scope){
$scope.name = "Elbis Presli";
$scope.age = 20;
$scope.$watch('name',function(){
console.log($scope.name);
});
};
</script>
###Directives ####ng-show
<div>
<input type="checkbox" ng-model="checked"><label>Show?</label>
</div>
<div ng-show="checked">
Hello, world!
</div>
####ng-hide
<div>
<input type="checkbox" ng-model="checked"><label>Hide?</label>
</div>
<div ng-hide="checked">
Hello, world!
</div>
####ng-repeat
<div>
<input type="search" ng-model="search">
</div>
<div ng-controller="List">
<ul>
<li ng-repeat="person in people | filter:search">
{{person.name}} : {{person.age}}
</li>
</ul>
</div>
<script>
var List = function($scope) {
$scope.people = [
{name: "Tom", age:20},
{name: "Jeffrey", age:30},
{name: "Dan", age:60},
{name: "David", age:40},
{name: "Peter", age:50}
];
};
</script>
####ng-show
<span ng-show="$first">First</span>
<span ng-show="$last">Last</span>
<span ng-show="$middle">Middle</span>
####ng-click
<div>
<input type="search" ng-model="search">
</div>
<div ng-controller="List">
<ul>
<li ng-repeat="person in people | filter:search">
{{person.name}} : {{person.age}}
<button ng-click="remove($index)">x</button>
</li>
</ul>
<div>
<label>Name:</label><input ng-model="new_name">
<br>
<label>Age:</label><input type="number" ng-model="new_age">
<br>
<button ng-click="add()">Add</button>
</div>
</div>
<script>
var List = function($scope) {
$scope.people = [
{name: "Tom", age:20},
{name: "Jeffrey", age:30},
{name: "Dan", age:60},
{name: "David", age:40},
{name: "Peter", age:50}
];
$scope.add = function (){
$scope.people.push({
name: $scope.new_name,
age: $scope.new_age
});
$scope.new_name = '';
$scope.new_age = '';
};
$scope.remove = function (index){
$scope.people.splice(index,1);
}
};
</script>
####ng-change
<div ng-controller="Browser">
<div>
<label for="url">← → ∞</label>
<input value="edit/{{path}}">
</div>
<div>
<label>Update the url:</label>
<input ng-change="clean()" ng-model="path">
</div>
</div>
<script>
var Browser = function ($scope){
$scope.path = $scope.path.replace(/\s+/, '-') .replace(/[^a-z0-9-]/i,'');
};
</script>
####ng-options
<div ng-controller="Contacts">
<div>
<input type="search" ng-model="search">
</div>
</div>
<select ng-model="selected_person"
ng-options="person.name for person in people | filter:search">
<option value="">Choose a person:</option>
</select>
<br>
<div>
<label>Name:</label><input ng-model="selected_person.name">
<br>
<label>Number:</label ng-model="selected_person.number">
</div>
<script>
var Contacts = function ($scope) {
$scope.people = [
{name:'Hugo Sanchez', number: 01234},
{name:'Maicol Llacson', number: 43210},
{name:'Niño Bomba', number: 14320}
];
};
</script>
###Modules ####Modules Primer
<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<body>
<div ng-controller="Example">
{{name}}
</div>
<script>
angular.module('myApp',[]).controller('Example', function($scope){
$scope.name = "Hello World!":
});
</script>
</body>
</html>
####Dependency Injection
var a = function (b) {
b.name = "Lleims"
};
a.$inject = ['$scope'];
angular.module('myApp',[])
.controller('Example', ['$scope', function (s){
s.name = 'Lleims';
}]);