AngularJS開發環境搭建，出hello word

最後更新：2016-12-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：source 圖片 uil 指令伺服器 one 簡單 router dex

從接觸AngularJS到現在已經有1年多的時間期間已經用這個架構開發了大大小小的好幾個項目，參考了其他一些項目的結構模版和自己摸索嘗試，從一開始項目結構錯亂複雜到現在我自認為是比較良好的結構劃分，現在整理成一個系列留作團隊培訓內容和分享，如果有更好的方案歡迎一起研究討論。
我們以一個簡單的新聞管理系統作為引子從無到有的建立一個基於angularjs架構的系統，第一篇我們先從建立一個angularjs的架構開始。系列中包含gulp、bower、sass極angular中的指令、服務、過濾器、攔截器的使用，我們使用sublime text3 作為開發編輯器。
這個系列的github地址：https://github.com/chenfengjw163/angular-news.git

在github上建立angular-news項目後在本地clone：

git clone https://github.com/chenfengjw163/angular-news.git
 
  1
 
 
  1

用sublime 開啟：

好了，我們開始吧！

gulp、bower和sass安裝

如果使用過gulp和bower的同學可以跳過下面的文字到下一步。
gulp、bower和sass不知道什麼東西的同學自行google。
下面我們來簡單介紹下如何安裝：
安裝nodejs：https://nodejs.org/en/download/
sass則需要安裝ruby環境：http://www.w3cplus.com/sassguide/install.html
安裝好之後命令列執行：

npm -v
 
  1
 
 
  1

ruby -v
 
  1
 
 
  1

顯示版本號碼就表示安裝成功了，接下來執行：

npm install -g bower 
 
  1
 
 
  1

npm install -g gulp 
 
  1
 
 
  1

安裝bower和gulp。

因為這個項目我們會用到gulp構建工具和bower管理所以我們先初始化gulp和bower的配置在項目目錄下開啟命令列，執行:

gulp init
 
  1
 
 
  1

和

bower init
 
  1
 
 
  1

根據提示填寫資訊完成之後兩個工具的設定檔就建立完畢了。
接下來我們安裝一些npm工具：

npm install --save gulp-concat gulp-connect gulp-sass
 
  1
 
 
  1

gulp-concat用於合并檔案、gulp-connect用於建立一個web調試環境、gulp-sass用於編譯sass檔案。
和一些bower依賴包：

bower install --save angular angular-resource angular-ui-router bootstarp jquery
 
  1
 
 
  1

ps：如果安裝慢或者直接不能安裝的情況，則用vpn連結看看。
安裝好之後我們項目目錄下會多出兩個檔案夾：bower_components和node_moudules分別是bower和gulp工具的安裝目錄。

在根目錄下建立scss檔案夾作為我們sass源檔案（尾碼名.scss）目錄和www作為我們的開發資來源目錄。
www中我們建立以下檔案夾把開發檔案分類：

bower_componentsnode_mouduleswww——css           #sass源檔案編譯為css檔案的存放目錄——directive     #angular指令的存放目錄——img           #圖片資源檔——js            #公用js指令檔目錄——views         #頁面極頁面js檔案——index.html    #angular應用的啟動頁面gulpfile.js     #gulp構建任務檔案package.json    #npm專案檔bower.json      #bower專案檔
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

檔案夾建立好了，我們在根目錄建立一個gulpfile.js檔案作為gulp的工作清單，任務執行編譯sass檔案、合并js檔案和實現livereload，並編輯以下內容，如果不瞭解gulp task寫法的可以自己去瞭解下：

var gulp = require(‘gulp‘),    connect = require(‘gulp-connect‘),    concat = require(‘gulp-concat‘);    sass = require(‘gulp-sass‘);//connect任務開啟一個web調試服務，訪問http://localhost:8080 gulp.task(‘connect‘, function () {    connect.server({        port:8080,        livereload: true    });});//allJs任務，執行合并js任務gulp.task(‘allJs‘, function () {    //合并數組中所有的js檔案為all.js放入www檔案夾中    return gulp.src([‘www/js/*.js‘, ‘www/directive/*/*.js‘, ‘www/views/*/*.js‘])        .pipe(concat("all.js"))        .pipe(gulp.dest("www/"));});//sass任務，執行編譯sass任務gulp.task(‘sass‘,function () {    //編譯scss檔案把編譯後的檔案合并為css.css放入www/css檔案夾中    return gulp.src([‘scss/*.scss‘])        .pipe(sass().on(‘error‘, sass.logError))        .pipe(concat("css.css"))        .pipe(gulp.dest("www/css"));})//reload任務，在執行reload之前先執行allJs和sass任務gulp.task(‘reload‘, [‘allJs‘,‘sass‘], function () {    //重新整理web調試伺服器    return gulp.src([‘www/‘])    .pipe(connect.reload());})//watch任務，開啟一個監控gulp.task(‘watch‘, function () {    //監控數組中檔案的修改，如果有修改則執行reload任務    gulp.watch([‘scss/*.scss‘, ‘www/index.html‘, ‘www/js/*.js‘, ‘www/directive/*/*‘, ‘www/views/*/*‘], [‘reload‘]);});//預設的gulp任務，直接執行gulp即可啟動default，啟動default前啟動connect和watch任務gulp.task(‘default‘, [‘connect‘, ‘watch‘]);
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41

OK準備工作已經差不多了，我們來編寫index.html的內容：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>新聞發布</title>    <script src="/bower_components/angular/angular.min.js"></script>    <script src="/bower_components/angular-resource/angular-resource.min.js"></script>    <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>    <script src="all.js"></script></head><body ng-app="newsApp">    <div ui-view>    </div></body></html>
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

引用了bower安裝的資源檔和我們自己的all.js檔案，在body上添加ng-app內容是angular的應用程式名稱，因為我們使用的是ui-router作為我們的路由管理我們需要使用ui-view指令作為內容頁標籤(如果使用angular預設的路由管理則是ng-view)。

所以我們的項目目錄變成介個樣子：

開啟一個web調試服務只需要在項目下啟動命令列執行：

gulp
 
  1
 
 
  1

開啟http://localhost:8080/www我們只能看到一個空白的頁面，因為我們還沒有添加頁面，我們接下來嘗試添加一個測試頁面看看。

在www/js目錄下建立app.js作為angular的應用主檔案，當然它最後也要被合并到all.js中去的！
app.js:

(function() {    ‘use strict‘;    angular.module(‘newsApp‘, [            ‘ngResource‘,            ‘ui.router‘,            ‘newsApp.home‘        ])        .config(function($urlRouterProvider) {            $urlRouterProvider.otherwise(‘/home‘);        });})();
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

建立newsApp模組，引用ngResource和ui.router，分別是實現restful介面的服務和ui-router路由服務，newsApp.home則是我們自己建立的子模組。
.config中配置了路由預設的路徑。

在www/views檔案夾中建立home子功能檔案夾並建立兩個檔案home.html和對應的home.js
home.html:

<p>hello world!</p>
 
  1
 
 
  1

home.js:

(function () {    ‘use strict‘;    angular    .module("newsApp.home", [])    .config(function ($stateProvider) {        $stateProvider.state(‘home‘, {            url: ‘/home‘,            controller: "homeCtrl",            templateUrl: ‘views/home/home.html‘        })    })    .controller("homeCtrl", homeCtrl);    function homeCtrl ($scope) {    }})();
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
 
 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

大家可以看到home.js中建立了子模組newsApp.home並配置了一個名稱為home路由它的對應的controller和模版頁面。

當我們建立了這些檔案後我們可以在www檔案夾下看到一個自動產生的all.js檔案，這就是我們通過gulp工具把我們所有分散在各個檔案夾中的js合并後的js檔案，這樣的好處是我們在項目開發時可以根據不同的功能建立不同的目錄把開發檔案分類的很清楚清晰，也不需要在頁面上引用這麼多數量的檔案，在gulp我們也可以增加處理步驟比如：混淆js、壓縮js

我們不需要重新整理頁面我們就可以在頁面上看到我們最熟悉的兩個單詞：
hello world～
OK，一個angular的架構已經搭建好了！

下一期我們將會示範如果使用angular開發具體的功能。

AngularJS開發環境搭建，出hello word

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

AngularJS開發環境搭建，出hello word

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support