如何利用AngularJS打造一款簡單Web應(yīng)用
譯文目前不同類型的Web開發(fā)人員都在廣泛使用AngularJS，這套卓越的框架也充分證明了自身滿足各類不同需求的能力。作為一名Web開發(fā)人員，無論大家是剛剛?cè)腴T的新手還是已經(jīng)擁有豐富的實(shí)踐經(jīng)驗(yàn)，選擇一款優(yōu)秀的框架都是必要的工作前提，而AngularJS正是這樣一套理想的解決方案。在使用AnguarJS的過程中，大家可以同時(shí)學(xué)習(xí)到更多與應(yīng)用程序開發(fā)相關(guān)的知識(shí)以及如何構(gòu)建起更出色、更具吸引力的應(yīng)用成果。如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實(shí)踐，那么AngularJS也能夠帶來極大的助益?？偠灾?，這套框架的強(qiáng)大功能與特性永遠(yuǎn)不會(huì)讓有著應(yīng)用開發(fā)需求的朋友們失望。
AngularJS擁有多項(xiàng)極為出彩的特性，今天我們就以一款簡單的應(yīng)用程序?yàn)槔龓椭蠹伊私馊绾螌?duì)其加以運(yùn)用。而在配合Firebase的情況下，我們這款簡單但卻具備實(shí)用性的應(yīng)用能夠輕松被構(gòu)建完成。作為成品，開發(fā)完成的這款應(yīng)用允許大家隨時(shí)登入或者登錄并在其上發(fā)布文章。
AngularJS與Firebase介紹
AngularJS是目前最受Web開發(fā)人員青睞的一套JavaScript MVC框架。如果大家希望創(chuàng)建出一款與眾不同的應(yīng)用，那么它絕對(duì)是各位的最佳選擇——這要?dú)w功于其強(qiáng)大的HTML功能擴(kuò)展特性。在AngularJS的幫助下，我們不再需要使用大量代碼來構(gòu)建應(yīng)用程序，其驚人的關(guān)聯(lián)性注入與綁定機(jī)制將讓應(yīng)用開發(fā)變得異常便捷。
在另一方面，F(xiàn)irebase能夠?yàn)锳ngularJS提供出色的支持，這就免除了大家為所創(chuàng)建應(yīng)用程序開發(fā)后端支持的煩惱。在Firebase的幫助下，我們的應(yīng)用程序?qū)⒛軌蛞詫?shí)時(shí)方式進(jìn)行數(shù)據(jù)備份——當(dāng)然，必要的API調(diào)用還是少不了的。
AngularJS本身雖然已經(jīng)相當(dāng)強(qiáng)大，但在Firebase的輔助下，我們將能夠讓自己的應(yīng)用程序成果更上一層樓。
從這里開始
在著手利用AngularJS創(chuàng)建這款簡單的小Web應(yīng)用之前，大家首先需要下載angular-seed項(xiàng)目。下載完成之后，大家需要打開對(duì)應(yīng)的下載目錄并安裝其中的關(guān)聯(lián)性以實(shí)現(xiàn)運(yùn)行。具體代碼如下所示：
- $ cd angular-seed
- $ npm install ## Install the dependencies
下一步則是利用以下代表啟動(dòng)節(jié)點(diǎn)服務(wù)器：
- $ npm start ## Start the server
節(jié)點(diǎn)服務(wù)器啟動(dòng)并開始運(yùn)行之后，我們需要打開瀏覽器并訪問http://localhost:8000/app/index.html，此時(shí)其中會(huì)顯示正在運(yùn)行的默認(rèn)應(yīng)用。
接下來訪問angular-seed項(xiàng)目文件夾下的該應(yīng)用目錄，應(yīng)用程序的代碼就保存在這里。
作為該應(yīng)用程序的核心，app.js也將存放在該應(yīng)用文件夾內(nèi)。所有應(yīng)用層級(jí)的模塊與app.js內(nèi)的路由都需要進(jìn)行聲明。
另外，大家還會(huì)在這里找到angular-seed的兩個(gè)視圖，即view 1與view 2。它們始終以默認(rèn)形式存在。我們需要在應(yīng)用文件夾中將這些視圖刪除。
現(xiàn)在開始我們要從零開始創(chuàng)建應(yīng)用程序了：大家首先需要打開app.js并刪除其中的全部已有代碼。在app.js當(dāng)中定義我們的應(yīng)用程序路由，這要求大家使用ngRoute，AngularJS當(dāng)中的模塊之一。默認(rèn)情況下app.js并不包含該模塊，因此我們需要手動(dòng)將其注入至應(yīng)用程序當(dāng)中從而加以使用。大家可以利用以下代碼完成該AngularJS模塊的添加工作：
- angular.module('myApp', [
- 'ngRoute'
- ])
ngRoute模塊將帶來一項(xiàng)重要的組件，即$routeProvider，其能夠完美地對(duì)路由進(jìn)行配置。我們需要使用以下代碼將$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。
每一次進(jìn)行路由變更時(shí)，我們都需要按照以上方法對(duì)div內(nèi)容進(jìn)行調(diào)整。
在視圖當(dāng)中創(chuàng)建符號(hào)
我們需要在app目錄當(dāng)中創(chuàng)建一個(gè)新的文件夾并將其命名為home。在該文件夾當(dāng)中，我們額外再創(chuàng)建兩個(gè)文件夾，分別為home.js與home.html。首先打開home.html并將以下代碼添加進(jìn)去：
- <!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當(dāng)中，我們則需要?jiǎng)?chuàng)建一套路由機(jī)制以訪問home視圖。另外還需要為由home視圖創(chuàng)建的$scope設(shè)置一套控制器。控制器永遠(yuǎn)負(fù)責(zé)控制與之對(duì)應(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視圖的默認(rèn)路由，具體代碼如下所示：
- '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)中。要完成這項(xiàng)操作，請(qǐng)打開index.html文件并湢以下代碼：
- <script src="home/home.js"></script>
現(xiàn)在一切工作已經(jīng)完成，該應(yīng)用隨時(shí)準(zhǔn)備加以運(yùn)行了！要開始使用這款應(yīng)用，我們需要重啟服務(wù)器并將自己的瀏覽器指向http://localhost:8000/app/index.html以訪問登入頁面，在這里大家可以實(shí)現(xiàn)對(duì)該應(yīng)用程序的訪問。
如果大家需要使用Firebase（具體理由如前文所述），則需要首先創(chuàng)建一個(gè)Firebase賬戶。在賬戶創(chuàng)建完成后，我們將屏幕上所顯示的已創(chuàng)建應(yīng)用url添加進(jìn)來，而后點(diǎn)擊“管理該應(yīng)用”。
創(chuàng)建自己的應(yīng)用程序感覺不錯(cuò)吧？Angular.js能夠?yàn)榇祟愰_發(fā)工作提供我們所需要的一切。而且只需幾分鐘，我們的這款簡單小應(yīng)用就已經(jīng)正式上線啦！
