Working With AngularJS
Created by Tom Wilson / @twilson63
What is AngularJS?
A JavaScript Web Framework
JavaScript without a Framework
JavaScript with a Framework
Superheroic MVW Framework
Features
- Data-binding
- Dependency Injection
- HTML Templates
- and more...
Data-Binding
<div ng-app>
<h1>{{title}}</h1>
<input type="text" ng-model="title">
</div>
Live Demo
Dependency Injection
function MainCtrl($scope, $http) {
$http.get('http://jsbin.com/abaqip')
.success(function(data) {
$scope.repos = data;
});
}
HTML Template
<ul>
<li ng-repeat="repo in repos" >
{{name}}
</li>
</ul>
Live Demo
Routing with ng-view
<body ng-app="MyApp">
<ng-view></ng-view>
</body>
$routeProvider
angular.module('MyApp', [])
.config(function($routeProvider) {
$routeProvider
.when('/', { template: 'main.html', controller: 'MainCtrl'})
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl'})
})
Live Demo
Filters
<input type="text" ng-model="search">
<ul>
<li ng-repeat="repo in repos | filter:search | orderBy: 'name'" >
{{name}}
</li>
</ul>
Blink!
<blink>Like its 1999</blink>
Directives
angular.module('MyApp', [])
.directive('blink', function() {
return {
template: '<marquee scrollamount="100%">Blink!</marquee>'
}
});