AngularJS ng-controller 指令簡單實例
更新時間：2016年08月01日 10:21:09 投稿：lqh
本文主要介紹AngularJS ng-controller 指令,這里對ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下
AngularJS ng-controller 指令
AngularJS 實例
為應(yīng)用變量添加控制器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
<p>該實例演示了如何定義一個控制器及 scope 的使用。</p>
</body>
</html>
運(yùn)行結(jié)果：
Full Name: John Doe
該實例演示了如何定義一個控制器及 scope 的使用。
定義和用法
ng-controller 指令用于為你的應(yīng)用添加控制器。
在控制器中，你可以編寫代碼，制作函數(shù)和變量，并使用 scope 對象來訪問。
語法
<element ng-controller="expression"></element>
所有 HTML 元素都支持。
參數(shù)值
| 值 | 描述 |
|---|---|
| expression | 控制器名。 |
希望能幫助學(xué)習(xí)AngularJS的同學(xué)，后續(xù)繼續(xù)補(bǔ)充相關(guān)知識。
您可能感興趣的文章:
- AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案
- AngularJS控制器controller正確的通信的方法
- AngularJS利用Controller完成URL跳轉(zhuǎn)
- angularjs學(xué)習(xí)筆記之三大模塊（modal，controller，view）
- AngularJS入門心得之directive和controller通信過程
- AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
- Angularjs中controller的三種寫法分享
- AngularJS實踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
- AngularJs Injecting Services Into Controllers詳解
- AngularJS Controller作用域
相關(guān)文章
這篇文章主要介紹了AngularJS中的過濾器使用詳解,過濾器是AngularJS中處理文本的一個非常有用的功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了angular 組件通信的幾種實現(xiàn)方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Angular?服務(wù)器端渲染應(yīng)用常見的內(nèi)存泄漏問題小結(jié)
這篇文章主要介紹了Angular?服務(wù)器端渲染應(yīng)用一個常見的內(nèi)存泄漏問題,主要包括屏幕閃爍問題，出現(xiàn)閃爍的原因，在于 Angular 不知道如何重用它在服務(wù)器上成功渲染的內(nèi)容，本文給大家介紹的非常詳細(xì)，需要的朋友一起學(xué)習(xí)下吧2022-06-06
這篇文章主要給大家詳細(xì)解析了關(guān)于Angular中響應(yīng)式表單的三種更新值方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
本篇文章主要介紹了Angular實現(xiàn)響應(yīng)式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
利用Angular.js限制textarea輸入的字?jǐn)?shù)
相信在大家已經(jīng)學(xué)習(xí)了足夠多關(guān)于AngularJS的知識后，就可以開始創(chuàng)建第一個AngularJS應(yīng)用程序，這篇文章通過示例給大家介紹如何利用Angular.js限制textarea輸入的字?jǐn)?shù)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題
這篇文章主要介紹了Angular中使用ng-zorro圖標(biāo)庫部分圖標(biāo)不能正常顯示問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Angular實現(xiàn)二級導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
本篇文章主要介紹了Angualr 組件間通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
Angular.JS中select下拉框設(shè)置value的方法
select 是 AngularJS 預(yù)設(shè)的一組directive。下面這篇文章主要給大家介紹了關(guān)于Angular.JS中select下拉框設(shè)置value的方法，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06