Angular.js
Backed by Google
- Web Components
- Extending HTML beyond markup
- Modular Code
MVW Framework
Model, View, Whatever works for you
Two Way Data Binding
- Changes to Model update the DOM
- Changes to DOM update the Model
- jQuery manually manipulates the DOM
- Angular.js automatically updates the DOM
Hello World
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
</head>
<body ng-app="myapp">
<div >
<input type="text" name="name" value="" ng-model="title">
<h2>Hello {{title}} !</h2>
</div>
<!-- Angular.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!-- Init JS -->
<script>
angular.module("myapp", []);
</script>
</body>
</html>
Controller
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Angular</title>
</head>
<body ng-app="myapp">
<div ng-controller="helloCtrl" >
<input type="text" name="name" value="" ng-model="title">
<h2>Hello {{title}} !</h2>
</div>
<!-- Angular.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!-- Init JS -->
<script>
angular.module("myapp", [])
.controller('helloCtrl',['$scope', function($scope){
$scope.title = "World";
}]);
</script>
</body>
</html>
Model
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Angular</title>
</head>
<body ng-app="myapp">
<div ng-controller="helloCtrl" >
<input type="text" name="name" value="" ng-model="greeting.title">
<h2>Hello {{greeting.title}} !</h2>
<pre>{{greeting | json}}</pre>
</div>
<!-- Angular.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!-- Init JS -->
<script>
var app = angular.module("myapp", []);
// Model Generator
app.factory( 'dataService', function (){
var get = function(){
return {
title: "World"
};
};
return {
get: get
};
});
// Controller
app.controller('helloCtrl',['$scope', 'dataService', function($scope, dataService){
$scope.greeting = dataService.get();
}]);
</script>
</body>
</html>
ng-repeat
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<style>
.red {
color: #b54040;
}
.blue {
color: #3e43c5;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="itemsCtrl" >
<h2>Super Sweet List of Stuff</h2>
<ul>
<li ng-repeat="item in items" ng-class="item.class">{{item.title}} - {{item.value}}</li>
</ul>
</div>
<!-- Angular.js CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<!-- Init JS -->
<script>
var app = angular.module("myapp", []);
// Model Generator
app.factory( 'dataService', function (){
var get = function(){
return [
{
title: "Item One",
value: "a Val",
class: "blue"
},{
title: "Item Two",
value: "another Val",
class: "red"
},{
title: "Item Three",
value: "a better Val",
class: "red"
},{
title: "Item Four",
value: "the best Val",
class: "blue"
}
]
};
return {
get: get
};
});
// Controller
app.controller('itemsCtrl',['$scope', 'dataService', function($scope, dataService){
$scope.items = dataService.get();
}]);
</script>
</body>
</html>