Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuchk4/requirejs-angular-loader
Provide requirejs plugins for loading angular components
https://github.com/tuchk4/requirejs-angular-loader
Last synced: 22 days ago
JSON representation
Provide requirejs plugins for loading angular components
- Host: GitHub
- URL: https://github.com/tuchk4/requirejs-angular-loader
- Owner: tuchk4
- Created: 2014-03-18T12:05:09.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-06-01T22:01:59.000Z (over 9 years ago)
- Last Synced: 2024-10-03T12:33:12.178Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 190 KB
- Stars: 40
- Watchers: 5
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Important
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.
## Loading angular components with requirejs
Ther are 7 plugins for loading angularjs components:
- module
- template
- controller
- service
- directive
- config
- filter
The goals:
- Add module support to application. Module - means not ng module but something like "namespace" for controllers, directives, filters, templates etc;
- Reduce code dependecy on application structure and module's names.
#### Module
File that return ngModule
```javascript
define(function(require){
var ng = requrie('angular');
return ng.module('foo', []);
})
```
#### Template
This plugin depends on requirejs text plugin. Used for loading templates.
#### Controller / Service / Directive / Filter / Config
Similar goal - load components.
Examples
========
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:
- **/app/application.js** - `require('module!user')`
- **/app/modules/user.js** - `require('module!user')`
- **/app/modules/menu/menu-controller.js** - `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:
- **/app/application.js** - `require('controller!user:profile')`. Before **":"** - module name, after - controller name.
- **/app/modules/user.js** - `require('controller!user:profile')`
- **/app/modules/user/user.js** - `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**.
Configuration
========
Plugins should be configured using placeholders in requirejs.config({...}) under structure key.
```javascript
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