第零節：Hello Yunzhier · angularjs

通過上一章的學習，我們現在已經成功的安裝了nodejs，并使用npm安裝了bower，同時，還學會了使用bower來下載angularjs。當然了，更重要的，我們還有一個超級厲害的工具：http-server，它使得我們可以在任何路徑中，提供http服務。下面，讓我們使用它們來開發第一個程序。 ## 建立文件我們在任意位置新建一個文件夾做為我們本次開發的根目錄，然后打開`git bash`，使用cd命令進入這個文件夾下。然后，我們新建第一個`index.html`文件： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Yunzhier</title> </head> <body> Hello Yunzhier. </body> </html> ~~~ ## 啟動http-server 如果此時，http-server還在另一個`git bash`中啟動，那么會報一個啟動錯誤： ![](https://box.kancloud.cn/2016-07-20_578ec4c1bdc0e.png) 這個原因，是由于http-server默認啟動在8080端口，由于在8080端口提供服務的只能有一個，所以產生了端口被占用的錯誤。解決的方法也很簡單，終止掉前面那個http-server就可以了，然后再重新啟動。成功啟動后： ![](https://box.kancloud.cn/2016-07-20_578ec4c1d43e2.png) ![](https://box.kancloud.cn/2016-07-20_578ec4c1e69b6.png) ### 排錯 js的語法錯誤，會出現在`控制臺`： ![](https://box.kancloud.cn/2016-07-20_578ec4c209e43.png) 未成功引用文件的網絡錯誤，會出現在`網絡`： ![](https://box.kancloud.cn/2016-07-20_578ec4c21eb8d.png) 在這里，我們除了需要觀察name的顏色外，更多還需要注意status（狀態碼）。例如，如果有需要引入的文件未找到： 200 OK 成功 ![](https://box.kancloud.cn/2016-07-20_578ec4c235ac6.png) 304 Not Modified 文件未修改直接加載了緩存文件。 ![](https://box.kancloud.cn/2016-07-20_578ec4c24de05.png) 404 Not Found 頁面不存在 ![](https://box.kancloud.cn/2016-07-20_578ec4c2656d6.png) 頁面不存在，大多是由于鏈接地址錯誤引起的，這時候，我們需要查看Request URL中的地址，是否是我們預期的地址，地址的書寫是否存在錯誤。 ## 下載angularjs 下面，我們再打開一個git bash。然后在這個窗口中，使用bower來下載angularjs。 `bower install angularjs#1.5.7 ` ![](https://box.kancloud.cn/2016-07-20_578ec4c27a10a.png) 成功下載后，目錄結構如下： ~~~ ├── bower_components │?? └── angular │?? ├── LICENSE.md │?? ├── README.md │?? ├── angular-csp.css │?? ├── angular.js │?? ├── angular.min.js │?? ├── angular.min.js.gzip │?? ├── angular.min.js.map │?? ├── bower.json │?? ├── index.js │?? └── package.json └── index.html ~~~ 我們需要引用的是`angular.js`，在程序開發時，我們推薦引入未壓縮的版本，這樣報錯看源代碼時，不至于凌亂，出現錯誤時，看出錯代碼的位置也會感覺更友好。 ## 引用angularjs并使用使用`<script src`引入angularjs后，我們對文件進行如下改寫： `index.html` ~~~ - <html lang="en" > + <html lang="en" ng-app> - Hello Yunzhier. + {{'Hi' + ' Yunzhier'}} ~~~ 以后，我們的代碼修改，大多會以上述形式出現，`-`：刪除代碼；`+`：增加代碼。保存后進行測試： ![](https://box.kancloud.cn/2016-07-20_578ec4c28ff69.png) 我們引入angularjs后，對文檔進行了兩處修改。 1. 在`html`標簽處增加了`ng-app`，意思是說`<html></html>`中的內容全部交給angularjs管理，規定了angularjs生效的邊界。當然了，我們還可以把它放到`<body>`標簽中。 2. 增加了``{{}}``，這是angularjs在html中輸出內容（數據綁定）的標準寫法。``{{}}``中可以放置js語句，也可以輸出后面我們要學到的變量。 `'Hi' + ' Yunzhier'`是js語句，意思是兩個字符串的拼接，我們還可以使用其它運算符，比如： `3 * 5 = {{3*5}}` ![](https://box.kancloud.cn/2016-07-20_578ec4c2a29d6.png) `index.html` ~~~ <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Hello Yunzhier</title> <script src="bower_components/angular/angular.js"></script> </head> <body> {{'Hi ' + 'Yunzhier'}} </body> </html> ~~~ 為了更好的理解`ng-app`的作用，我們給出以下示例： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script src="bower_components/angular/angular.js"></script> </head> <body> <div ng-app> {{2*5}} <div> {{3*8}} </div> </div> <div> {{2*5}} </div> </body> </html> ~~~ 我們將ng-app由html標簽中刪除，然后在BODY中增加兩個DIV，其中一個加入ng-app。效果如下： ![](https://box.kancloud.cn/2016-07-20_578f3932ce7b6.png) 沒錯，正如我們上面講的，np-app規定了angularjs的邊界，邊界內的屬于angularjs管理，邊界外的就不屬于angularjs管理。一般來講，我們會把html全部交給angularjs來管理。【注意】：在開發過程中，你需要首先進行以下設置，并保持控制臺處于打開狀態，以防止因文件緩存帶來的不必要的困擾。 ![](https://box.kancloud.cn/2016-08-06_57a5d1502f99f.png)