AngularJS学习之旅—AngularJS 控制器(六)

最新推荐文章于 2024-08-15 08:55:57 发布

weixin_30511039

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/JamelAr/p/10288911.html

版权

1、AngularJS 控制器
　　AngularJS 应用程序被控制器控制。
　　ng-controller 指令定义了应用程序控制器。
　　控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

2、应用解析
　　AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
　　ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
　　myCtrl 函数是一个 JavaScript 函数。
　　AngularJS 使用$scope 对象来调用控制器。
　　在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
　　控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/angular.min.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <!-- AngularJS 控制器 -->
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
        <br/>
        <br/>
        <br/>
        <!-- 控制器方法 -->
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{fullName()}}
        <br/>
        <br/>
        <br/>
        <!-- 外部引用js -->
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{fullName()}}
    </div>
</body>

</html>
<script src="js/AngularJS 控制器.js"></script>

AngularJS 控制器.js

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    //AngularJS 控制器
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    //控制器方法
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

页面

转载于:https://www.cnblogs.com/JamelAr/p/10288911.html

weixin_30511039

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习之旅—AngularJS 控制器(六)

1、AngularJS 控制器　　AngularJS 应用程序被控制器控制。　　ng-controller 指令定义了应用程序控制器。　　控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。<div ng-app="myApp" ng-controller="myCtrl">名: <input type="tex...
复制链接

扫一扫