码迷,mamicode.com
首页 > Web开发 > 详细

Angular JS 学习之控制器

时间:2016-11-15 00:43:55      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:angular   person   module   color   构造   控制器   文件   应用   script   

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>

Angular JS 学习之控制器

标签:angular   person   module   color   构造   控制器   文件   应用   script   

原文地址:http://www.cnblogs.com/hqutcy/p/6063882.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!