如何利用AngularJS打造一款簡單Web應用

作者：核子可樂譯 2015-11-27 09:18:11

如果大家希望在應用程序的創建工作中采取各類最佳實踐，那么AngularJS也能夠帶來極大的助益。總而言之，這套框架的強大功能與特性永遠不會讓有著應用開發需求的朋友們失望。

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

[[157377]]

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

AngularJS與Firebase介紹

[[157378]]

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('myApp', [ 
'ngRoute' 
])

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

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

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

每一次進行路由變更時，我們都需要按照以上方法對div內容進行調整。

在視圖當中創建符號

我們需要在app目錄當中創建一個新的文件夾并將其命名為home。在該文件夾當中，我們額外再創建兩個文件夾，分別為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" href="http://getbootstrap.com/favicon.ico"> 
<title>AngularJS & Firebase Web App</title> 
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="http://getbootstrap.com/examples/signin/signin.css" 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當中，我們則需要創建一套路由機制以訪問home視圖。另外還需要為由home視圖創建的$scope設置一套控制器。控制器永遠負責控制與之對應的特定視圖。具體代碼如下所示：

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() { 
}]);

現在應用程序已經準備就緒。打開app.js，而后將myApp.home home模塊添加到該應用當中。利用$routeProvider.otherwise方法為我們的應用程序聲明一套指向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添加到該應用的主HTML模板文件當中。要完成這項操作，請打開index.html文件并湢以下代碼：

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

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

angularjs and firebase app

如果大家需要使用Firebase（具體理由如前文所述），則需要首先創建一個Firebase賬戶。在賬戶創建完成后，我們將屏幕上所顯示的已創建應用url添加進來，而后點擊“管理該應用”。

創建自己的應用程序感覺不錯吧？Angular.js能夠為此類開發工作提供我們所需要的一切。而且只需幾分鐘，我們的這款簡單小應用就已經正式上線啦！

責任編輯：王雪燕來源： 51CTO

AngularJS Web應用

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

如何利用AngularJS打造一款簡單Web應用