{"id":22995583,"url":"https://github.com/thampe/angular-mage","last_synced_at":"2025-09-01T00:33:56.071Z","repository":{"id":20480252,"uuid":"23758198","full_name":"thampe/angular-mage","owner":"thampe","description":"Angular-Modules with some neat Magento functionality.","archived":false,"fork":false,"pushed_at":"2018-01-27T10:33:11.000Z","size":656,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T07:35:16.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thampe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-07T11:18:46.000Z","updated_at":"2023-10-31T03:24:37.000Z","dependencies_parsed_at":"2022-07-07T14:31:54.547Z","dependency_job_id":null,"html_url":"https://github.com/thampe/angular-mage","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/thampe/angular-mage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thampe%2Fangular-mage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thampe%2Fangular-mage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thampe%2Fangular-mage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thampe%2Fangular-mage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thampe","download_url":"https://codeload.github.com/thampe/angular-mage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thampe%2Fangular-mage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259804872,"owners_count":22913903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T05:29:57.594Z","updated_at":"2025-06-14T11:06:23.802Z","avatar_url":"https://github.com/thampe.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# This repository is no longer maintained.\n \nIssue reports and pull requests will not be attended.\n\n# Magento on Angular-Steroids\nAngular-Modules with some neat Magento functionality.\n\n## Installation\nInstall 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.\n\n## Usage\n\n### URL-Generation\nRequired Angular Module: ``mage.url``\n\nInspired by ``Mage::getUrl()``.\nSyntax: ``mageUrl.getUrl(path, params, secure)``\n\n```javascript\nangular\n    .module('app', ['mage.url'])\n    .controller('DemoUrlCtrl', ['mageUrl', function(mageUrl){\n\n        // Shop Url\n        var url = mageUrl.getUrl('catalog/product/view', {id: 1}); // =\u003e http://magento.dev/catalog/product/view?id=1\n        // Secure Shop Url\n        var secure = true;\n        var secureUrl = mageUrl.getUrl('catalog/product/view', {id: 1}, secure); // =\u003e https://magento.dev/catalog/product/view?id=1\n\n        //media url\n        var mediaUrl = mageUrl.getMediaUrl('dhl/logo.jpg'); // =\u003e http://magento.dev/media/dhl/logo.jpg\n\n        //skin url\n        //ATTENTION: You need to provide the design folder (e.g frontend/base/default)\n        var skinUrl = mageUrl.getSkinUrl('frontend/default/default/images/logo.gif'); // =\u003e http://magento.dev/skin/frontend/default/default/images/logo.gif\n\n        //js url\n        var jsUrl = mageUrl.getJsUrl('angular/angular.min.js'); // =\u003e http://magento.dev/js/angular/angular.min.js\n\n    }]);\n;\n```\n\n### Models and Collections\nRequired Angular Module: ``mage.model``\n\nQuery *any* Model/Collection you like. By default ``catalog/product`` and ``catlog/category`` are enabled.\n\n#### Models\nInspired by ``Mage::getModel($modelClass)-\u003eload($id, $identifier = null)``.\nSyntax: ``mageModel.getModel(modelClass, id, identifier);``, the identifier is optional and if not set defaults to the ``identifierName`` of the model.\n\n##### Examples\n\n```javascript\nangular\n    .module('app', ['mage.model'])\n    .controller('DemoModelCtrl', ['mageModel', function(mageModel){\n\n        //get the category with entity_id 3\n        mageModel.getModel('catalog/category', 3).then(function (category) {\n           console.log(category);\n        });\n\n        //get the product with sku 'ABC1234'\n        mageModel.getModel('catalog/product', 'ABC1234', 'sku').then(function (product) {\n           console.log(product);\n        });\n    }]);\n;\n```\n\n\n#### Collection\n\nInspired by ``Mage::getModel($modelClass)-\u003egetCollection()``.\nSyntax: ``mageModel.getCollection(modelClass, filters, select, limit, page);``.\n\n* ``filters`` work like ``$collection-\u003eaddAttributeToFilter()`` or ``$collection-\u003eaddFieldToFilter()``\n* ``select`` works like ``collection-\u003eaddAttributeToSelect()``\n* ``limit`` limits the collection size.\n* ``page`` the current page, only useful in combination with ``limit``\n\n\n##### Examples\n\n```javascript\nangular\n    .module('app', ['mage.model'])\n    .controller('DemoModelCtrl', ['mageModel', function(mageModel){\n\n        //get all products with color id = 3, select all attributes limit to 30 Result and get the first result page.\n        mageModel.getCollection('catalog/product', {color: 3}, ['*'], 30, 1).then(function (products) {\n           console.log(products);\n        });\n\n        //get all categories and select the name attribute.\n        mageModel.getCollection('catalog/category', {}, ['name']).then(function (categories) {\n           console.log(categories);\n        });\n    }]);\n;\n```\n\n#### Enable more Models\n\nEnable more Models, by adding them to your ``config.xml``\n\n##### Example\n\n```xml\n\u003c?xml version=\"1.0\"?\u003e\n\u003cconfig\u003e\n\u003c!-- (...) --\u003e\n    \u003cdefault\u003e\n        \u003cangular\u003e\n            \u003cmodels\u003e\n                \u003cunique_identifier\u003e \u003c!-- a unique indentier --\u003e\n                    \u003cmodel\u003enamespace/class\u003c/model\u003e \u003c!-- e.g customer/address --\u003e\n                    \u003callowed\u003etrue\u003c/allowed\u003e \u003c!-- optional: setting this to false will disbale this model --\u003e\n                    \u003cserializer\u003enamespace/serializer_class\u003c/serializer\u003e\n                    \u003c!-- optional: if you want to use a diffrent serializer (Default: Hampe_Angular_Model_Serializer_Default), your serializer must implement the Hampe_Angular_Model_Serializer_Interface  --\u003e\n                \u003c/unique_identifier\u003e\n                \u003c!-- (...) --\u003e\n            \u003c/models\u003e\n        \u003c/angular\u003e\n    \u003c/default\u003e\n\u003c/config\u003e\n```\n\n### Display Prices\nRequired Angular Module: ``mage.price``\nDisplay a price in the shop currency.\n\n#### Price Service\n\n```javascript\nangular\n    .module('app', ['mage.price'])\n    .controller('DemoPriceCtrl', ['magePriceFormat', function(magePriceFormat){\n\n        var formatedPrice = magePriceFormat.formatPrice(12.22) // =\u003e 12,22 €\n\n    }]);\n;\n```\n\n#### Price Filter\n\n```html\n\u003cdiv ng-app=\"app\"\u003e\n    \u003cdiv ng-controller=\"DemoPriceCtrl\"\u003e\n        \u003cspan\u003e{{ 12.22|formatPrice }}\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Price Directive\n\n```html\n\u003cdiv ng-app=\"app\"\u003e\n    \u003cdiv ng-controller=\"DemoPriceCtrl\"\u003e\n        \u003cmage-price value=\"12.22\"\u003e\u003c/mage-price\u003e \u003c!-- \u003cspan class=\"price\"\u003e12,22 €\u003c/span\u003e --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### Translate\nRequired Angular Module: ``mage.tranlator``\nUses the magento javascript translator, add your translations via a ```jstranslator.xml``` as always.\n\n#### Translator Service\n```javascript\nangular\n    .module('app', ['mage.tranlator'])\n    .controller('DemoTranslatorCtrl', ['mageTranslator', function(mageTranslator){\n\n        //add translation on the fly\n        mageTranslator.add('Hello World', 'Hallo Welt');\n\n        // translate\n        var germanHelloWorld = mageTranslator.translate('Hello World') // =\u003e \"Hallo Welt\"\n\n    }]);\n;\n```\n\n#### Translator Filter\n\n```html\n\u003cdiv ng-app=\"app\"\u003e\n    \u003cdiv ng-controller=\"DemoTranslatorCtrl\"\u003e\n            {{ \"HTML tags are not allowed\"|trans }}\n            \u003c!-- HTML-Tags sind nicht erlaubt --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Customer Information\nRequired Angular Module: ``mage.customer``\n\n#### Example\n\n```javascript\nangular\n    .module('app', ['mage.customer'])\n    .controller('DemoCustomerCtrl', ['mageCurrentCustomer', function(mageCurrentCustomer){\n\n        if(mageCurrentCustomer.isLoggedIn()) {\n            mageCurrentCustomer.getCurrentCustomer().then(function(customer){\n                console.log(customer);\n            });\n        }\n\n    }]);\n;\n```\n\n### Misc\n\nFor convenience, there is also an angular module ``mage``, which requires all mage-modules.\n\nAll AJAX-Requests include an auth-token (tied to the user session) in the header, to make XSS-attacks more difficult.\n\nThis software is not battle-tested (yet), so bugs are inclued for free.\n\n## Build\nUse [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.\n\n## License\nSee the [LICENSE](LICENSE) file for license info (it's the MIT license).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthampe%2Fangular-mage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthampe%2Fangular-mage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthampe%2Fangular-mage/lists"}