快捷導(dǎo)航

如何利用AngularJS打造一款簡單Web應(yīng)用

更新時間：2015年12月05日 13:30:15 投稿：mdxy-dxy

如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實踐，那么AngularJS也能夠帶來極大的助益?？偠灾?，這套框架的強大功能與特性永遠不會讓有著應(yīng)用開發(fā)需求的朋友們失望

目前不同類型的Web開發(fā)人員都在廣泛使用AngularJS，這套卓越的框架也充分證明了自身滿足各類不同需求的能力。作為一名Web開發(fā)人員，無論大家是剛剛?cè)腴T的新手還是已經(jīng)擁有豐富的實踐經(jīng)驗，選擇一款優(yōu)秀的框架都是必要的工作前提，而AngularJS正是這樣一套理想的解決方案。在使用AnguarJS的過程中，大家可以同時學(xué)習(xí)到更多與應(yīng)用程序開發(fā)相關(guān)的知識以及如何構(gòu)建起更出色、更具吸引力的應(yīng)用成果。如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實踐，那么AngularJS也能夠帶來極大的助益?？偠灾@套框架的強大功能與特性永遠不會讓有著應(yīng)用開發(fā)需求的朋友們失望。

angularjs

AngularJS擁有多項極為出彩的特性，今天我們就以一款簡單的應(yīng)用程序為例幫助大家了解如何對其加以運用。而在配合Firebase的情況下，我們這款簡單但卻具備實用性的應(yīng)用能夠輕松被構(gòu)建完成。作為成品，開發(fā)完成的這款應(yīng)用允許大家隨時登入或者登錄并在其上發(fā)布文章。

AngularJS與Firebase介紹

Introduction to Angular.js and Firebase

AngularJS是目前最受Web開發(fā)人員青睞的一套JavaScript MVC框架。如果大家希望創(chuàng)建出一款與眾不同的應(yīng)用，那么它絕對是各位的最佳選擇——這要歸功于其強大的HTML功能擴展特性。在AngularJS的幫助下，我們不再需要使用大量代碼來構(gòu)建應(yīng)用程序，其驚人的關(guān)聯(lián)性注入與綁定機制將讓應(yīng)用開發(fā)變得異常便捷。

在另一方面，F(xiàn)irebase能夠為AngularJS提供出色的支持，這就免除了大家為所創(chuàng)建應(yīng)用程序開發(fā)后端支持的煩惱。在Firebase的幫助下，我們的應(yīng)用程序?qū)⒛軌蛞詫崟r方式進行數(shù)據(jù)備份——當(dāng)然，必要的API調(diào)用還是少不了的。

AngularJS本身雖然已經(jīng)相當(dāng)強大，但在Firebase的輔助下，我們將能夠讓自己的應(yīng)用程序成果更上一層樓。

從這里開始

在著手利用AngularJS創(chuàng)建這款簡單的小Web應(yīng)用之前，大家首先需要下載angular-seed項目。下載完成之后，大家需要打開對應(yīng)的下載目錄并安裝其中的關(guān)聯(lián)性以實現(xiàn)運行。具體代碼如下所示：

復(fù)制代碼代碼如下:

$ cd angular-seed 

$ npm install ## Install the dependencies 

下一步則是利用以下代表啟動節(jié)點服務(wù)器：

復(fù)制代碼代碼如下:

$ npm start ## Start the server

節(jié)點服務(wù)器啟動并開始運行之后，我們需要打開瀏覽器并訪問http://localhost:8000/app/index.html，此時其中會顯示正在運行的默認應(yīng)用。

接下來訪問angular-seed項目文件夾下的該應(yīng)用目錄，應(yīng)用程序的代碼就保存在這里。

作為該應(yīng)用程序的核心，app.js也將存放在該應(yīng)用文件夾內(nèi)。所有應(yīng)用層級的模塊與app.js內(nèi)的路由都需要進行聲明。

另外，大家還會在這里找到angular-seed的兩個視圖，即view 1與view 2。它們始終以默認形式存在。我們需要在應(yīng)用文件夾中將這些視圖刪除。

現(xiàn)在開始我們要從零開始創(chuàng)建應(yīng)用程序了：大家首先需要打開app.js并刪除其中的全部已有代碼。在app.js當(dāng)中定義我們的應(yīng)用程序路由，這要求大家使用ngRoute，AngularJS當(dāng)中的模塊之一。默認情況下app.js并不包含該模塊，因此我們需要手動將其注入至應(yīng)用程序當(dāng)中從而加以使用。大家可以利用以下代碼完成該AngularJS模塊的添加工作：

angular.module('myApp', [ 
'ngRoute' 
])

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

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

完成以上步驟后，現(xiàn)在我們就可以打開index.html了。將index.html當(dāng)中的全部內(nèi)容清除，只保留腳本引用以及div。

每一次進行路由變更時，我們都需要按照以上方法對div內(nèi)容進行調(diào)整。

在視圖當(dāng)中創(chuàng)建符號

我們需要在app目錄當(dāng)中創(chuàng)建一個新的文件夾并將其命名為home。在該文件夾當(dāng)中，我們額外再創(chuàng)建兩個文件夾，分別為home.js與home.html。首先打開home.html并將以下代碼添加進去：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="icon" > 
<title>AngularJS & Firebase Web App</title> 
<link  rel="stylesheet"> 
<link  rel="stylesheet"> 
<link href="justified-nav.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
<div class="jumbotron" style="padding-bottom:0px;"> 
<h2>AngularJS & Firebase App!</h2> 
</div> 
<form class="form-signin" role="form"> 
<input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> 
<input type="password" class="form-control" placeholder="Password" required=""> 
<label class="checkbox"> 
<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當(dāng)中，我們則需要創(chuàng)建一套路由機制以訪問home視圖。另外還需要為由home視圖創(chuàng)建的$scope設(shè)置一套控制器?？刂破饔肋h負責(zé)控制與之對應(yīng)的特定視圖。具體代碼如下所示：

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

現(xiàn)在應(yīng)用程序已經(jīng)準(zhǔn)備就緒。打開app.js，而后將myApp.home home模塊添加到該應(yīng)用當(dāng)中。利用$routeProvider.otherwise方法為我們的應(yīng)用程序聲明一套指向home視圖的默認路由，具體代碼如下所示：

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

如果大家希望顯示自己的home頁面，則將home.js添加到該應(yīng)用的主HTML模板文件當(dāng)中。要完成這項操作，請打開index.html文件并湢以下代碼：

<script src="home/home.js"></script>

現(xiàn)在一切工作已經(jīng)完成，該應(yīng)用隨時準(zhǔn)備加以運行了！要開始使用這款應(yīng)用，我們需要重啟服務(wù)器并將自己的瀏覽器指向http://localhost:8000/app/index.html以訪問登入頁面，在這里大家可以實現(xiàn)對該應(yīng)用程序的訪問。

angularjs and firebase app