国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
Angular項(xiàng)目構(gòu)建指南 - 不再為AngularJS構(gòu)建而猶豫不決

前言

接觸Angular也有小半個(gè)月了,雖然沒(méi)有使勁折騰,不過(guò)正所謂"no zuo no die".學(xué)一門(mén)新東西,不好好折騰一下總覺(jué)得對(duì)不起祖國(guó),最不起人民...好像扯遠(yuǎn)了,想寫(xiě)前言來(lái)著.為什么要寫(xiě)這篇構(gòu)建指南?最大的原因是為了給正在找這方面資料,掙扎于各種說(shuō)法中的同學(xué)一個(gè)借鑒,同時(shí)我也把自己的經(jīng)驗(yàn)記錄下來(lái),兩全其美.

正文

如果你不知道什么是Angular或者根本沒(méi)聽(tīng)說(shuō)過(guò),那么我接下來(lái)所說(shuō)的對(duì)你來(lái)說(shuō)毫無(wú)益處,不過(guò)如果你打算以后會(huì)接觸Angular或者干脆要漲漲姿勢(shì)~讀下去還是有點(diǎn)用的.

Angular和它之前所出現(xiàn)的其余前端框架最大的不同,在于它的核心不再是DOM,而是數(shù)據(jù),是model.我們慣用的不管是單純的jQuery還是MVC的Backbone,它們本質(zhì)仍是讓我們更方便更有條理的操作DOM,但是Angular不是.通過(guò)一系列魔術(shù)般的手法,它將一切的重心轉(zhuǎn)移到數(shù)據(jù)上.以開(kāi)發(fā)應(yīng)用而不是操作節(jié)點(diǎn)的方式去開(kāi)發(fā)Web,一切以數(shù)據(jù)為中心,數(shù)據(jù)的變化驅(qū)動(dòng)了一切,包括行為.

文本主題,如何構(gòu)建一個(gè)angular項(xiàng)目?

坦白說(shuō)最開(kāi)始構(gòu)建一個(gè)項(xiàng)目的時(shí)候,雖然很小但是很糾結(jié).我本身是有點(diǎn)完美主義的,所以雖然一開(kāi)始什么都沒(méi)有也想做到盡善盡美.因?yàn)槁?tīng)過(guò)很多前輩的經(jīng)驗(yàn),說(shuō)如果框架基礎(chǔ)沒(méi)搭好,等到后來(lái)不管是重構(gòu)還是維護(hù)都是一場(chǎng)噩夢(mèng).所以一開(kāi)始小心意義,希望能將項(xiàng)目盡量搭建的結(jié)實(shí)并且益于維護(hù)和開(kāi)發(fā).

在搭建伊始首先遇到的一個(gè)問(wèn)題,就是到底要不要引入requirejs或者seajs這類(lèi)依賴(lài)管理的工具?

我本身沒(méi)有多少語(yǔ)言或者技術(shù)的上的情節(jié),對(duì)于各個(gè)大神也沒(méi)有多少膜拜的憧憬(更多的是我根本不清楚誰(shuí)是大神,也從沒(méi)去找過(guò)).所以對(duì)于我來(lái)講不管是requirejs的AMD還是seajs的CMD,從實(shí)現(xiàn)的角度上來(lái)講都是做了同一個(gè)工作.在考慮一個(gè)Angular應(yīng)用到底需不需要這種工具的時(shí)候,我也在網(wǎng)上看了很多人的說(shuō)法.我總結(jié)一句就是,基本都和沒(méi)說(shuō)一樣,也就是用不用隨便,看情況.

那么我能有什么好的答案,其實(shí)我現(xiàn)在的答案就是:"可以不用".怎么說(shuō)是可以不用呢,如果你不用requirejs也能滿(mǎn)足項(xiàng)目的開(kāi)發(fā)以及各種需求,那么就別用了.angular本身的模塊已經(jīng)做到了依賴(lài)注入,所以我們不需要通過(guò)requirejs進(jìn)行異步加載也可以很好的用下去.

當(dāng)然,如果你開(kāi)發(fā)過(guò)程中發(fā)覺(jué)還是有些地方需要,那么也可以加上去.本文里我會(huì)詳細(xì)說(shuō)明這兩種方式的構(gòu)建方法.但是這里我的觀點(diǎn)已經(jīng)表明了:在不需要的情況下,不要用.

帶你走近AngularJS系列

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

如何在 AngularJS 中對(duì)控制器進(jìn)行單元測(cè)試 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直接構(gòu)建Angular

之所以不使用requirejs就直接構(gòu)建angular,因?yàn)閍ngular對(duì)于依賴(lài)的管理以及angular的使用場(chǎng)景完全可以做到這一點(diǎn).首先在以來(lái)上,angular的依賴(lài)注入是個(gè)好東西,不了解的同學(xué)可以去搜一下資料.我這里簡(jiǎn)單的說(shuō),就是當(dāng)我需要一個(gè)module的時(shí)候,我不用管它在哪,它是什么.我只要知道它的名字然后告訴angular就可以了,至于怎么將它的對(duì)象傳遞過(guò)來(lái),怎么找到的,angular自己會(huì)去處理.

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

例如這里的ngRoute,我需要知道ngRoute怎么來(lái)的,在哪里.只要有一個(gè)模塊定義為ngRoute我就可以直接拿來(lái)用.

鑒于Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業(yè)務(wù)兩方面將文件劃分成module就可以了,然后將所有的庫(kù)文件在頁(yè)面上通過(guò)script標(biāo)簽引用,再將所有的業(yè)務(wù)文件也即是我們自己寫(xiě)的js合并為一個(gè)all.js加載到頁(yè)面上即可.

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

|--js
  |--app.js                    // app啟動(dòng)文件,用于app配置
  |--controllers.js          // controllers也就是存放我們自己的業(yè)務(wù)文件
  |--directives.js            // 指令文件(指令可共用)
  |--fliters.js                  // 過(guò)濾器文件(過(guò)濾器可共用)
  |--services.js            //  服務(wù)文件(可共用,一般是與服務(wù)器交互的服務(wù))
|--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 >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="http://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的情景下,項(xiàng)目就構(gòu)建完成了.還有幾個(gè)補(bǔ)充點(diǎn)就是其一你可以將controllers繼續(xù)拆分為多個(gè)controller模塊,這里可以完全按照你的業(yè)務(wù)進(jìn)行劃分.比如user目錄下userController等等.然后將所有這些我們自己寫(xiě)的文件通過(guò)grunt或者gulp進(jìn)行合并為一個(gè)單獨(dú)的總的文件all.js這樣在頁(yè)面中除了庫(kù)文件只要這一個(gè)文件就行了.angular的module所帶來(lái)的好處就是這樣合并的文件,不用在乎js合并的順序,因?yàn)樗峭ㄟ^(guò)angular依賴(lài)注入的.


本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
ng-checked(回寫(xiě):帶真實(shí)案例代碼)
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
跟我學(xué)AngularJs:Service、Factory、Provider依賴(lài)注入使用與區(qū)別
angularJS directive詳解
AngularJS 簡(jiǎn)介 | 菜鳥(niǎo)教程
學(xué)習(xí)AngularJs:Directive指令用法(完整版)
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服