angularjs怎麼開發web應用？ angularjs開發web應用程式實例-js教程-PHP中文網

本篇文章主要的介紹了關於angularjs是如何發展一個簡單的web應用的。想知道的就趕快來看看吧，裡面詳細的介紹了angularjs是如何開發web應用的。接下來我們一起來看文章吧

我們先熟悉下angularjs的實力：

目前不同類型的Web開發人員都在廣泛使用AngularJS，這套卓越的框架也充分證明了自身滿足各類不同需求的能力。身為Web開發人員，無論大家是剛入門的新手還是已經擁有豐富的實務經驗，選擇一款優秀的框架都是必要的工作前提，而AngularJS正是這樣一套理想的解決方案。在使用AnguarJS的過程中，大家可以同時學習到更多與應用程式開發相關的知識以及如何建立起更出色、更具吸引力的應用成果。如果大家希望在應用程式的創建工作中採取各類最佳實踐，那麼AngularJS也能夠帶來極大的益處。總而言之，這套框架的強大功能與特性永遠不會讓有著應用程式開發需求的朋友們失望。

AngularJS擁有多項極為出彩的特性，今天我們就以一款簡單的應用程式為例幫助大家了解如何對其加以運用。而在配合Firebase的情況下，我們這款簡單但卻具備實用性的應用程式能夠輕鬆建置完成。作為成品，開發完成的這款應用程式允許大家隨時登錄或登入並在其上發布文章。

這是AngularJS與Firebase的介紹：

#AngularJS是目前最受Web開發人員青睞的一套JavaScript MVC框架。如果大家希望創造出一款與眾不同的應用，那麼它絕對是各位的最佳選擇－這要歸功於其強大的HTML功能擴充特性。在AngularJS的幫助下，我們不再需要使用大量程式碼來建立應用程序，其驚人的關聯性注入與綁定機制將讓應用開發變得異常便捷。

在另一方面，Firebase能夠為AngularJS提供出色的支持，這就免除了大家為所創建應用程式開發後端支援的煩惱。在Firebase的幫助下，我們的應用程式將能夠以即時方式進行資料備份——當然，必要的API呼叫還是少不了的。

AngularJS本身雖然已經相當強大，但在Firebase的輔助下，我們將能夠讓自己的應用程式成果更上一層樓。

正文從這裡開始，要注意了：

在著手利用AngularJS創建這款簡單的小Web應用之前，大家首先需要下載angular-seed專案。下載完成之後，大家需要開啟對應的下載目錄並安裝其中的關聯性才能運作。具體程式碼如下所示：

$ cd angular-seed 
$ npm install ## Install the dependencies

登入後複製

下一步則是利用以下代表啟動節點伺服器：

$ npm start ## Start the server

登入後複製

節點伺服器啟動並開始運行之後，我們需要開啟瀏覽器並造訪http://localhost:8000/app/index.html，此時其中會顯示正在執行的預設應用程式。

接下來造訪angular-seed專案資料夾下的該應用程式目錄，應用程式的程式碼就保存在這裡。

作為該應用程式的核心，app.js也將存放在該應用程式資料夾內。所有應用層級的模組與app.js內的路由都需要進行宣告。

另外，大家還會在這裡找到angular-seed的兩個視圖，也就是view 1與view 2。它們始終以預設形式存在。我們需要在應用程式資料夾中將這些視圖刪除。

現在開始我們要從零開始創建應用程式了：大家首先需要打開app.js並刪除其中的全部已有程式碼。在app.js當中定義我們的應用程式路由，這要求大家使用ngRoute，AngularJS當中的模組之一。預設情況下app.js並不包含該模組，因此我們需要手動將其註入至應用程式當中從而加以使用。大家可以利用以下程式碼完成該AngularJS模組的新增工作：

angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39; 
])

登入後複製

ngRoute模組將帶來一項重要的元件，即$routeProvider，其能夠完美地對路由進行配置。我們需要使用以下程式碼將$routeProvider注入至angular-module的設定方法當中，從而完成路由定義：

'use strict'; 
angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39; 
]). 
config(['$routeProvider', function($routeProvider) { 
// Routes will be here 
}]);

登入後複製

完成以上步驟後，現在我們就可以開啟index.html了。將index.html當中的全部內容清除，只保留腳本引用以及div。

每次進行路由變更時，我們都需要依照以上方法對div內容進行調整。（想學更多推薦PHP中文網，裡面有你想要看的angularjs影片教學）

現在在視圖當中建立符號：

我們需要在app目錄當中建立一個新的資料夾並將其命名為home。在該資料夾當中，我們額外再建立兩個資料夾，分別為home.js與home.html。首先打開home.html並將以下程式碼加入：

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="icon" href="http://www.php.cn/favicon.ico"> 
<title>AngularJS & Firebase Web App</title> 
<link href="http://www.php.cn/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://www.php.cn/examples/signin/signin.css" rel="stylesheet"> 
<link href="justified-nav.css" rel="stylesheet"> 
</head> 
<body> 
<div> 
<div style="padding-bottom:0px;"> 
<h2>AngularJS & Firebase App!</h2> 
</div> 
<form role="form"> 
<input type="email" placeholder="Email address" required="" autofocus=""> 
<input type="password" placeholder="Password" required=""> 
<label> 
<a href="#"> Sign Up</> 
</label> 
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
</form> 
</div> 
</body>
</html>

登入後複製

在home.js当中，我们则需要创建一套路由机制以访问home视图。另外还需要为由home视图创建的$scope设置一套控制器。控制器永远负责控制与之对应的特定视图。具体代码如下所示：

use strict&#39;; 
angular.module(&#39;myApp.home&#39;, [&#39;ngRoute&#39;]) 
// Declared route 
.config([&#39;$routeProvider&#39;, function($routeProvider) { 
$routeProvider.when(&#39;/home&#39;, { 
templateUrl: &#39;home/home.html&#39;, 
controller: &#39;HomeCtrl&#39; 
}); 
}]) 
// Home controller 
.controller(&#39;HomeCtrl&#39;, [function() { 
}]);

登入後複製

现在应用程序已经准备就绪。打开app.js，而后将myApp.home home模块添加到该应用当中。利用$routeProvider.otherwise方法为我们的应用程序声明一套指向home视图的默认路由，具体代码如下所示：

&#39;use strict&#39;; 
angular.module(&#39;myApp&#39;, [ 
&#39;ngRoute&#39;, 
&#39;myApp.home&#39;           // Newly added home module 
]). 
config([&#39;$routeProvider&#39;, function($routeProvider) { 
// Set defualt view of our app to home 
$routeProvider.otherwise({ 
redirectTo: &#39;/home&#39; 
}); 
}]);

登入後複製

如果大家希望显示自己的home页面，则将home.js添加到该应用的主HTML模板文件当中。要完成这项操作，请打开index.html文件并湢以下代码：