美文网首页编码世界程序员的那些事儿程序员
AngularJS入门教程-控制器(三)

AngularJS入门教程-控制器(三)

作者: 憨厚的老菜鸟 | 来源:发表于2016-06-12 08:48 被阅读65次

    通过上一节中的HelloWorld的示例,大家应该对AngularJS的语法有了一些了解,前面我说过,AngularJS是 MVC体系结构,今天就来介绍一下AngularJS的控制器(Controller),它负责响应于用户输入并执行交互数据模型对象。

    开发环境

    Sublime Text(建议使用)
    AngularJS-1.5.6

    AngularJS控制器

    不多说,直接上代码

    //html代码
    <div ng-app="count">
            <h1>两个数的相加</h1>
            <div id="add" ng-controller="add">
                加法:
                <input type="text" ng-model="one" placeholder="0">
                +
                <input type="text" ng-model="two" placeholder="0">
                = {{one*1 + two*1}}
            </div>  
    </div>
    

    新建一个js文件,可以命名为controller.js,也可以直接在html文件中写js代码,我习惯将js代码写在js文件里。

    //javascript代码
    angular.module('count',[])
    .controller('add',function($scope){
        $scope.one = 0;
        $scope.two = 0;
    })
    

    //javascript代码
    var app = angular.module('count',[]);
    app.controller('add',function($scope){
        $scope.one = 0;
        $scope.two = 0;
    })
    

    代码解释:
    从代码上可以看出来,这个Demo的功能是计算两个数相加。

    我们先来看一下javascript代码,

    创建一个模块:

    var app = angular.module('count',[]);
    

    这段代码是创建一个module应用模块,名为count,第二个参数是它的依赖模块列表,我们这里创建了一个独立的模块。

    创建一个控制器:

    app.controller('add',function($scope){
        $scope.one = 0;
        $scope.two = 0;
    })
    

    创建一个属于名为count模块的控制器,控制器的名称为add,一个应用模块可以包含多个控制器。构造函数可以获取$scope 对象,$scope用于存储所有controller 暴露的接口和方法,$scope会被Angular传递到视图和指令层。在本例中,$scope会接收视图中的one和two模型,然后再把这个两个参数传回视图。

    下面在来看下html代码

    ng-app指令:

    <div ng-app="count">
    

    之前介绍过ng-app这个指令,在本例中,ng-app的作用域是局部,并且,指定了一个count模块,意指在这个作用域中,只有count这个模块中的controller才会起作用。

    ng-controller指令:

    <div id="add" ng-controller="add">
    

    ng-controller有些类似于ng-app的作用,是控制器的作用范围。付给ng-controller的值,是指定一个控制器,如前面js代码中定义的控制器“add”。

    ng-model和双大括号表达式{{}}在上一节中已经介绍过了,这一节就不在另做说明了。

    给大家留个疑问,双大括号表达式为什么要写成

     {{one*1 + two*1}}
    

    相关文章

      网友评论

        本文标题:AngularJS入门教程-控制器(三)

        本文链接:https://www.haomeiwen.com/subject/iyjjdttx.html