ng-book 1DataBinding and First AngularJS Web Application

来源：互联网发布：淘宝一元秒杀网编辑：程序博客网时间：2024/05/16 19:51

第一种方法：代码在一个clock.html，独立实现

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}!</h1>
</div>
<script type="text/javascript">
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</body>
</html>

第二种方法：代码分两部分，第一部分view:_clockhtml,第二部分module:app.js

_clock.html

<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/angularjs/1.2.5/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock.now }}!</h1>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////////////////

app.js

app=angular.module("app",[]);
app.controller('MyController',function($scope){
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
})

0 0