簡(jiǎn)述AngularJS的控制器的使用
AngularJS應(yīng)用主要依賴(lài)于控制器來(lái)控制數(shù)據(jù)在應(yīng)用程序中的流動(dòng)??刂破鞑捎胣g-controller指令定義??刂破魇且粋€(gè)包含屬性/屬性和JavaScript對(duì)象的功能。每個(gè)控制器接受$scope參數(shù)指定應(yīng)用程序/模塊,由控制器控制。
<div ng-app="" ng-controller="studentController"> ... </div>
在這里,我們已經(jīng)聲明采用ng-controller指令的控制器studentController。作為下一步,我們將定義studentController如下
- studentController 定義 $scope 作為JavaScript對(duì)象參數(shù)。
- $scope 表示應(yīng)用程序,使用studentController對(duì)象。
- $scope.student 是studentController對(duì)象的屬性。
- firstName和lastName是$scope.student 對(duì)象的兩個(gè)屬性。我們已經(jīng)通過(guò)了默認(rèn)值給他們。
- fullName 是$scope.student對(duì)象的函數(shù),它的任務(wù)是返回合并的名稱(chēng)。
- 在fullName函數(shù)中,我們現(xiàn)在要學(xué)生對(duì)象返回組合的名字。
- 作為一個(gè)說(shuō)明,還可以定義控制器對(duì)象在單獨(dú)的JS文件,并把有關(guān)文件中的HTML頁(yè)面。
<script> function studentController($scope) { $scope.student = { firstName: "yiibai", lastName: "com", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script>
現(xiàn)在可以使用ng-model或使用表達(dá)式如下使用studentController學(xué)生的屬性。
- 現(xiàn)在有 student.firstName 和 student.lastname 兩個(gè)輸入框。
- 現(xiàn)在有 student.fullName()方法添加到HTML。
- 現(xiàn)在,只要輸入first name和lastname輸入框中輸入什么,可以看到兩個(gè)名稱(chēng)自動(dòng)更新。
Enter first name: <input type="text" ng-model="student.firstName"><br> Enter last name: <input type="text" ng-model="student.lastName"><br> <br> You are entering: {{student.fullName()}}
例子
下面的例子將展示使用控制器。
testAngularJS.html 文件內(nèi)容如下:
<html> <head> <title>Angular JS Controller</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="" ng-controller="studentController"> Enter first name: <input type="text" ng-model="student.firstName"><br><br> Enter last name: <input type="text" ng-model="student.lastName"><br> <br> You are entering: {{student.fullName()}} </div> <script> function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
輸出
在Web瀏覽器打開(kāi)textAngularJS.html,看到以下結(jié)果:
相關(guān)文章
AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例
本篇文章主要介紹了AngularJS通過(guò)ng-Img-Crop實(shí)現(xiàn)頭像截取的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Angular發(fā)布1.5正式版,專(zhuān)注于向Angular 2的過(guò)渡
Angular團(tuán)隊(duì)最近發(fā)布了Angular 1.5的正式版,該版本實(shí)現(xiàn)了一次重大的升級(jí),它讓仍在使用1.X版本的開(kāi)發(fā)者將能夠更容易地過(guò)渡到Angular 2的開(kāi)發(fā)2016-02-02AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法
這篇文章主要介紹了AngularJS使用帶屬性值的ng-app指令實(shí)現(xiàn)自定義模塊自動(dòng)加載的方法,結(jié)合實(shí)例形式分析了ng-app自動(dòng)加載我們自定義的模塊作為根模塊的操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01Angular4如何自定義首屏的加載動(dòng)畫(huà)詳解
Angular應(yīng)用程序在首次加載根組件時(shí)會(huì)在瀏覽器的顯示一個(gè)loading...動(dòng)畫(huà),下面這篇文章主要給大家介紹了關(guān)于Angular4如何自定義首屏加載動(dòng)畫(huà)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
最近一直在學(xué)習(xí)angularjs相關(guān)知識(shí),在學(xué)習(xí)過(guò)程中寫(xiě)了一個(gè)小demo,下面把代碼思路分享給大家,感興趣的朋友一起學(xué)習(xí)2016-04-04AngularJS equal比較對(duì)象實(shí)例詳解
這篇文章主要介紹了AngularJS API之equal比較對(duì)象的相關(guān)資料,需要的朋友可以參考下2016-09-09AugularJS從入門(mén)到實(shí)踐(必看篇)
下面小編就為大家?guī)?lái)一篇AugularJS從入門(mén)到實(shí)踐(必看篇)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
本篇文章主要介紹了ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04