zoukankan      html  css  js  c++  java
  • 【06】AngularJS 控制器

    AngularJS 控制器


     AngularJS 控制器 控制 AngularJS 应用程序的数据。

     AngularJS 控制器是常规的 JavaScript 对象


    AngularJS 控制器

    AngularJS 应用程序被控制器控制。

    ng-controller 指令定义了应用程序控制器。

    控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

     

    1. <div ng-app="myApp" ng-controller="myCtrl">
    2. 名:<input type="text" ng-model="firstName"><br>
    3. 名:<input type="text" ng-model="lastName"><br>
    4. <br>
    5. 姓名:{{firstName +" "+ lastName}}
    6. </div>
    7. <script>
    8. var app = angular.module('myApp',[]);
    9. app.controller('myCtrl',function($scope){
    10. $scope.firstName ="John";
    11. $scope.lastName ="Doe";
    12. });
    13. </script>
     

    应用解析:

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

    ng-controller="myCtrl" 是一个 AngularJS 指令。用于定义一个控制器。

    myCtrl 函数是一个 JavaScript 函数。

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

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

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

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

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


    控制器方法

    上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

    控制器也可以有方法(变量和函数):(魔芋:可以自定义方法)

     

    1. <div ng-app="myApp" ng-controller="personCtrl">
    2. 名:<input type="text" ng-model="firstName"><br>
    3. 姓:<input type="text" ng-model="lastName"><br>
    4. <br>
    5. 姓名:{{fullName()}}
    6. </div>
    7. <script>
    8. var app = angular.module('myApp',[]);
    9. app.controller('personCtrl',function($scope){
    10. $scope.firstName ="John";
    11. $scope.lastName ="Doe";
    12. $scope.fullName =function(){
    13. return $scope.firstName +" "+ $scope.lastName;
    14. }
    15. });
    16. </script>
     

    外部文件中的控制器

    在大型的应用程序中,通常是把控制器存储在外部文件中。

    只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可:

    1. <div ng-app="myApp" ng-controller="personCtrl">
    2. FirstName:<input type="text" ng-model="firstName"><br>
    3. LastName:<input type="text" ng-model="lastName"><br>
    4. <br>
    5. FullName:{{firstName +" "+ lastName}}
    6. </div>
    7. <script src="personController.js"></script>
     personController.js 
    1. angular.module('myApp',[]).controller('personCtrl',function($scope){
    2. $scope.firstName ="John",
    3. $scope.lastName ="Doe",
    4. $scope.fullName =function(){
    5. return $scope.firstName +" "+ $scope.lastName;
    6. }
    7. });
     

    其他实例

    以下实例创建一个新的控制器文件:

    1. angular.module('myApp',[]).controller('namesCtrl',function($scope){
    2. $scope.names =[
    3. {name:'Jani',country:'Norway'},
    4. {name:'Hege',country:'Sweden'},
    5. {name:'Kai',country:'Denmark'}
    6. ];
    7. });
     

    保存文件为namesController.js:

    然后,在应用中使用控制器文件:

     

    1. <div ng-app="myApp" ng-controller="namesCtrl">
    2. <ul>
    3. <li ng-repeat="x in names">
    4. {{ x.name +', '+ x.country }}
    5. </li>
    6. </ul>
    7. </div>
    8. <script src="namesController.js"></script>
     





  • 相关阅读:
    日常学习随笔-数组、单链表、双链表三种形式实现队列结构的基本操作(源码注释)
    代码重构之单元测试
    C# yield return 用法与解析
    MVC学习手册之数据注解与验证
    C#数字图像处理算法学习笔记(三)--图像几何变换
    关于变量名与类名同名问题
    C# 计时器
    C#入门--索引器
    C#入门--字段与属性
    var与dynamic
  • 原文地址:https://www.cnblogs.com/moyuling/p/5206871.html
Copyright © 2011-2022 走看看