-
Notifications
You must be signed in to change notification settings - Fork 55
/
Copy path00-2-spin.html
40 lines (38 loc) · 1.19 KB
/
00-2-spin.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<title>Taking AngularJS for a spin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
//we update the script to create an app.
var myApp = angular.module('myApp', []);
//we create a 'factory' which will provide the data
myApp.factory('Data', function(){
return {message: "Data from service"};
});
//we now modify our controllers to use the 'Data' factory
//to update the $scope, they can now communicate
function myCtrl($scope,Data){$scope.data = Data;}
function yourCtrl($scope,Data){
$scope.data = Data;
//here we also take the opportunity to define a function
//onto the scope
$scope.reversedMessage = function(toReverse){
return toReverse.split("").reverse().join("");
}
}
</script>
</head>
<body>
<div ng-app="myApp"><!--Changed name of ng-app-->
<div ng-controller="myCtrl">
Type in a message: <input type="text" ng-model="data.message">
<br /><h1><b>{{data.message}}</b></h1>
</div>
<div ng-controller="yourCtrl">
Type in a message: <input type="text" ng-model="data.message">
<br /><h1><b>{{reversedMessage(data.message)}}</b></h1>
</div>
</div>
</body>
</html>