AngularJS入门-（7）控制器

最新推荐文章于 2019-01-11 14:17:17 发布

炽天使_1985

最新推荐文章于 2019-01-11 14:17:17 发布

阅读量221

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/wzjisking/article/details/76533756

版权

AngularJS 专栏收录该内容

11 篇文章

订阅专栏

控制器介绍

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myController">

    姓名:  <input type="text" ng-model="name"><br>
    年龄:  <input type="text" ng-model="age"><br>
    <br>
    姓名:年龄: {{name + " " + age}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope) {
        $scope.name = "小刚";
        $scope.age = "18";
    });
</script>

</body>
</html>

AngularJS 应用程序由 ng-app 定义。
ng-controller=”myController” 属性是一个 AngularJS 指令。用于定义一个控制器。
myController函数是一个 JavaScript 函数。
AngularJS 使用 $scope 对象来调用控制器。在 AngularJS 中，$ scope 是一个应用对象。控制器的 $scope 用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (name 和 age )。
ng-model 指令绑定输入域到控制器的属性（name 和 age ）。

控制器方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

    姓名: <input type="text" ng-model="name"><br>
    年龄: <input type="text" ng-model="age"><br>
    <br>
    姓名：年龄: {{introduce()}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.name = "小刚";
        $scope.age = "18";
        $scope.introduce = function() {
            return $scope.name + " " + $scope.age;
        }
    });
</script>

</body>
</html>

外部文件中的控制器

（1）html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

    姓名: <input type="text" ng-model="name"><br>
    年龄: <input type="text" ng-model="age"><br>
    <br>
    姓名：年龄: {{introduce()}}

</div>

<script src="js/personController.js"></script>

</body>
</html>

（2）js文件

/**
 * Created by boy on 2017/7/31.
 */

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.name = "小刚";
    $scope.age = "18";
    $scope.introduce = function() {
        return $scope.name + " " + $scope.age;
    }
});