**** 以下都是完整的小案例，只需在引入angularjs文件的位置修改一下即可
<body ng-app="myApp">
<p>多个控制器</p> <div ng-controller="Ctrl1"> <p>{ {greeting.text}}, Angular</p> </div> <div ng-controller="Ctrl2"> <p>{ {greeting.text}}, Ctrl2</p> <p>{ {program.text}}, program</p> </div> <script src="js/angular-1.3.0.js"></script> <script> /* function Ctrl1($scope, $rootScope){ $scope.greeting = { text:"Hello" } $rootScope.program = { text:"angularjs" }; } function Ctrl2($scope){ $scope.greeting = {text:"Good morning"}; } */ var app = angular.module("myApp", []); app.controller("Ctrl1", function($scope, $rootScope){ $rootScope.greeting = { text:"Hello" }; }); app.controller("Ctrl2", function($scope){ $scope.program = { text:"text2" }; }); </script></body>**************************************
<body ng-app="myApp">
<div ng-controller="formCtrl">
<form style="padding-left:20px;"> <br>name: <input type="text" placeholder="{ {name}}"><br><br> password: <input type="text" placeholder="{ {password}}"><br><br> <input type="checkbox" ng-model="autoLogin">自动登录<br><br> <button type="button" ng-click="showInfo()">submit</button> </form> <div> <p> name: { {name}}</p> <p> password: { {password}}</p> </div> </div> <script src="js/angular-1.3.0.js"></script> <script> var app = angular.module("myApp", []); app.controller("formCtrl", ["$scope", function($scope){ $scope.name = "Runoob"; $scope.password = "Runoob"; $scope.autoLogin = true; $scope.showInfo = function(){ $scope.name = "angular"; $scope.password = "angular"; $scope.autoLogin = false; } }]); </script></body>
****************************************
// 关键字：ng-class, ng-click
// css 样式
<style>
.bgGreen{background:green;color:white;} .bgOrange{background:orange;color:white;} </style><body ng-app="myApp">
<div ng-controller="myCtrl">// 注意：当 isGreen = true 时，增加bgGreen类，当 isOrange = true 时，增加bgOrange类
<p ng-class='{bgGreen:isGreen, bgOrange:isOrange}'>{ {text}}</p> <button ng-click="orange()">orange</button><br> <button ng-click="green()">green</button><br> <button ng-click="resetBtn()">reset</button> </div> <script src="js/angular-1.3.0.js"></script> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope){ $scope.text = "Hello, Angular"; $scope.isGreen = false; $scope.isOrange = false; $scope.orange = function(){ $scope.isOrange = true; $scope.isGreen = false; } $scope.green = function(){ $scope.isGreen = true; $scope.isOrange = false; } $scope.resetBtn = function(){ $scope.isOrange = false; $scope.isGreen = false; } }]); </script></body>