使用通用的 Dart 工具箱構(gòu)建新的 Angular 項(xiàng)目是非常簡(jiǎn)單的。本頁(yè)將帶領(lǐng)你通過獲取和運(yùn)行在這個(gè)指南和教程中特定的初級(jí)應(yīng)用程序昭抒。
先決條件
怎么獲取這些預(yù)備工具的詳細(xì)信息,請(qǐng)看開始.
- Dart SDK 2.0.0-dev.52.0 或兼容版本
- WebStorm 或你喜歡的IDE(推薦)
創(chuàng)建開始項(xiàng)目
在這個(gè)指南和教程中的例子都是基于GitHub項(xiàng)目.你可以通過下面的方式獲取項(xiàng)目文件:
- 下載
- 克隆倉(cāng)庫(kù)
- 使用 WebStorm 的 Git 支持
使用 WebStorm 的 Git 支持
一旦完成了一些一次性的配置，使用 WebStorm 創(chuàng)建一個(gè)應(yīng)用很簡(jiǎn)單。
- 啟動(dòng) Webstorm。
- 如果還沒有這樣做，請(qǐng)看 在 WebStorm 配置 dart 支持饺蚊。
- 在歡迎界面,選擇
Check out from Version Control > Git挣跋，或通過菜單選擇VCS > Git > Clone…三圆，就會(huì)有一個(gè)Clone Repository對(duì)話框顯示出來. - 填寫下面的字段:
-
Git Repository URL:
https://github.com/angular-examples/quickstar - Parent Directory: (你喜歡在哪里存放練習(xí)代碼)
-
Directory Name:
angular_tour_of_heroes(或其它任意 有效的包名)
-
Git Repository URL:
- 點(diǎn)擊 Clone
獲取依賴
在 WebStorm 中:
- 打開新建的項(xiàng)目.
- 在項(xiàng)目視圖中,雙擊
pubspec.yaml. - 在
pubspec.yaml編輯器視圖的右上角:- 點(diǎn)擊 Enable Dart support。
- 點(diǎn)擊 Get dependencies。
WebStorm 會(huì)花幾秒鐘的時(shí)間來分析源代碼并做一些其它的管理舟肉。這只會(huì)發(fā)生一次修噪。在此之后，你就可以使用WebStorm通常的IDE功能路媚，包括運(yùn)行這個(gè)應(yīng)用黄琼。
如果你沒有使用 WebStorm, 你可以在終端窗口中使用下面的命令:
pub get
自定義項(xiàng)目
使用WebStorm,或你喜歡的編輯器:
- 打開
web/index.html，使用符合你應(yīng)用的標(biāo)題替換<title>中的內(nèi)容整慎，例如:<title>Angular Tour of Heroes</title>脏款。 - 打開
pubspec.yaml，更新符合應(yīng)用的description院领。例如:description: Tour of Heroes弛矛。 - 可選.如果你想改變你的項(xiàng)目名稱，那么使用適合應(yīng)用的名字——通常和早先創(chuàng)建的目錄名字相同比然，在項(xiàng)目中查找和替換 pubspec 當(dāng)前的
name值(angular_app)丈氓。
全局范圍的重命名將會(huì)改動(dòng)：pubspec.yaml、web/main.dart和 test/app_test.dart强法。
運(yùn)行應(yīng)用
注意：在 WebStorm 版本 2017.3.4万俗，還沒有運(yùn)行 web 應(yīng)用的集成支持。
在WebStorm中:
- 在項(xiàng)目視圖中,右擊
web/index.html饮怯。 - 選擇 Run ‘index.html’闰歪。
你會(huì)在瀏覽器窗口看到下面的應(yīng)用：
從命令行運(yùn)行程序,使用pub來構(gòu)建和啟動(dòng)服務(wù):
pub run build_runner serve
之后查看應(yīng)用程序,訪問localhost:8080。
重新加載應(yīng)用
每當(dāng)修改了應(yīng)用,刷新瀏覽器窗口.當(dāng)你保存了更新代碼,pub工具檢測(cè)到變化,重新啟動(dòng)服務(wù)蓖墅。
下一步
如果你是 Angular 新手,我們推薦繼續(xù)學(xué)習(xí) Angular库倘。如果你想比剛才創(chuàng)建應(yīng)用知道的更多,請(qǐng)看啟動(dòng)程序。
