簡述AngularJS的控制器的使用_AngularJS
AngularJS應用主要依賴控制器來控制資料在應用程式中的流動。控制器採用ng-controller指令定義。控制器是一個包含屬性/屬性和JavaScript物件的功能。每個控制器接受$scope參數指定應用程式/模組，由控制器控制。
<div ng-app="" ng-controller="studentController"> ... </div>
在這裡，我們已經聲明採用ng-controller指令的控制器studentController。作為下一步，我們將定義studentController如下
- studentController 定義 $scope 作為JavaScript物件參數。
- $scope 表示應用程序，使用studentController物件。
- $scope.student 是studentController物件的屬性。
- firstName和lastName是$scope.student 物件的兩個屬性。我們已經通過了預設值給他們。
- fullName 是$scope.student物件的函數，它的任務是傳回合併的名稱。
- 在fullName函數中，我們現在要學生物件回傳組合的名字。
- 作為說明，也可以定義控制器物件在單獨的JS文件，並把有關文件中的HTML頁面。
<script>
function studentController($scope) {
$scope.student = {
firstName: "yiibai",
lastName: "com",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
現在可以使用ng-model或使用表達式如下使用studentController學生的屬性。
- 現在有 student.firstName 和 student.lastname 兩個輸入框。
- 現在有 student.fullName()方法加入到HTML。
- 現在，只要輸入first name和lastname輸入方塊中輸入什麼，可以看到兩個名稱自動更新。
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 檔案內容如下：
<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>
輸出
在網頁瀏覽器開啟textAngularJS.html，看到以下結果：
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Windows 11 上正確校準 Xbox One 控制器的方法
Sep 21, 2023 pm 09:09 PM
由於Windows已成為首選的遊戲平台，因此確定其面向遊戲的功能就顯得尤為重要。其中之一是能夠在Windows11上校準XboxOne控制器。借助內建的手動校準，您可以擺脫漂移、隨機移動或效能問題，並有效地對齊X、Y和Z軸。如果可用選項不起作用，您可以隨時使用第三方XboxOne控制器校準工具。讓我們來了解一下！如何在Windows11上校準我的Xbox控制器？在繼續操作之前，請確保將控制器連接到電腦並更新XboxOne控制器的驅動程式。當您使用它時，也要安裝任何可用的韌體更新。 1.使用Wind
php如何使用CodeIgniter4框架？
May 31, 2023 pm 02:51 PM
PHP是一種非常流行的程式語言，而CodeIgniter4是一種常用的PHP框架。在開發Web應用程式時，使用框架是非常有幫助的，它可以加速開發過程、提高程式碼品質、降低維護成本。本文將介紹如何使用CodeIgniter4框架。安裝CodeIgniter4框架CodeIgniter4框架可以從官方網站（https://codeigniter.com/）下載。下
從零開始學習Laravel：控制器方法呼叫詳解
Mar 10, 2024 pm 05:03 PM
從零開始學習Laravel：控制器方法呼叫詳解在Laravel的開發中，控制器是一個非常重要的概念。控制器起到了連接模型和視圖的橋樑作用，負責處理來自路由的請求，並返回相應的資料給視圖展示。控制器中的方法可以被路由調用，這篇文章將詳細介紹如何編寫並調用控制器中的方法，同時會提供特定的程式碼範例。首先，我們需要建立一個控制器。可以使用Artisan命令列工具來生
什麼叫laravel控制器
Jan 14, 2023 am 11:16 AM
在laravel中，控制器（Controller）是一個類，用來實現一定的功能；控制器能將相關的請求處理邏輯組成一個單獨的類別。控制器中存放中一些方法，實現一定的功能，透過路由呼叫控制器，不再使用回呼函數；控制器被存放在「app/Http/Controllers」目錄中。
2022年最新5款的angularjs教學從入門到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。
Laravel學習指南：控制器方法呼叫的最佳實踐
Mar 11, 2024 am 08:27 AM
在Laravel學習指南中，控制器方法的呼叫是一個非常重要的主題。控制器扮演著連接路由和模型的橋樑的角色，在應用程式中起著至關重要的作用。本文將介紹控制器方法呼叫的最佳實踐，並提供具體的程式碼範例幫助讀者更好地理解。首先，讓我們來了解控制器方法的基本結構。在Laravel中，控制器類別通常存放在app/Http/Controllers目錄下，每個控制器類別包含多個
使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗
Jun 27, 2023 pm 07:37 PM
在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效
如何在Symfony框架中使用控制器的參數？
Jun 04, 2023 pm 03:40 PM
Symfony框架是一個受歡迎的PHP框架，它是基於MVC（模型-視圖-控制器）架構設計的。在Symfony中，控制器是負責處理Web應用程式請求的關鍵元件之一。控制器中的參數在處理請求時非常有用，本文將介紹如何在Symfony框架中使用控制器的參數。控制器參數的基礎知識控制器的參數是透過路由傳遞到控制器中的。路由是一個將URI（統一資源標識符）映射到控制器和
