学习angular.js之：ng-controller和$scope对象 

<body>
    <div ng-app="myapp" ng-controller="myctrl">
        <p>名：<input type="text" ng-model="firstname"></p>
        <p>姓：<input type="text" ng-model="lastname"></p>
        姓名：{{lastname+firstname}}
    </div>
    <script type="text/javascript">
        var app = angular.module("myapp",[]);
        app.controller("myctrl",function($scope){
            $scope.firstname = "小红";
            $scope.lastname = "李";
        });    
    </script>
</body>

模块（Module） 定义了 AngularJS 应用；

控制器（Controller） 用于控制 AngularJS 应用；

ng-app指令定义了应用；

ng-controller 定义了控制器。

 

当你在 AngularJS 创建控制器（Controller）时，你可以将 $scope 对象当作一个参数传递

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如：{{lastname+firstname}}

 

Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

如果你修改了视图，模型和控制器也会相应更新：

 1 <body>
 2     <div ng-app="myapp" ng-controller="myctrl">
 3         <input type="text" ng-model="name">
 4         <h1>{{sayHi}}</h1>
 5         <button ng-click="sayHello()">点击一下</button>
 6     </div>
 7     <script type="text/javascript">
 8         var app = angular.module("myapp",[]);
 9         app.controller("myctrl",function($scope){
10             $scope.name = "Nichlas"
11             $scope.sayHello = function(){
12                 $scope.sayHi = "你好"+ $scope.name + "!";
13             }
14         });
15     </script>
16 </body>

 

视图效果：

修改视图中input内容并且点击一下，h1内容也会相应改变：

 

posted @ 2017-09-19 17:04  WentingC  阅读(323)  评论(0)  编辑  收藏  举报