1.1Pro. AngularJS 準備工作

Pro. AngularJS 準備工作


         AngularJS 借鑑和使用服務端開發的優秀的模式提供HTML在web瀏覽器的編程,創建了一個使構建富客戶端應用程序更簡單和容易的基礎。AngularJS 應用圍繞着一個設計模式被稱爲模型-視圖-控制(MVC),這裏有一些重點在創建應用時:

        可擴展:容易解決理解複雜的AngularJS應用的工作原理和要素,意思是你可以很容易的創建一個新的對你的用戶有價值的功能來提升你的應用;

        可維護:AngularJS應用容易進行調試和修復,長期的維護是簡單的;

        可測試:AngularJS 對單元測試和端對端測試有很好的支持,你可以在你的用戶使用之前發現並修復缺陷;

        規範化:AngularJS 依據跨瀏覽器的能力,允許你創建一個標準的web應用,可以是最新的功能(例如:

                HTML5APIS)和流行的工具和框架;

    AngularJS 是一個由谷歌發起和維護的開源的JavaScript 庫。被應用到一些規模大河比較複雜的web應用。這裏將展示你所想知道的在你項目中使用AngularJS所得到的回報。

        你需要知道的?

        你應該熟悉web開發的基礎,有對HTML和CSS如何工作和觀念,有javascript的工作知識。

        這本書的結構?

        第一部分:準備工作

        這部分提供準備工作的一些信息。展示如何構建你的第一個AngularJS 應用和帶你經歷構建一個真實的應用:體育商店。

        第二部分:使用Angular工作

        這部分帶你瞭解AngularJS的功能點,從概述AngularJS不同類型的組件開始,然後到每個類型工作完成。AngularJS包括一些內置的功能,我們深入描述並提供不斷定製選項並加以說明。

        第三部分:AngularJS 模型和服務

        這部分解釋兩個重要的組件角色:模型和服務。將展示創建這兩個組件的不同方式和廣泛的解釋AngularJS內置的服務。這包含SPA開發的:Ajax and RESTful API,and unit testing。



        如何建立你的開發環境

        你可以使用一個瀏覽器,一個文本編輯器和web服務器開始AngularJS的開發。一個流行的客戶端開發工具Yeoman(http://yeoman.io),這個工具提供了一個集成開發流程。這裏沒有使用這個工具因爲在Windows環境下有些需要解決的問題。

        選擇瀏覽器

        AngularJS工作在一些現代web瀏覽器,你可以測試你的應用在你的用戶喜歡的瀏覽器中。你需要定位一個開發環境的瀏覽器,建立你的開發環境來展示應用和演示基礎的測試。推薦使用谷歌的chrome瀏覽器,支持w3c標準和具有F12-developer tools。

        選擇代碼編輯器

        你可以使用任意一種文本編輯器來開發AngularJS。兩個流行的選項是WebStorm(www.jetbrains.com/webstorm)和Sublime Text(www.sublimetext.com)。這兩個編輯器是收費的。

        安裝node.js

        官方網站:http://nodejs.org。

        安裝一個web服務

        1. 在node.js的安裝目錄創建一個文件夾,例如:public;
        2. 然後在命令行進入public目錄,執行命令:npm install express .安裝express模塊(https://github.com/strongloop/express)。
        3.創建server.js文件,內容:
<span style="font-size:18px;">var express = require('express'),  
    app = express();  
   
app.use(express.static(__dirname));  
  
app.listen(8080);

console.log('static :'+__dirname+', server at : 8080');</span>
          4.創建一個test.html,內容爲:hell web server。     
        5.啓動服務,使用命令:node server.js,在瀏覽器訪問地址:http://localhost:8080/test.html。

        獲取AngularJS庫

        官方地址:http://angularjs.org,進行文件的下載。

        展示一個簡單的測試

        將test.html內容更新爲:
<span style="font-size:18px;"><!doctype html>
<html ng-app>

<head>
	<title>First Test</title>
	<script type="text/javascript" src="angular.js"></script>

	<link href="bootstrap.css" rel="stylesheet" />
	<link href="bootstrap-theme.css" rel="stylesheet" />
	
</head>

<body>
	<div class="btn btn-default">{{"AngularJS"}}</div>
	<div class="btn btn-success">Bottstrap</div>

</body>
</html></span>
啓動web服務器 :node server.js



總結

這一章節我們瞭解了本書的大體結構,並試着建立起一個AngularJS的開發環境。下一節我們將開始創建我們的第一個AngularJS應用。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章