Columbia Creates:
Intro to AngularJS
September 29, 2014
P V
Recap
HTML Base
http://bit.ly/1vqrqiv<!DOCTYPE html><html><head><title>AngularJS Demo</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script><script> /* Javascript goes here*/ </script></head><body><p>Hello World!</p></body></html>
MVC Pattern
View
<!DOCTYPE html><html><head><title>AngularJS Demo</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script><script> /* Javascript goes here*/ </script></head><body ng-app="angularDemo"><p>Hello World!</p><p>10 plus 5 equals {{10+5}}</p></body></html>
View
What just happened?
- Declared ng-app in body of page
- Expression binding via {{}}
View + Model
<!DOCTYPE html><html><head><title>AngularJS Demo</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script><script> /* Javascript goes here*/ </script></head><body ng-app><input type="text" ng-model="name" placeholder="What's your name?" /><p>Hello {{name}}!</p></body></html>
View + Model + Controller
<!DOCTYPE html><html><head><title>AngularJS Demo</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script><script>angular.module('demoApp', []).controller('NameController', ['$scope', function($scope) {$scope.name = 'Polina';}]);</script></head><body ng-app="demoApp"><div ng-controller="NameController"><input type="text" ng-model="name" placeholder="What's your name?" /><p>Hello {{name}}!</p></div></body></html>
AngularJS Directives
On a high level: markers on a DOM elementÂ
that add AngularJS behavior to that element.
Examples:
- ng-model
- ng-show
- ng-repeat