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
Intro to AngularJS
By liviro
Intro to AngularJS
- 871