Angular项目构建指南 - 不再为angular构建而犹豫不决

@H_502_0@原文出处：https://my.oschina.net/blogshi/blog/280400

摘要: 洋洋洒洒写了一大堆都是最近构建项目的一些经验,对于angular项目的构建确实不大同于以往的前端框架,所以特此记录分享给大家,希望有所帮助.

前言

接触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进行异步加载也可以很好的用下去.

当然,如果你开发过程中发觉还是有些地方需要,那么也可以加上去.本文里我会详细说明这两种方式的构建方法.但是这里我的观点已经表明了:在不需要的情况下,不要用.

(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

'usestrict';


//Declareapplevelmodulewhichdependsonfilters,andservices
angular.module('myApp','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

'usestrict';

/*Controllers*/

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

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

}]);

directives.js

'usestrict';

/*Directives*/


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

filters.js

'usestrict';

/*Filters*/

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

services.js

'usestrict';

/*Services*/


//Demonstratehowtoregisterservices
//Inthiscaseitisasimplevalueservice.
angular.module('myApp.services',[]).
value('version','0.1');

index.html

<!DOCTYPEhtml>
<!--[ifltIE7]><htmlng-app="myApp"class="no-jslt-ie9lt-ie8lt-ie7"><![endif]-->
<!--[ifIE7]><htmlng-app="myApp"class="no-jslt-ie9lt-ie8"><![endif]-->
<!--[ifIE8]><htmlng-app="myApp"class="no-jslt-ie9"><![endif]-->
<!--[ifgtIE8]><!--><htmlng-app="myApp"><!--<![endif]-->
<head>
<Metacharset="utf-8">
<Metahttp-equiv="X-UA-Compatible"content="IE=edge">
<title>MyAngularJSApp</title>
<Metaname="description"content="">
<Metaname="viewport"content="width=device-width,initial-scale=1">
<linkrel="stylesheet"href="bower_components/html5-boilerplate/css/normalize.css">
<linkrel="stylesheet"href="bower_components/html5-boilerplate/css/main.css">
<linkrel="stylesheet"href="css/app.css"/>
<scriptsrc="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul>
<li><ahref="#/view1">view1</a></li>
<li><ahref="#/view2">view2</a></li>
</ul>

<!--[ifltIE7]> <p>Youareusingan<strong>outdated</strong>browser.Please<ahref="http://browsehappy.com/">upgradeyourbrowser</a>toimproveyourexperience.</p> <![endif]-->

<divng-view></div>

<div>Angularseedapp:v<spanapp-version></span></div>

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

如此在不使用requirejs的情景下,项目就构建完成了.还有几个补充点就是其一你可以将controllers继续拆分为多个controller模块,这里可以完全按照你的业务进行划分.比如user目录下userController等等.然后将所有这些我们自己写的文件通过grunt或者gulp进行合并为一个单独的总的文件all.js这样在页面中除了库文件只要这一个文件就行了.angular的module所带来的好处就是这样合并的文件,不用在乎js合并的顺序,因为它是通过angular依赖注入的.

(2) 通过requirejs构建

这种方式的构建可能对于某些人来讲更加清晰,结构和上面的基本一样,多了一个man.js用来配置requirejs,单独拆分出routes.js以及一个controller文件夹通过requirejs将controller一个个拆分出来,按需的异步加载.

index.html

<!doctypehtml>
<htmlng-app>
<head>
<title>Angular-RequireJSsampleapp</title>
<Metaname="viewport"content="width=device-width,initial-scale=1.0">
<linkrel="stylesheet"type="text/css"media="all"href="app/css/app.css"/>
</head>
<body>
<h1>AngularJS+RequireJS</h1>
<ul>
<li><ahref="#/view1">View1</a></li>
<li><ahref="#/view2">View2</a></li>
</ul>
<divng-view></div>
<scriptdata-main="app/js/main"src="/bower_components/requirejs/require.js"></script>
</body>
</html>

main.js

require.config({
	paths:{
		angular:'../../bower_components/angular/angular',angularRoute:'../../bower_components/angular-route/angular-route',angularMocks:'../../bower_components/angular-mocks/angular-mocks',text:'../../bower_components/requirejs-text/text'
	},shim:{
		'angular':{'exports':'angular'},'angularRoute':['angular'],'angularMocks':{
			deps:['angular'],'exports':'angular.mock'
		}
	},priority:[
		"angular"
	]
});

//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name="NG_DEFER_BOOTSTRAP!";

require([
	'angular','app','routes'
],function(angular,app,routes){
	'usestrict';
	var$html=angular.element(document.getElementsByTagName('html')[0]);

	angular.element().ready(function(){
		angular.resumeBootstrap([app['name']]);
	});
});

app.js

define([
	'angular','filters','services','directives','controllers','angularRoute',],function(angular,filters,services,directives,controllers){
		'usestrict';

		//Declareapplevelmodulewhichdependsonfilters,andservices
		
		returnangular.module('myApp',[
			'ngRoute','myApp.controllers','myApp.directives'
		]);
});

controllers.js

define(['angular','services'],function(angular){
	'usestrict';

	/*Controllers*/
	
	returnangular.module('myApp.controllers',['myApp.services'])
		//Samplecontrollerwhereserviceisbeingused
		.controller('MyCtrl1','version',function($scope,version){
			$scope.scopedAppVersion=version;
		}])
		//Moreinvolvedexamplewherecontrollerisrequiredfromanexternalfile
		.controller('MyCtrl2','$injector',function($scope,$injector){
			require(['controllers/myctrl2'],function(myctrl2){
				//injectormethodtakesanarrayofmodulesasthefirstargument
				//ifyouwantyourcontrollertobeabletousecomponentsfrom
				//anyofyourothermodules,makesureyouincludeittogetherwith'ng'
				//Furthermoreweneedtopassonthe$scopeasit'suniquetothiscontroller
				$injector.invoke(myctrl2,this,{'$scope':$scope});
			});
		}]);
});

directives.js

define(['angular',function(angular,services){
	'usestrict';

/*Directives*/

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

filters.js

define(['angular',services){
	'usestrict';

	/*Filters*/

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

routes.js

define(['angular','app'],app){
	'usestrict';

	returnapp.config(['$routeProvider',function($routeProvider){
		$routeProvider.when('/view1',{
			templateUrl:'app/partials/partial1.html',controller:'MyCtrl1'
		});
		$routeProvider.when('/view2',{
			templateUrl:'app/partials/partial2.html',controller:'MyCtrl2'
		});
		$routeProvider.otherwise({redirectTo:'/view1'});
	}]);

});

services.js

define(['angular'],function(angular){
	'usestrict';
	
/*Services*/

//Demonstratehowtoregisterservices
//Inthiscaseitisasimplevalueservice.
	angular.module('myApp.services',[])
		.value('version','0.1');
});

controllers文件夹中一个单独controlle文件,myCtrl2.js

define([],function(){
	return['$scope','$http',$http){
		//Youcanaccessthescopeofthecontrollerfromhere
		$scope.welcomeMessage='heythisismyctrl2.js!';

		//becausethishashappenedasynchroneuslywe'vemissed
		//Angular'sinitialcallto$applyafterthecontrollerhasbeenloaded
		//henceweneedtoexplicitylycallitattheendofourControllerconstructor
		$scope.$apply();
	}];
});

结尾

写到这应该差不多了,就快超字数了.通常情况下Angular应用的构建这样就可以了,因为比起传统框架angular的代码量上肯定会有优势,所以一些不必要的东西就不用引入了.上面这些也是我在这段时间的项目中遇到并且做过的,已经实战过了,所以如果有类似需求的同学可以不必在此填坑.

最后留个彩蛋吧,在不用requirejs的情况下,angular也是可以实现异步加载的,只要通过一个非常小巧的库就可以,名字叫script.js.https://github.com/ded/script.js

原文链接：https://www.f2er.com/angularjs/148426.html

Angular项目构建指南 - 不再为angular构建而犹豫不决

猜你在找的Angularjs相关文章