歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Angular項目構建指南 - 不再為AngularJS構建而猶豫不決

前言

接觸Angular也有小半個月了,雖然沒有使勁折騰,不過正所謂"no zuo no die".學一門新東西,不好好折騰一下總覺得對不起祖國,最不起人民...好像扯遠了,想寫前言來著.為什麼要寫這篇構建指南?最大的原因是為了給正在找這方面資料,掙扎於各種說法中的同學一個借鑒,同時我也把自己的經驗記錄下來,兩全其美.

正文

如果你不知道什麼是Angular或者根本沒聽說過,那麼我接下來所說的對你來說毫無益處,不過如果你打算以後會接觸Angular或者干脆要漲漲姿勢~讀下去還是有點用的.

Angular和它之前所出現的其余前端框架最大的不同,在於它的核心不再是DOM,而是數據,是model.我們慣用的不管是單純的jQuery還是MVC的Backbone,它們本質仍是讓我們更方便更有條理的操作DOM,但是Angular不是.通過一系列魔術般的手法,它將一切的重心轉移到數據上.以開發應用而不是操作節點的方式去開發Web,一切以數據為中心,數據的變化驅動了一切,包括行為.

文本主題,如何構建一個angular項目?

坦白說最開始構建一個項目的時候,雖然很小但是很糾結.我本身是有點完美主義的,所以雖然一開始什麼都沒有也想做到盡善盡美.因為聽過很多前輩的經驗,說如果框架基礎沒搭好,等到後來不管是重構還是維護都是一場噩夢.所以一開始小心意義,希望能將項目盡量搭建的結實並且益於維護和開發.

在搭建伊始首先遇到的一個問題,就是到底要不要引入requirejs或者seajs這類依賴管理的工具?

我本身沒有多少語言或者技術的上的情節,對於各個大神也沒有多少膜拜的憧憬(更多的是我根本不清楚誰是大神,也從沒去找過).所以對於我來講不管是requirejs的AMD還是seajs的CMD,從實現的角度上來講都是做了同一個工作.在考慮一個Angular應用到底需不需要這種工具的時候,我也在網上看了很多人的說法.我總結一句就是,基本都和沒說一樣,也就是用不用隨便,看情況.

那麼我能有什麼好的答案,其實我現在的答案就是:"可以不用".怎麼說是可以不用呢,如果你不用requirejs也能滿足項目的開發以及各種需求,那麼就別用了.angular本身的模塊已經做到了依賴注入,所以我們不需要通過requirejs進行異步加載也可以很好的用下去.

當然,如果你開發過程中發覺還是有些地方需要,那麼也可以加上去.本文裡我會詳細說明這兩種方式的構建方法.但是這裡我的觀點已經表明了:在不需要的情況下,不要用.

帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

(1) 不用requirejs直接構建Angular

之所以不使用requirejs就直接構建angular,因為angular對於依賴的管理以及angular的使用場景完全可以做到這一點.首先在以來上,angular的依賴注入是個好東西,不了解的同學可以去搜一下資料.我這裡簡單的說,就是當我需要一個module的時候,我不用管它在哪,它是什麼.我只要知道它的名字然後告訴angular就可以了,至於怎麼將它的對象傳遞過來,怎麼找到的,angular自己會去處理.

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

例如這裡的ngRoute,我需要知道ngRoute怎麼來的,在哪裡.只要有一個模塊定義為ngRoute我就可以直接拿來用.

鑒於Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業務兩方面將文件劃分成module就可以了,然後將所有的庫文件在頁面上通過script標簽引用,再將所有的業務文件也即是我們自己寫的js合並為一個all.js加載到頁面上即可.

這裡文件的劃分遵循angular官方的推薦方式:

|--js
  |--app.js                    // app啟動文件,用於app配置
  |--controllers.js          // controllers也就是存放我們自己的業務文件
  |--directives.js            // 指令文件(指令可共用)
  |--fliters.js                  // 過濾器文件(過濾器可共用)
  |--services.js            //  服務文件(可共用,一般是與服務器交互的服務)
|--partials
  |--html1.html 
  |--html2.html
|--index.html

app.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

controllers.js

'use strict';

/* Controllers */

angular.module('myApp.controllers', [])
  .controller('MyCtrl1', ['$scope', function($scope) {

  }])
  .controller('MyCtrl2', ['$scope', function($scope) {

  }]);

directives.js

'use strict';

/* Directives */


angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }]);

filters.js

'use strict';

/* Filters */

angular.module('myApp.filters', []).
  filter('interpolate', ['version', function(version) {
    return function(text) {
      return String(text).replace(/\%VERSION\%/mg, version);
    };
  }]);

services.js

'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
  value('version', '0.1');

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>        <html ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>        <html ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html ng-app="myApp"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="css/app.css"/>
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <ul>
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

如此在不使用requirejs的情景下,項目就構建完成了.還有幾個補充點就是其一你可以將controllers繼續拆分為多個controller模塊,這裡可以完全按照你的業務進行劃分.比如user目錄下userController等等.然後將所有這些我們自己寫的文件通過grunt或者gulp進行合並為一個單獨的總的文件all.js這樣在頁面中除了庫文件只要這一個文件就行了.angular的module所帶來的好處就是這樣合並的文件,不用在乎js合並的順序,因為它是通過angular依賴注入的.

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-06/103371p2.htm

Copyright © Linux教程網 All Rights Reserved