AngularJS(02)---控制器

最新推荐文章于 2023-07-17 14:36:24 发布

KaGISer

最新推荐文章于 2023-07-17 14:36:24 发布

阅读量239

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/reality_fei/article/details/50314955

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接着上一篇的例子，我们来了解一下控制器

AngularJS控制器

AngularJS applications通过控制器进行控制。

ng-controller指令定义了一个application的控制器。

一个控制器就是一个JavaScript对象，它可以通过标准的JavaScript对象构造函数来创建。

<!doctype html>
<html>

<head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        First Name:
        <input type="text" ng-model="firstName">
        <br> Last Name:
        <input type="text" ng-model="lastName">
        <br>
        <br> Full Name: {{firstName + " " + lastName}}
    </div>
    <div>
    	<p>{{firstName}}</p>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "Danel";
        $scope.lastName = "Green";
    });
    </script>
</body>

</html>

AngularJS application通过ng-app="myApp"来定义。该application的有效作用域处于ng-app所在的<div>中。

ng-controller="myCtrl"属性即一个AngularJS指令，它定义了一个控制器。

myCtrl函数是一个普通的JavaScript函数。

AngularJS使用$scope对象来调用控制器。

在AngularJS中，$scope是一个application对象（即application变量和函数的所有者）。

控制器包含两个属性（或者叫变量）：firstName和lastName。它们被附加到$scope对象上。

ng-model指令将input标签的值绑定到控制器的属性上（firstName和lastName）。

控制器的方法

上面的例子展示了控制器对象包含两个属性：lastName和firstName。

控制器也可以包含方法（将函数赋值给变量）：

<!doctype html>
<html ng-app="myApp">

<head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>

<body>
    <div ng-controller="personCtrl">
        First Name:
        <input type="text" ng-model="firstName">
        <br> Last Name:
        <input type="text" ng-model="lastName">
        <br>
        <br> Full Name: {{fullName()}}
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "Danel";
        $scope.lastName = "Green";
        $scope.fullName = function() {
            return $scope.firstName + " " + $scope.lastName;
        }
    });
    </script>
</body>

</html>

在大型应用中，常常会将控制器代码写在外部文件中。将<script>标签中的代码拷贝到personController.js外部文件中即可

KaGISer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(02)---控制器

接着上一篇的例子，我们来了解一下控制器AngularJS控制器AngularJS applications通过控制器进行控制。ng-controller指令定义了一个application的控制器。一个控制器就是一个JavaScript对象，它可以通过标准的JavaScript对象构造函数来创建。 First Name:
复制链接

扫一扫

专栏目录