Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thampe/angular-mage
Angular-Modules with some neat Magento functionality.
https://github.com/thampe/angular-mage
Last synced: 25 days ago
JSON representation
Angular-Modules with some neat Magento functionality.
- Host: GitHub
- URL: https://github.com/thampe/angular-mage
- Owner: thampe
- License: mit
- Created: 2014-09-07T11:18:46.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-01-27T10:33:11.000Z (almost 7 years ago)
- Last Synced: 2023-05-14T21:40:16.437Z (over 1 year ago)
- Language: PHP
- Size: 641 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# This repository is no longer maintained.
Issue reports and pull requests will not be attended.
# Magento on Angular-Steroids
Angular-Modules with some neat Magento functionality.
## Installation
Install it via [modman](https://github.com/colinmollenhour/modman). There is also a ``composer.json`` if you want to add it to *your* Composer-Repository. Or just copy the files in ``src/`` into your magento-instance.
## Usage
### URL-Generation
Required Angular Module: ``mage.url``
Inspired by ``Mage::getUrl()``.
Syntax: ``mageUrl.getUrl(path, params, secure)``
```javascript
angular
.module('app', ['mage.url'])
.controller('DemoUrlCtrl', ['mageUrl', function(mageUrl){
// Shop Url
var url = mageUrl.getUrl('catalog/product/view', {id: 1}); // => http://magento.dev/catalog/product/view?id=1
// Secure Shop Url
var secure = true;
var secureUrl = mageUrl.getUrl('catalog/product/view', {id: 1}, secure); // => https://magento.dev/catalog/product/view?id=1
//media url
var mediaUrl = mageUrl.getMediaUrl('dhl/logo.jpg'); // => http://magento.dev/media/dhl/logo.jpg
//skin url
//ATTENTION: You need to provide the design folder (e.g frontend/base/default)
var skinUrl = mageUrl.getSkinUrl('frontend/default/default/images/logo.gif'); // => http://magento.dev/skin/frontend/default/default/images/logo.gif
//js url
var jsUrl = mageUrl.getJsUrl('angular/angular.min.js'); // => http://magento.dev/js/angular/angular.min.js
}]);
;
```
### Models and Collections
Required Angular Module: ``mage.model``
Query *any* Model/Collection you like. By default ``catalog/product`` and ``catlog/category`` are enabled.
#### Models
Inspired by ``Mage::getModel($modelClass)->load($id, $identifier = null)``.
Syntax: ``mageModel.getModel(modelClass, id, identifier);``, the identifier is optional and if not set defaults to the ``identifierName`` of the model.
##### Examples
```javascript
angular
.module('app', ['mage.model'])
.controller('DemoModelCtrl', ['mageModel', function(mageModel){
//get the category with entity_id 3
mageModel.getModel('catalog/category', 3).then(function (category) {
console.log(category);
});
//get the product with sku 'ABC1234'
mageModel.getModel('catalog/product', 'ABC1234', 'sku').then(function (product) {
console.log(product);
});
}]);
;
```
#### Collection
Inspired by ``Mage::getModel($modelClass)->getCollection()``.
Syntax: ``mageModel.getCollection(modelClass, filters, select, limit, page);``.
* ``filters`` work like ``$collection->addAttributeToFilter()`` or ``$collection->addFieldToFilter()``
* ``select`` works like ``collection->addAttributeToSelect()``
* ``limit`` limits the collection size.
* ``page`` the current page, only useful in combination with ``limit``
##### Examples
```javascript
angular
.module('app', ['mage.model'])
.controller('DemoModelCtrl', ['mageModel', function(mageModel){
//get all products with color id = 3, select all attributes limit to 30 Result and get the first result page.
mageModel.getCollection('catalog/product', {color: 3}, ['*'], 30, 1).then(function (products) {
console.log(products);
});
//get all categories and select the name attribute.
mageModel.getCollection('catalog/category', {}, ['name']).then(function (categories) {
console.log(categories);
});
}]);
;
```
#### Enable more Models
Enable more Models, by adding them to your ``config.xml``
##### Example
```xml
namespace/class
true
namespace/serializer_class
```
### Display Prices
Required Angular Module: ``mage.price``
Display a price in the shop currency.
#### Price Service
```javascript
angular
.module('app', ['mage.price'])
.controller('DemoPriceCtrl', ['magePriceFormat', function(magePriceFormat){
var formatedPrice = magePriceFormat.formatPrice(12.22) // => 12,22 €
}]);
;
```
#### Price Filter
```html
{{ 12.22|formatPrice }}
```
#### Price Directive
```html
```
### Translate
Required Angular Module: ``mage.tranlator``
Uses the magento javascript translator, add your translations via a ```jstranslator.xml``` as always.
#### Translator Service
```javascript
angular
.module('app', ['mage.tranlator'])
.controller('DemoTranslatorCtrl', ['mageTranslator', function(mageTranslator){
//add translation on the fly
mageTranslator.add('Hello World', 'Hallo Welt');
// translate
var germanHelloWorld = mageTranslator.translate('Hello World') // => "Hallo Welt"
}]);
;
```
#### Translator Filter
```html
{{ "HTML tags are not allowed"|trans }}
```
### Customer Information
Required Angular Module: ``mage.customer``
#### Example
```javascript
angular
.module('app', ['mage.customer'])
.controller('DemoCustomerCtrl', ['mageCurrentCustomer', function(mageCurrentCustomer){
if(mageCurrentCustomer.isLoggedIn()) {
mageCurrentCustomer.getCurrentCustomer().then(function(customer){
console.log(customer);
});
}
}]);
;
```
### Misc
For convenience, there is also an angular module ``mage``, which requires all mage-modules.
All AJAX-Requests include an auth-token (tied to the user session) in the header, to make XSS-attacks more difficult.
This software is not battle-tested (yet), so bugs are inclued for free.
## Build
Use [gulp](http://gulpjs.com) to build and minify the javascript, if you feel the need to change or fix something. Issues and Pull requests are appreciated.
## License
See the [LICENSE](LICENSE) file for license info (it's the MIT license).