前言:
編程是一個很苦惱的工作,因為需要我們不斷的去學習,不斷的去專研,我本身就不是一個很喜歡學習的孩子,要不然從小到大也沒有成績好過,但是,我從來沒有缺少過勤奮,還是讓我們言歸正傳來說下 我們這段時間學的東西吧,看着別人能夠運轉自如,自己連基礎的都不知道是不是特傻。
1,MVC-V
<!doctype html>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngularCtl">
<p>{{greeting.text}},world</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
先看看這段代碼,如果從來沒有接觸過angular的同學們,會覺得代碼還可以這么寫?
讓我們看看在這段代碼中我們遇到的新的寫法有哪些?
1,ng-app="HelloAngular",這個是程序的入口(c#中的main()方法),表明<html></html>范圍內所有標簽歸angular.js來管理,注意一個程序中只有一個 ng-app。
2,ng-controller="HelloAngularCtl",這個是本章講的重點,也就是MVC中的C(controller),顧名思義就是控制器的意思,那么到底控制什么?根據我的理解,是控制下面的元素依據什么來顯示,這里的什么等下后面會講到。
3,{{greeting.text}},雙括號是賦值屬性。
2,MVC-C
好了,看完html代碼,我們再看看js的吧,我們先引入 angularJS的庫文件,否則上面的都不會生效。再引入我們自己的邏輯代碼HelloAngular_MVC.js
// 定義一個模塊
var HelloAngularModule = angular.module("HelloAngular",[]); // 模塊中定一個控制器
HelloAngularModule.controller("HelloAngularCtl",function($scope){ $scope.greeting={ text:'Hello' } })
就像上面代碼注釋的一樣,我們先用angular的語法,定義一個模塊(注意:我們現在所有的代碼都要模塊化,不然MVC的就變得毫無用處,不然我們是用MVC也好還是MVVM也好,最終的目的是代碼復用和模塊化),然后呢,根據這個模塊我們來定義一個 controller。
在此有些心細的同學看出來了,我們模塊定的名稱(HelloAngular)和Controller定義的名稱(HelloAngularCtl)剛好是我們前面講過的html代碼中寫的ng-app和ng-controller的名稱一樣的。沒錯,我們就是通過這個來指定angular的運行環境的。如果你寫錯了一個字母,可能整個程序就不能執行了。
3,MVC-M
我們再來講一個比較重要的屬性,那就是 控制器中 $scope,我們稱之為作用域。這個$scope是很神奇的東西,可以說是整個angularjs的運行都是在這個上面的,是angularjs實現數據模型的方式,我們可以看到前面(html代碼)中{{}}引用數據,就是$scope對象的屬性。
好了,最后給展示下運行的效果:
4,疑問
我們如何在 控制器1調用控制2的屬性或則方法?