Angular First page

Posted on   |   In 
<!doctype html>
<html ng-app="firstApp">

<head>
    <title>First AngularJS App</title>
</head>

<body>
    <div ng-controller="FirstController">
        <span>Name:</span>
        <input type="text" ng-model="first">
        <input type="text" ng-model="last">
        <button ng-click="updateMessage()">Message</button>
        <hr> {{heading + message}}
    </div>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="/javascripts/first.js"></script>
</body>

</html>

大的范围：

ng-app 对应的一个module

module里应该有多个controller 就是要变化的局部 dom

controller里面提供Data

Data变前台变

ng-model 对应后天变量

ng-click ng事件

对应js：

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
  $scope.first = 'Some';
  $scope.last = 'One';
  $scope.heading = 'Message: ';
  $scope.updateMessage = function() {
    $scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
  };
});

controller里对scope（这是controller自己的scope） 里的事件和数据提供实现