zoukankan      html  css  js  c++  java
  • Angular JS 学习之控制器

    1.AngularJS控制器 控制AngularJS的应用程序的数据;AngularJS控制器是常规的javaScript对象;

    2.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>

    姓名:{{firstName+""+lastName}}

    </div>

    <script>

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

    app.controller('myCtrl',function($scope){

      $scope.firstName="John";

      $scope.lastName="Doe";

    });

    </script>

    3.解释代码:

    **AngularJS应用程序由ng-app定义,应用程序在<div>内运行;

    **ng-controller="myCtrl"属性是一个AngularJS指令,用于定义一个控制器;

    **myCtrl函数是一个JavaScript函数;

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

    **在AngularJS中,$scope是一个应用象(属于应用变量和函数);

    **控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Model(模型)的对象;

    **控制器在作用域中创建了两个属性(firstName和lastName);

    **ng-model指令绑定输入域到控制器的属性(firstName和lastName);

    4.控制方法:控制器也可以有方法;

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

    名:<input type="text" ng-model="firstName"><br>

    姓:<input type="text' ng-model="lastName"><br>

    <br>

    姓名:{{fullName}}

    </div>

    <script>

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

    app.controller('personCtrl',function($scope){

      $scope.firstName="John";

      $scope.lastName="Doe";

      $scope.fullName=function(){

        return $scope.firstName+"  "+$scope.lastName;

      };

    });

    </script>

    5.外部文件中的控制器:在大型的应用程序中,通常把控制器存储在外部文件中;

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

    First Name:<input type="text" ng-model="firstName"><br>

    Last Name:<input type="text" ng-model="lastName"><br>

    <br>

    Full Name:{{firstName+" "+lastName}}

    </div>

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

  • 相关阅读:
    3js深入
    01课js初接触;
    弥合对象/关系之间的鸿沟(一)
    Spiral Matrix——螺旋矩阵
    原来···是不是高手,看try cathch都能看出来···
    Web视频分享处理类库的设计
    每个开发人员现在应该下载的十种必备工具
    使用C#得到局域网内所有主机名,IP地址,MAC地址,使用C# 实现查看所有系统事件
    IIS 错误 :“NETWORK SERVICE does not have write access” 解决办法
    配置Url Remap时发生Parser Error的解决办法
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6063882.html
Copyright © 2011-2022 走看看