Angular学习（4）——Controller

谁借莪１个温暖的怀抱￠ 2022-08-08 06:28 134阅读 0赞

### 什么是Controller? ###

简单来说，Controller就是控制页面显示的函数。Controller中变量的变化会导致页面自动刷新。

### Controller的示例 ###

让我们看下下面的代码：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Angular 控制器</title>
        <script src="bower_components/angular/angular.js"></script>
        <script src="js/controller4.js"></script>
    </head>
    <body ng-app="myApp">
    <div ng-controller="myController">
        <h4>加减程序</h4>
        <button ng-click="add(1)" class="button">加</button>
        <a ng-click="subtract(1)" class="button alert">减</a>
        <h4>当前结果: {
        { counter }}</h4>
    </div>
    
    </body>
    </html>

div中，定义了ng-controller为myController，意思是div中的view由myController控制，myController定义在controller4.js中。

页面中，还有ng-click事件，即鼠标单击事件，ng-click可以用于button, <a>等，<image>上也可以定义ng-click 指令(directive)，如：

<img ng-src="{
        {img}}" ng-click="setImage(img)">

controller4.js的源码如下：

/**
     * Created by PaulHuang on 15/5/9.
     */
    var myApp=angular.module('myApp', []);
    
    myApp.controller('myController', function($scope){
            $scope.counter=0;
            $scope.add=function(amount){
                $scope.counter=$scope.counter+amount;
            };
            $scope.subtract=function(amount){
                $scope.counter=$scope.counter-amount;
    
            };
        }
    );

注意，$scope.add对应HTML中的ng-click add事件，写法中用了=：

$scope.add=function(amount){
                $scope.counter=$scope.counter+amount;
            };

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular controller的使用

在angular.js最常用的模块就是控制器了，通常我们会这样使用： var myAppModule = angular.module('myApp', \[\]);

谁借莪１个温暖的怀抱￠/ 2022年08月25日 05:13/ 0 赞/ 153 阅读

相关 Angular学习（4）——Controller

什么是Controller? 简单来说，Controller就是控制页面显示的函数。Controller中变量的变化会导致页面自动刷新。 Controlle

谁借莪１个温暖的怀抱￠/ 2022年08月08日 06:28/ 0 赞/ 135 阅读

相关 [angular]指令之5controller

<!DOCTYPE html> <html lang="en" ng-app="testDirectiveController"> <head>

逃离我推掉我的手/ 2022年07月13日 03:16/ 0 赞/ 160 阅读

相关 angular2升级angular4

angular2升级到angular4 angular2升级到angular4有必要吗？答案是很有必要。升级到4不会在像angular1升级到angular2那样麻烦，而

「爱情、让人受尽委屈。」/ 2022年06月13日 00:53/ 0 赞/ 193 阅读

相关 Angular 4 学习系列（1）

Angular 4 学习系列（一）三月前，尝试Angular 4开发程序，使用Angular 4后，顿觉如有神助，开发速度大幅提高。开发期间，看了无数Angular 4

比眉伴天荒/ 2022年06月08日 06:56/ 0 赞/ 194 阅读

相关移动端学习之初始化-angular4的学习

最近在学习angular4感觉也没有那么难啦，好奇移动端到底可以做出啥，继续学习中…… ![这里写图片描述][SouthEast] [SouthEast]: /imag

﹏ヽ暗。殇╰゛Y/ 2022年06月02日 07:17/ 0 赞/ 175 阅读

相关 angular4.x学习笔记--指令

指令 Angular的指令概念跟AngularJS的指令差不多，最重要的区别在于Angular中的组件继承指令，算是特殊的指令。我们看下用指令的方式去写组件的简单例子：

- 日理万妓/ 2022年05月28日 01:13/ 0 赞/ 214 阅读

相关 angular4.x学习笔记--模块

模块 Angular很重要的概念之一仍然是模块。Angular整个框架就是由很多个模块组成的，而不同的模块需要从不同的地方导入。打开`package.json`文件，可以

不念不忘少年蓝@/ 2022年05月28日 01:13/ 0 赞/ 251 阅读

相关 Angular4笔记

Angular4笔记参考资料： [Angular 4.0 架构详解][Angular 4.0] [Angular 4.0 内置指令全攻略][Angular

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 01:57/ 0 赞/ 229 阅读

相关 Angular4+ echarts

【前言】最近接到了一个任务就是把前端的表格改成echarts折线图的样式。【过程】 1.添加插件 echart cnpm install echarts --sa

怼烎@/ 2022年04月22日 11:26/ 0 赞/ 221 阅读