javascript
AngularJS高级程序设计学习笔记（一）
第一章：搭建開發環境
1：選擇Chrome瀏覽器，給Chrome裝調試angular的插件Batarang，
安裝步驟：
（1）.從http://pan.baidu.com/s/1jGILtzg下載插件，如果連接失效了，百度Batarang下載即可，網上提供很多下載的地方；
????? （2）下載后是一個后綴名為“.crx”的chorme拓展文件。建議復制到你的chrome瀏覽器安裝目錄下，位置隨意放，確保文件不會被刪除就好了；
????? （3）接下來是安裝這個Batarang插件了，打開chrome后，在地址欄輸入chrome://extensions/，回車即可進入google chrome擴展程序管理頁面（進入擴展程序的另一個方法是控制——設置——擴展程序）；?
????? （4）在擴展程序界面下，將剛才下載的Batarang的.crx文件拖放進來；
????? （5）接下來瀏覽器會提示是否確定添加或安裝AngularJS Batarang應用，點擊添加即可，最后確保啟用被勾選，現在Batarang就安裝完成了。chrome 就可以調式angularJS應用了；
????? （6）檢測是否安裝成功：打開chrome開發者工具，你可以看到后邊多了一個AngularJS的面板了。
2：安裝Node.js
（1）訪問http://node.js.org下載和安裝適合你的平臺的Node.js安裝包。確保已經安裝了包管理器(npm),并且安裝目錄已經添加到了你的路徑中；
????? （2）測試Node.js是否安裝成功:打開命令行工具并輸入node。等待提示信息變化后，然后輸入以下信息(在同一行中):
function testNode(){return "Node is working"};testNode();
? 如果安裝成功你將看到如下輸出：'Node is working'
3:安裝Web服務器
?????? （1）在Node.js安裝目錄下安裝Connect
npm install connect
?????? （2）在Node.js安裝目錄下創建一個名為server.js的新文件
server.js文件內容
? ? ? ? ? var connect = require('connect');
????????????? connect.createServer(connect.static("../angularjs")).listen(5000);
4.獲取AngularJS庫
?????? （1）從官網(httop://angularjs.org)下載AngularJS的最新穩定版，根據你在server.js寫的路徑，建立一個angularjs文件夾，并把angular.js放到此文件夾下
?????? （2）獲取Bootstrap文件，不要重組文件結構，把文件直接拷貝到angularjs文件夾下
5：執行一個簡單的測試
??????? （1）<!DOCTYPE html>
<html ng-app>
<head>
<title>First Test</title>
<script type="text/javascript" src="framework/angular-1.3.0.14/angular.js"></script>
<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="framework/bootstrap-3.3.0/dist/css/bootstrap-theme.min.css">
</head>
<body>
<div class="btn btn-default">{{"AngularJS"}}</div>
<div class="btn btn-success">Bootstrap</div>
</body>
</html>
（2）啟動Web服務器
????????????? 從Node.js的安裝目錄下運行
????????????? node server.js
?????? (3)打開Chrome并瀏覽這個URL? http://localhost:5000/test.html,如果看到一下顯示說明就正確了
??????
?
?
? （4）如果報以下錯誤connect.static is not a funtion
???????
原因是3.x的connect把很多非核心功能分離出去了, 由其他的middleware實現. 2.x的static方法, 在3.x中由serve-static實現. 你安裝的是3.x的版本, 所以會報這個錯.
解決辦法有兩種：如下圖所示
方法一： 在安裝connect的時候指定使用2.x的connect；
方法二：再安裝一個?? serve-static即在Node.js的安裝目錄下（npm install serve-static）,然后修改server.js文件如下圖所示
即可
（5）如果遇到其他問題，可以檢查你的Web服務器的配置，檢查你的文件是否放對了位置，然后再試。
?
?
?
?
轉載于:https://www.cnblogs.com/wangyunzhe/p/6207184.html
總結
以上是生活随笔為你收集整理的AngularJS高级程序设计学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2016/12summary
- 下一篇： script和href