Provide requirejs plugins for loading angular components
I will publish node component for generation plugins according to nested structure config. It will be more flexible and powerful and do not relate to any framework. Just plugins.
Ther are 7 plugins for loading angularjs components:
The goals:
File that return ngModule
define(function(require){
var ng = requrie('angular');
return ng.module('foo', []);
})
This plugin depends on requirejs text plugin. Used for loading templates.
Similar goal - load components.
Example application you could find here: https://github.com/tuchk4/requirejs-angular-loader-bootstrap
For example we have application with such structure:
app
|-modules
| |-menu
| | |-controller
| | | |-menu-controller.js
| | |-menu.js
| |-user
| |-controllers
| | |-profile.js
| |-resources
| | |-templates
| | | |-user-profile.html
| | |-directives
| | |-user-menu
| | |-user-menu.js
| | |-user-menu.html
| |-src
| | |-providers
| | | |-profile-information.js
| | |-factory
| | |-guest.js
| |-user.js
|-application.js
|-boot.js
We want to include menu ng module (/app/modules/menu/menu) in file:
require('module!user')
require('module!user')
require('module!@')
. @ - say to load current module that could be detected from path of the current file.We want to include user-controller (/app/modules/user/controllers/user-controller) in file:
require('controller!user:profile')
. Before ":" - module name, after - controller name.require('controller!user:profile')
require('controller!profile')
. So if you want to load controller from current module (current module I mean module under which current file is located) - you could write only controller name. Module will be detected from current path.Same for directives, services, templates, filters, configs.
Plugins should be configured using placeholders in requirejs.config({...}) under structure key.
requirejs.config({
baseUrl: '/application',
paths: {
'text': '../bower_components/requirejs-text/text',
'base': 'plugins/base',
'template': 'plugins/template',
'controller': 'plugins/controller',
'service': 'plugins/service',
'module': 'plugins/module',
'config': 'plugins/config',
'directive': 'plugins/directive',
'filter': 'plugins/filter'
},
structure: {
/**
* @description
* requirejs.config.baseUrl + structure.prefix
*
* requirejs.config.baseUrl = '/application'
* structure.prefix = modules/{module}
* {module} - module name
*
* result:
*
* application/modules/{module}
*/
prefix: 'modules/{module}',
module: {
path: '/{module}'
},
/**
* @description
*
* syntax:
* require('template!{module}:{template-name}');
*
* require('template!{template-name}') - in this case - will be used current module
* (which contains the current file)
*
* require('template!@{template-name}') - same as above
*
*
* if current module - foo (file where you use require is located under foo's module directory
* Example: /application/modules/foo/foo-include.js)
* next paths are same:
*
* require('template!bar')
* require('template!@bar')
* require('template!foo:bar')
*
* We will get:
*
* /resource/views/{template}.{extension}
* -> /resource/views/bar.html
* then: requirejs.config.baseUrl + module + template path
* -> /application/modules/foo/resource/views/bar.html
*
* baseUrl: /application
* modules dir: /modules
* module name: /foo
* template path: /resource/views/bar.html
*/
template: {
path: '/resources/views/{template}.{extension}',
extension: 'html'
},
/**
* @description
*
* Same for controller
*/
controller: {
path: '/controllers/{controller}'
},
/**
* @description
*
* Same for service
*/
service: {
path: '/src/{service}'
},
/**
* @description
*
* Same for config
*/
config: {
path: '/resources/configs/{config}'
},
/**
* @description
*
* Same for directive
*/
directive: {
path: '/resources/directives/{directive}'
},
/**
* @description
*
* Same for filter
*/
filter: {
path: '/resources/filter/{filter}'
}
},
shim: {
'angular': {
exports: 'angular'
},
'angular-route': {
deps: ['angular']
},
'angular-cache': {
deps: ['angular']
},
'angular-resource': {
deps: ['angular']
}
}
});
//test