javascript
AngularJS基础01 从HelloWorld说起
作者：arccosxy ?轉載請注明出處：http://www.cnblogs.com/arccosxy/
準備工作
首先，創建一個名為index.html的HTML文件，代碼如下：
<!DOCTYPE html> <head><title>Learning AngularJS</title> </head> <body></body> </html>接下來就是加載angular.js庫，訪問https://angularjs.org/獲取AngularJS最新的CDN（內容分發網絡）鏈接，或者用下面這個鏈接https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js，這是Google的CDN，把它加入到head標簽中：
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content'></div> </body> </html>好了，現在我們有了一個加載了AngualarJS的HTML頁面，go on!
一些設置
要告訴AngularJS將這個頁面渲染為一個應用，需要做幾件事情。
使用ng-app告訴AngularJS應該管理頁面中的哪一部分。如果你正在構建一款純AngularJS應用，你應該把ng-app指令寫在<html>標簽中。這里，我們演示讓AngularJS只管理頁面中的一部分，簡單地在DIV標簽中加入ng-app="MyTutorialApp"即可。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp'></div> </body> </html>現在，我們告訴了AngularJS這個DIV是一個angular應用。然后，我們需要聲明使用哪一個控制器：
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>MainController是我給控制器起的名字，你可以取任何更有意義的名字。Ok，現在MainController將可以控制DIV中的一切，但是這個控制器在哪？我們需要創建它！在index.html所在的目錄下新建名為app.js的JS文件，內容如下：?
var app = angular.module('MyTutorialApp',[]);這個JS文件所做的是新建一個名為MyTotorialApp的AngularJS應用，并且把它賦給了變量app，我們稍后會使用到它。現在我們需要再創建一個名為maincontroller.js的文件，內容如下：
app.controller("MainController", function($scope){});這個文件為MyTotorialApp分配了一個名為MainController的控制器。這兩個JS文件其實可以合并為一個，但為了方便維護和容易理解，我把它們拆成兩個分離的文件。接下來，把這兩個JS文件都加載進HTML頁面中。注意，app.js需要在maincontroller.js之前被加載進來。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>現在，我們的準備工作已經做完了，接下來看一個應用是怎樣產生的。
Hello World
當我們創建maincontroller.js的時候，你可能已經注意到了$scope這個變量，它被當做控制函數的參數，是我們分配控制器變量的地方，這些變量可以在HTML頁面的DIV中被使用。不明白沒關系，舉個栗子來說明，在控制器內聲明一個$scope變量。
app.controller("MainController", function($scope){$scope.welcome = "Hello World"; });在上面的代碼中我們新建了一個scope變量并分配一個字符串給它。接下來我們可以在HTML中訪問它。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>{{welcome}}</div> </body> </html>我們在HTML中用{{}}(兩個花括號)把welcome變量包起來，這樣AngularJS就知道該處理它了。注意，在這里welcome前面沒有加$scope。現在用瀏覽器打開index.html，你會看到如下內容：?
現在你應該大致上理解scope變量了，它們通過在HTML中用雙花括號{{}}來訪問。同時也應該明白scope變量只在該控制器范圍內有效，你不能從DIV之外訪問到welcome變量。
總結
ng-app，ng-controller
$scope變量
轉載于:https://www.cnblogs.com/arccosxy/p/3805679.html
總結
以上是生活随笔為你收集整理的AngularJS基础01 从HelloWorld说起的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Linux高级驱动】如何分析并移植网卡
- 下一篇： gradle idea java ssm