<!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：
