{"id":20409140,"url":"https://github.com/tcorral/methodology-angular-development","last_synced_at":"2026-02-08T19:02:35.892Z","repository":{"id":141832305,"uuid":"46169522","full_name":"tcorral/methodology-angular-development","owner":"tcorral","description":null,"archived":false,"fork":false,"pushed_at":"2015-11-19T14:32:01.000Z","size":132,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-17T07:46:31.338Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tcorral.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-14T09:51:01.000Z","updated_at":"2018-10-09T09:07:11.000Z","dependencies_parsed_at":"2023-03-13T18:59:36.610Z","dependency_job_id":null,"html_url":"https://github.com/tcorral/methodology-angular-development","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tcorral/methodology-angular-development","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fmethodology-angular-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fmethodology-angular-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fmethodology-angular-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fmethodology-angular-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tcorral","download_url":"https://codeload.github.com/tcorral/methodology-angular-development/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcorral%2Fmethodology-angular-development/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29240130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T18:06:38.086Z","status":"ssl_error","status_checked_at":"2026-02-08T18:06:09.124Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-15T05:39:49.246Z","updated_at":"2026-02-08T19:02:35.855Z","avatar_url":"https://github.com/tcorral.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Development Methodology\n\n### About\n\nThis styleguide is aimed at front-end developers interested in developing for the Backbase CXP platform using the [AngularJS](https://angularjs.org/) framework. The objective is to present the best practices for Backbase Widget and Portal development using Angular\n\n\n### References\n\nMost of the contents of this styleguide were inspired by various external resources:\n - [The AngularJS Developer Guide](https://docs.angularjs.org/guide)\n - [John Papa's styleguide](https://github.com/johnpapa/angularjs-styleguide)\n - [Todd Motto's style guide](https://github.com/toddmotto/angularjs-styleguide)\n\nFurthermore, knowledge of [Backbase's Widget Development Methodology](https://github.com/Backbase/methodology-widget-development) is recommended.\n\n### Table of Contents\n\n - [Coding Conventions](#coding-conventions)\n    - [Naming Conventions](#naming-conventions)\n        - [Variables](#variables)\n        - [Controllers \u0026 Factories](#modules-controllers--factories)\n        - [Directives](#directives)\n        - [Methods](#methods)\n    - [Overall Conventions](#overall-conventions)\n - [Performance](#performance)\n    - [Controllers \u0026 $scope](#controllers--scope)\n    - [Factories](#factories)\n    - [Directives](#directives-1)\n    - [Filters](#filters)\n - [Example widgets](#example-widgets)\n    - [Using Angular with Require.js](#using-angular-with-requirejs)\n    - [Using 'ControllerAs'](#using-controlleras)\n    - [Avoiding $watchers in controllers](#avoiding-watchers-in-controllers)\n    - [Avoiding $scope references in controllers](#avoiding-scope-references-in-controllers)\n    - [$log](#log)\n    - [Directives](#directives-2)\n    - [Bind Once](#bind-once)\n    - [Angular Hint](#angular-hint)\n - [Advanced Topics](#advanced-topics)\n\n## Coding Conventions\n\n### Naming Conventions\n\nThe value of naming conventions is to simplify collaboration amongst developers, making it easy for other developers in your team to pick up and understand your code. As a general rule, be explicit with your naming, **do not use single letters or abbreviations to reference variables or methods**, be as verbose as you need to be. This will have no impact on the performance of your code once optimised for production, and it will improve collaboration amongst developers.\n\n#### Variables\n\nVariable names should be camel-cased, as such:\n\n```javascript\nvar viewModel = this;\n```\n\n#### Modules, Controllers \u0026 Factories\n\nKeep naming of modules, controllers and factories consistent. For example, let's say we are building a \"todo\" app, naming should be as follows:\n\n```javascript\n// Module\nvar module = angular.module('Todo', []);\n// controller\nmodule.controller('TodoController', [function() {}]);\n// factories\nmodule.factory('TodoFactory', [function() {}]);\n```\n\n#### Directives\n\nDirectives Names should be camel-cased, and prepended with the bundle's initials. For example, let's say your bundle is called \"angularbundle\":\n\n```javascript\nmodule.directive('abSelect', [function() {}])\n```\n\nThen, you can use your directive as such:\n\n```html\n\u003cab-select\u003e\u003c/ab-select\u003e\n```\n\n#### Methods\n\nMethods names should be camel-cased. Also, keep methods and properties names consistent across shared methods, for example:\n\n```javascript\nmodule.controller('TodoController', ['TodoFactory', function(TodoFactory) {\n    this.someMethod = TodoFactory.someMethod;\n}]);\n```\n\n### Overall Conventions\n - If there is **only one controller** for your widget, instantiate the controller on the body tag of your widget definition, .i.e: `\u003cbody ng-controller=\"TodoController\"\u003e`\n - Always use the `ng-cloak` class on the body tag of your widget definition to avoid FOUC problems when loading the widget\n - Avoid using Angular's `$on`, `$broadcast` and `$emit` methods. Instead, use backbase's own PubSub library for [inter-widget communication](https://my.backbase.com/resources/how-to-guides/inter-widget-communication)\n - Do not chain modules, controllers, factories and directives. Instead, create an Angular module and cache it in a variable for faster access\n - Explicitly inject your dependencies. This will avoid problems when minifying your JavaScript code for production:\n\n```javascript\n// good practice\nmodule.controller('TodoController', ['$http', function($http) {\n    ...\n}]);\n\n// bad practice\nmodule.controller('TodoController', function($http) {\n    ...\n});\n```\n\n## Performance\n\nThere are a few key points to pay attention to when developing widgets using Angular which can greatly impact the overall performance of your application.\n\n### Controllers \u0026 $scope\n\n - Treat Angular's $scope as **read-only in templates \u0026 write-only in controllers**. The purpose of the $scope is to refer to a model, not to be a model (models should be handled in factories)\n\n - When doing bidirectional binding (ng-model) make sure you don't bind directly to scope properties, for this will have unexpected behavior in child scopes. To avoid any problems, put always a `.` in your ng-model. Having a `.` in your models will ensure that prototypal inheritance is in play:\n\n```html\n\u003c!-- good practice --\u003e\n\u003cinput type=\"text\" ng-model=\"someObj.prop1\"\u003e\n```\n```html\n\u003c!-- bad practice --\u003e\n\u003cinput type=\"text\" ng-model=\"prop1\"\u003e\n```\n\n - If you really want/need to use a primitive, there are two workarounds:\n    1. Use `$parent.parentScopeProperty` in the child scope. This will prevent the child scope from creating its own property.\n    2. Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)\n\nA few important points to remember about controller:\n - Controllers should hold zero logic\n - Controllers should never handle DOM manipulation! Use directives for this\n - Controllers should bind references to Models only (and call methods returned from promises)\n - Controllers drive Model changes, and View changes. Keyword: **drives**, not creates/persists, it triggers them!\n - Use \"Controller as\" when you don't need to explicitly use $scope\n - Try to avoid injecting $scope into Controllers, generally there are better ways to do what you need, such as avoiding $scope.$watch(), for instance you can define a shared factory, like this:\n\n```html\n\u003c!-- use 'controller as' to access controller properties --\u003e\n\u003cdiv ng-controller=\"FirstCtrl as ctrl\"\u003e\n        \u003cinput ng-model=\"ctrl.variable1.value\"/\u003e\n    \u003c/div\u003e\n    \u003cdiv ng-controller=\"SecondCtrl as ctrl2\"\u003e\n        \u003cinput ng-model=\"ctrl2.variable2.value\"/\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```javascript\n// define a module to hold your data\nvar data = angular.module('factories', []);\n\n// create a mediator factory which will persist the data\ndata.factory(\"MediatorFactory\", function() {\n    return {\n        obj: {\n            value: \"\"\n        }\n    };\n});\n\n// create an app, lading the data module as a dependency\nvar app = angular.module('test', ['factories']);\n\n// create two controllers, and inject the mediator as a dependency of each controller\napp.controller(\"FirstCtrl\", [\"MediatorFactory\", function(mediator) {\n    this.variable1 = mediator.obj;\n}])\napp.controller(\"SecondCtrl\", [\"MediatorFactory\", function(mediator) {\n    this.variable2 = mediator.obj; // this.variable2 = this.variable1 in the controller1\n}]);\n```\n\n### Factories\n\n - Delegate updating of logic inside Factories, don't resolve data inside a Controller, only update the Controller's value with updated Factory logic, this avoids repeated code across Controllers as well as Factory tests made easier\n - Factories hold the Model, change, get, update, and persist the Model changes\n - Think about the Factory as an Object that you need to persist, rather than persisting inside a Controller\n - Talk to other Factories inside your Factory, keep them out the Controller (things like success/error handling)\n\n### Directives\n\n - Directives are meant to handle DOM manipulation\n - Avoid using jQuery if you don't explicitly need to, this will save you about ~100Kb and an extra HTTP request\n    - Angular comes bundled with `jqLite`, which is more than enough to handle most common DOM manipulation and event binding operations\n    - If you need to do AJAX calls, use Angular's built-in `$http` service instead of `$.ajax`\n - Directives can access the $scope of the controller it lives in; however, the scope should be considered read-only in a directive, so you should never update a scope value from a directive! Alternatively, you can use [directive's isolated scopes](http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope)\n\n### Filters\n\nFilters are extremely expensive performance-wise. Each filter creates a watcher, which get ran twice whenever the model is modified. Therefore, you should be cautious about using Angular's built-in filters, and you should avoid to build your own filters at all cost.\n\n## Example Widgets\n\n### Using Angular with Require.js\n\nIn this simple example, we show you how to load and use AngularJS in a Require.js module. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-widget)\n\n### Using 'ControllerAs'\n\nIn this example, we show you how to use the \"controller as\" feature to remove dependency on the $scope. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-controller-as)\n\n### Avoiding $watchers in controllers\n\nIn this example, we show you how to avoid using $watchers in your controller by making use of a mediator factory. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-avoid-watcher)\n\n### Avoiding $scope references in controllers\n\nIn this example, we show you how avoid $scope references in your controller by pulling data from a factory.  [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-consume-data-factory)\n\n### $log\n\nIn this example, we show you how to use Angular's built-in $log for better reporting in the console. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-log)\n\n### Directives\n\nIn this example, we show you how to use directives. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-directives)\n\n### Bind Once\n\nIn this example, we show you how to use the one-time binding feature from angular 1.3 in 1.2. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-bindonce)\n\n### Angular Hint\n\nIn this example, we show you how to use Angular's hint feature in 1.2. [[View Code]](angularbundle/src/main/webapp/static/angularbundle/widgets/angular-hint)\n\n## Advanced Topics\n\nBelow is a list of articles about specific topics such as: migration options, advanced usage tips, etc...\n\n - [Migrating To Angular 1.3](advanced_topics/migrating_to_angular_13.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fmethodology-angular-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftcorral%2Fmethodology-angular-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcorral%2Fmethodology-angular-development/lists"}