<!DOCTYPE html>
<html>
<head>
<title>Angular DEMO 1</title>
<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" >
<h1>Hello,{{name}}!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular DEMO 2</title>
<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" >
Say hello to : <input type="text" ng-model="name" />
<h1>Hello,{{name}}!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular DEMO 3</title>
<link type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
</head>
<body ng-app="app" >
<div ng-controller="HelloCtrl">
Say hello to : <input type="text" ng-model="name" />
<h1>Hello,{{name}}!</h1>
<h1>Hello,{{getName()}}!</h1>
</div>
<script>
angular.module('app',[])
.controller('HelloCtrl',['$scope',function($scope){
$scope.name='World';
$scope.getName=function(){
return $scope.name;
}
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular DEMO 4</title>
<link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<style type="text/css">
.text-warning{
color:red;
}
</style>
</head>
<body ng-app="app" >
<div class="container" ng-controller="Demo4Ctrl">
<div class="row">
<p>Remaining:<span ng-class="{'text-warning':shoudWarn()}" ng-bind="remain()"></span></p>
<textarea ng-model="text">{{text}}</textarea>
</div>
<div class="row">
<button ng-disabled="!hasValidLength()" class="btn btn-primary" ng-click="send()">Send</button>
<button class="btn btn-warning" ng-click="clear()">Clear</button>
</div>
</div>
<script>
angular.module('app',[])
.controller('Demo4Ctrl',function($scope){
$scope.text="";
var MAX_LENGTH=20;
var WARN_THRESHOLD = 5;
$scope.remain = function(){
return MAX_LENGTH - $scope.text.length;
};
$scope.hasValidLength=function(){
return $scope.text.length<=MAX_LENGTH;
};
$scope.shoudWarn=function(){
return $scope.remain()<WARN_THRESHOLD;
}
}]);
</script>
</body>
</html>
tips：
原文链接：https://www.f2er.com/angularjs/147804.html