Angularjs
Extend your browser
Pete Bacon Darwin
Peter Bacon Darwin
-
Computer Programmer / Dad
- Freelance Developer
- Formerly .NET Specialist
- Now into Open Source
- Look after my kids, Lily and Zachary
-
AngularJS
- Google AngularJS team
- Founding Member of Angular-UI
- Published Author
In The Beginning…
-
1989 Web Browsers
-
1995 JavaScript
-
2005 AJAX
-
2006 jQuery
In the Future…
Web Browser == Application Platform
Single Page Applications (SPA)
Writing SPAs in JavaScript is...messy
The Real Problem - Browsers
- Designed To:
- Display Static Documents
- Navigate Hyperlinks
- Be Stateless
- We Need:
- Model Driven Views
- More Powerful Widgets
- State Management
Getting There...
- Object.Observe()
- Web Components
- History.pushState()
… what HTML would have been, had it been designed for applications.
… a Polyfill until Browsers catch up!
AngularJS - Core Features
- Unobtrusive Data Binding
- Just POJOs and dirty checking
- HTML (DOM) Templates
- Use tools you know ( Visual Studio )
- Reusable Components
- Extend the HTML syntax (directives)
- Dependency Injection
- Think AutoFac Framework
- Unit Testing
- Built-in Test Support (Karma)
- Useful Services
- $http, $q, $timeout
Exchange Rate Demo
Look down for steps...
0 - Simplest Example
- Load angular.js script
- Add ng-app directive
- Apply ng-model and ng-bind
- Use expressions and filters
<body ng-app>
Pounds: <input ng-model="from">
Euros: <span ng-bind="from * 1.953 | number : 2"></span>
<script src="../lib/angular/angular.js"></script>
</body>
1 - Choose Currency
- Apply Twitter Bootstrap CSS
- Use select directive
<select id="fromCurrency" ng-model="fromCurrency" class="span3">
<option value="0.661062">British Pound Sterling</option>
<option value="0.774538">Euro</option>
</select>
2 - Add Code-Behind and Tests
-
Create
app.js
– contains application code
-
Specify a root app module -
ng-app=”app”
-
Wire up the code-behind -
ng-controller=”AppController”
-
Use ng-options directive
- label is currency.name , value is currency
-
Unit test
calcCurrency()
independently from view
angular.module('app', []).controller('AppController', function($scope) {
$scope.currencies = [
{ name: 'British Pound Sterling', value: 0.661062 },
{ name: 'Euro', value: 0.774538 }
];
$scope.fromCurrency = $scope.currencies[0];
$scope.toCurrency = $scope.currencies[1];
$scope.calcCurrency = function() {
return $scope.fromVal / $scope.fromCurrency.value * $scope.toCurrency.value;
};
});
3 -
Trending Up!
Buy The Book!
angularjs extend your browser
By Pete Bacon Darwin
