ساختار پروژه های Angular
نویسنده: مسعود پاکدل
تاریخ: ۱۳۹۲/۱۱/۲۷ ۹:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
این مورد، روش پیشنهادی در Angular Seed است و بدین صورت است که تعاریف ماژولها در فایل app.js انجام میگیرد. تعاریف و پیاده سازی تمام کنترلرها در فایل controller.js است. و همچنین دایرکتیوها و فیلترها و سرویسها هر کدام در فایلها جداگانه تعریف و پیاده سازی میشوند. این روش راه حلی سریع برای پروژههای کوچک با تعداد developerهای کم است. برای مثال زمانی که یک developer در حال ویرایش فایل controller.js است، از آن جا که فایل مورد نظر checkout خواهد شد در نتیجه سایر developerها امکان تغییر در فایل مورد نظر را نخواهند داشت. سورس فایلها به مرور زیاد خواهد شد و در نتیجه debug آن سخت میشود.
روش دوم
در این حالت تعاریف کنترلر ها، مدلها و سرویسها هرکدام در یک دایرکتوری مجزا قرار خواهد گرفت. برای هر view یک کنترلر و بنا بر نیاز مدل تعریف میکنیم. ساختار آن به صورت زیر میشود:
(function()
{
var app = angular.module('app', []);
app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
{
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.routeProvider = $routeProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;
});
})(); angular.module('app').controllerProvider.resgister('SomeLazyController', function($scope)
{
$scope.key = '...';
}); $compileProvider.directive('SomeLazyDirective', function()
{
return {
restrict: 'A',
templateUrl: 'templates/some-lazy-directive.html'
}
}) $routeProvider.when('/about', {templateUrl:'views/about.html', resolve:{deps:function($q, $rootScope)
{
var deferred = $q.defer();
var dependencies =
[
'controllers/AboutViewController.js',
'directives/some-directive.js'
];
//*نکته اول
$script(dependencies, function()
{
// *نکته دوم
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}}}) $script(['appModule.js'], function()
{
angular.bootstrap(document, ['app'])
}); app.config([
'$stateProvider',
'$urlRouterProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
function ($stateProvider, $urlRouterProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
//برای رجیستر کردن غیر همروند اجزای انگیولاری در آینده
app.lazy =
{
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
.
.
.
]) angular.module('app').lazy.controller('myController',
['$scope', function($scope){
...
}]); <script type="text/javascript">
// --- Scriptjs ---
!function (a, b, c) { function t(a, c) { var e = b.createElement("script"), f = j; e.onload = e.onerror = e[o] = function () { e[m] && !/^c|loade/.test(e[m]) || f || (e.onload = e[o] = null, f = 1, c()) }, e.async = 1, e.src = a, d.insertBefore(e, d.firstChild) } function q(a, b) { p(a, function (a) { return !b(a) }) } var d = b.getElementsByTagName("head")[0], e = {}, f = {}, g = {}, h = {}, i = "string", j = !1, k = "push", l = "DOMContentLoaded", m = "readyState", n = "addEventListener", o = "onreadystatechange", p = function (a, b) { for (var c = 0, d = a.length; c < d; ++c) if (!b(a[c])) return j; return 1 }; !b[m] && b[n] && (b[n](l, function r() { b.removeEventListener(l, r, j), b[m] = "complete" }, j), b[m] = "loading"); var s = function (a, b, d) { function o() { if (!--m) { e[l] = 1, j && j(); for (var a in g) p(a.split("|"), n) && !q(g[a], n) && (g[a] = []) } } function n(a) { return a.call ? a() : e[a] } a = a[k] ? a : [a]; var i = b && b.call, j = i ? b : d, l = i ? a.join("") : b, m = a.length; c(function () { q(a, function (a) { h[a] ? (l && (f[l] = 1), o()) : (h[a] = 1, l && (f[l] = 1), t(s.path ? s.path + a + ".js" : a, o)) }) }, 0); return s }; s.get = t, s.ready = function (a, b, c) { a = a[k] ? a : [a]; var d = []; !q(a, function (a) { e[a] || d[k](a) }) && p(a, function (a) { return e[a] }) ? b() : !function (a) { g[a] = g[a] || [], g[a][k](b), c && c(d) }(a.join("|")); return s }; var u = a.$script; s.noConflict = function () { a.$script = u; return this }, typeof module != "undefined" && module.exports ? module.exports = s : a.$script = s }(this, document, setTimeout)
$script(['/Scripts/Lib/jquery/jquery-1.10.2.min.js'], function () {
$script(['/Scripts/Lib/angular/angular.js'], function () {
$script(['/Scripts/Lib/angular/angular-ui-router.min.js',
'/Scripts/Lib/angular/angular-resource.min.js',
'/Scripts/Lib/angular/angular-cache.min.js',
'/Scripts/Lib/angular/angular-sanitize.min.js',
'/Scripts/Lib/angular/angular-animate.min.js',
'/Scripts/Lib/angular/angular-cookie.min.js',
'/APP/Common/directives.js'
], function () {
$script('/app/app.js', function () {
angular.bootstrap(document, ['app']);
});
});
})
});
</script> resolve: {
fileDeps: ['$q', '$rootScope', function ($q, $rootScope) {
var deferred = $q.defer();
var deps = ['/app/HotStories/dataContextService.js',
'/app/HotStories/hotStController.js'];
$script(deps, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}]
} angular.module('app').lazy.service('dataContextService',
['$rootScope', '$resource', '$angularCacheFactory', '$q', function($rootScope, $resource, $cacheFactory, $q){
...
}]); angular.module('app').lazy.controller('hotStController',
['$scope', 'ipCookie', 'dataContextService', function($scope, ipCookie, dataContextService){
...
}]); $routeProvider.when('/about', {templateUrl:'views/about.html', resolve:{deps:function($q, $rootScope)
{
var deferred = $q.defer();
var dependencies =
[
'controllers/AboutViewController.js',
'directives/some-directive.js'
];
//*نکته اول
$script(dependencies, function()
{
// *نکته دوم
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}}}) (function()
{
return function(dependencies)
{
var definition =
{
resolver: ['$q','$rootScope', function($q, $rootScope)
{
var deferred = $q.defer();
$script(dependencies, function()
{
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}]
}
return definition;
}
}); angular.forEach(config.routes, function(route, path)
{
$routeProvider.when(path, {templateUrl:route.templateUrl, resolve:dependencyResolver(route.dependencies)});
}); var app = angular.module('app', ['anotherModule1' , 'anotherModule2' , 'anotherModule3']); angular.forEach(config.routes, function(route, path)
{
$routeProvider.when(path, {templateUrl:route.templateUrl, resolve:dependencyResolver(route.dependencies)});
}); Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the de...<omitted>...0) angular.js:78
Uncaught ReferenceError: app is not defined selectAllCheckbox.js:3
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.2.14/$injector/unpr?p0=%24routeProvider
at http://localhost:8417/Scripts/Angula...<omitted>...0)