AngularJS基礎學習筆記之控制器_AngularJS-js教程-PHP中文網

首頁

web前端

js教程

AngularJS基礎學習筆記之控制器_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:59 PM

angularjs 控制器

AngularJS控制器用來控制AngularJS applications的資料。

　　AngularJS控制器就是普通的JavaScript物件。

AngularJS控制器
　　AngularJS applications透過控制器進行控制。

　　ng-controller指令定義了一個application的控制器。

　　一個控制器就是一個JavaScript對象，它可以透過標準的JavaScript物件建構函數來建立。

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

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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

登入後複製

代碼解釋：

　　AngularJS application透過ng-app="myApp"來定義。該application的有效作用域處於ng-app所在的

中。

　　ng-controller="myCtrl"屬性即一個AngularJS指令，它定義了一個控制器。

　　myCtrl函數是一個普通的JavaScript函數。

　　AngularJS使用$scope物件來呼叫控制器。

　　在AngularJS中，$scope是一個application物件（即application變數和函數的擁有者）。

　　控制器包含兩個屬性（或稱為變數）：firstName和lastName。它們被附加到$scope物件上。

　　ng-model指令將input標籤的值綁定到控制器的屬性上（firstName和lastName）。

控制器的方法
　　上面的範例展示了控制器物件包含兩個屬性：lastName和firstName。

　　控制器也可以包含方法（將函數賦值給變數）：

<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: {{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>

登入後複製

將控制器放在外部檔案
　　在大型應用中，常常會將控制器程式碼寫在外部檔案中。

　　將

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1421

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

Related knowledge

Windows 11 上正確校準 Xbox One 控制器的方法 Sep 21, 2023 pm 09:09 PM

由於Windows已成為首選的遊戲平台，因此確定其面向遊戲的功能就顯得尤為重要。其中之一是能夠在Windows11上校準XboxOne控制器。借助內建的手動校準，您可以擺脫漂移、隨機移動或效能問題，並有效地對齊X、Y和Z軸。如果可用選項不起作用，您可以隨時使用第三方XboxOne控制器校準工具。讓我們來了解一下！如何在Windows11上校準我的Xbox控制器？在繼續操作之前，請確保將控制器連接到電腦並更新XboxOne控制器的驅動程式。當您使用它時，也要安裝任何可用的韌體更新。 1.使用Wind

從零開始學習Laravel：控制器方法呼叫詳解 Mar 10, 2024 pm 05:03 PM

從零開始學習Laravel：控制器方法呼叫詳解在Laravel的開發中，控制器是一個非常重要的概念。控制器起到了連接模型和視圖的橋樑作用，負責處理來自路由的請求，並返回相應的資料給視圖展示。控制器中的方法可以被路由調用，這篇文章將詳細介紹如何編寫並調用控制器中的方法，同時會提供特定的程式碼範例。首先，我們需要建立一個控制器。可以使用Artisan命令列工具來生

php如何使用CodeIgniter4框架？ May 31, 2023 pm 02:51 PM

PHP是一種非常流行的程式語言，而CodeIgniter4是一種常用的PHP框架。在開發Web應用程式時，使用框架是非常有幫助的，它可以加速開發過程、提高程式碼品質、降低維護成本。本文將介紹如何使用CodeIgniter4框架。安裝CodeIgniter4框架CodeIgniter4框架可以從官方網站（https://codeigniter.com/）下載。下

什麼叫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具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效

在Yii框架中使用控制器（Controllers）處理Ajax請求的方法 Jul 28, 2023 pm 07:37 PM

在Yii框架中，控制器（Controllers）扮演著處理請求的重要角色。除了處理常規的頁面請求之外，控制器還可以用於處理Ajax請求。本文將介紹在Yii框架中處理Ajax請求的方法，並提供程式碼範例。在Yii框架中，處理Ajax請求可以透過以下步驟進行：第一步，建立一個控制器（Controller）類別。可以透過繼承Yii框架提供的基礎控制器類別yiiwebCo

See all articles

AngularJS基礎學習筆記之控制器_AngularJS

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題