目前不同類型的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項目。下載完成之後，大家需要開啟對應的下載目錄並安裝其中的關聯性以實現運行。具體代碼如下所示：
下一步則是利用以下代表啟動節點伺服器：
節點伺服器啟動並開始運行之後，我們需要開啟瀏覽器並訪問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以訪問登入頁面，在這裡大家可以實現對該應用程式的訪問。
如果大家需要使用Firebase（具體理由如前文所述），則需要首先建立一個Firebase賬戶。在賬戶建立完成後，我們將螢幕上所顯示的已建立應用url添加進來，而後點擊“管理該應用”。
建立自己的應用程式感覺不錯吧？Angular.js能夠為此類開發工作提供我們所需要的一切。而且只需幾分鐘，我們的這款簡單小應用就已經正式上線啦！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
