{"id":22062789,"url":"https://github.com/ryan-haskell/docker-angular","last_synced_at":"2025-09-10T05:10:37.229Z","repository":{"id":88811428,"uuid":"67975866","full_name":"ryan-haskell/docker-angular","owner":"ryan-haskell","description":" An isolated AngularJS frontend container.","archived":false,"fork":false,"pushed_at":"2016-10-01T05:25:04.000Z","size":17,"stargazers_count":4,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-27T09:29:30.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"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/ryan-haskell.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-09-12T04:31:09.000Z","updated_at":"2019-06-16T15:51:02.000Z","dependencies_parsed_at":"2023-06-12T18:45:22.071Z","dependency_job_id":null,"html_url":"https://github.com/ryan-haskell/docker-angular","commit_stats":null,"previous_names":["ryan-haskell/docker-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Fdocker-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Fdocker-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Fdocker-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Fdocker-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryan-haskell","download_url":"https://codeload.github.com/ryan-haskell/docker-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227393748,"owners_count":17773338,"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-11-30T18:26:53.684Z","updated_at":"2024-11-30T18:26:55.024Z","avatar_url":"https://github.com/ryan-haskell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Docker | AngularJS\n\u003e An isolated AngularJS frontend container that offers an intuitive folder structure and a guided developer workflow.\n\n\n### Local Development\n\n1. Install [Docker](https://www.docker.com/products/docker).\n2. Run __`docker-compose up`__.\n3. That's it.\n\n\u003e Windows: Go to __[http://192.168.99.100:8000](http://192.168.99.100:8000)__ to get started.\n\n\u003e Linux/Mac: Go to __[http://localhost:8000](http://localhost:8000)__ to get started.\n\n\n### Project Architecture\n\u003e This frontend project was designed to help guide developers in the right direction when making decisions for their website or application.\n\n---\n\n#### Introduction\n\nAs a frontend developer, the __`app`__ folder should serve as your root directory. Any changes you make will \"magically\" bundle into the correct folder behind the scenes in your docker container. If there is ever a syntactical error in this process, it will be clearly displayed in the terminal running your `docker-compose up` command.\n\nThe entrypoint of this application is __`index.html`__. It is a simple template that does the following things:\n- Imports `style.css` (bundled .scss files)\n- Imports `angular.min.js` (minified AngularJS framework)\n- Imports `bundle.js` (bundled JS files)\n- Renders content within `\u003cdiv ng-view\u003e\u003c/div\u003e` (where your page will render)\n\nThe entrypoint for the AngularJS application is __`index.js`__. This file is in charge of loading the router, as well as other dependencies your application may have. It is also the entrypoint for our JS bundler.\n\nThe application routes are defined in the __`routes.js`__ file. All this file does is render the appropriate component into the `ng-view` div, as mentioned before. We'll discuss components in a bit.\n\nThe __`index.scss`__ file serves as the entrypoint for our styles. Sass allows us to modularize our styles, similar to how AngularJS will enable us to modularize our logic. It will be the entrypoint for our SASS bundler.\n\nOur application will primarily be composed of _components_ (views for the user) and _services_ (view-independent logic).\n\nWhether creating a _component_ or a _service_, you will be creating an isolated, testable module. This means that all of the code relevant to that module will be neatly stored in a designated folder.\n\n---\n\n#### Folder Structure\n\n- ___index.html___ (main entrypoint)\n- ___index.js___ (js entrypoint)\n- ___routes.js___ (route configuration)\n- ___index.scss___ (css entrypoint)\n- __shared/__ (modules shared across pages)\n  - __example-cmpt/__ (shared component)\n    - ___index.js___ (creates module, requires dependencies)\n    - ___tpl.html___ (content to display)\n    - ___ctrl.js___ (exposes and maintains view model)\n    - ___style.scss___ (specifies component-specific styles)\n    - ___spec.js___ (tests all __public__ interfaces of component)\n  - __example-service/__ (shared service)\n    - ___index.js___ (creates module, requires dependencies)\n    - ___srvc.js___ (exposes and maintains data model)\n    - ___spec.js___ (tests all __public__ interfaces of service)\n- __pages/__ (pages in the application)\n  - ___index.js___ (creates _pages_ module, requiring page folders)\n  - __welcome-page-cmpt/__ (example page)\n    - (matches _example-component_ structure)\n    - __page-specific-cmpt/__ (some component only used in _welcome-page_)\n      - (matches _example-component_ structure)\n  - __.../__ (other pages)\n\n---\n\n#### Example Component\n\n__`index.js`__\n\n```js\nangular.module(module.exports = 'exampleCmpt', [])\n    .component(module.exports, {\n        template: require('./tpl.html'),\n        controller: require('./ctrl')\n    });\n```\n\n__`tpl.html`__\n```html\n\u003c!-- Example Component --\u003e\n\u003ch1 class=\"example-header\" ng-bind=\"$ctrl.name\"\u003e\u003c/h1\u003e\n\u003cinput type=\"text\" class=\"example-input\" ng-model=\"$ctrl.name\"\u003e\n```\n\n__`ctrl.js`__\n```js\nmodule.exports = [function(){\n\n    // All properties of '$ctrl' are exposed to template\n    var $ctrl = this;\n\n    // Available in template\n    $ctrl.name = 'Jack';\n\n    // Private to controller\n    var hiddenName = 'Jill';\n\n}];\n```\n\n__`style.scss`__\n```sass\nexample-cmpt {\n\n    .example-header {\n      font-family: Arial;\n    }\n\n    .example-input {\n      /* Style your input */\n    }\n\n}\n```\n\n__`spec.js`__\n```js\ndescribe('exampleCmpt', function() {\n\n    var ctrl;\n\n    beforeEach(function(){\n\n        // Load module\n        angular.mock.module(require('.'));\n\n        // Initialize component\n        inject(function($componentController) {\n            ctrl = $componentController('exampleCmpt', {});\n        });\n\n    });\n\n    it('has initial name set to John', function(){\n\n        expect(ctrl.name).toEqual('John');\n\n    });\n\n});\n```\n\n---\n\n#### Example Service\n\n__`index.js`__\n\n```js\nangular.module(module.exports = 'ExampleSrvc', [])\n    .service( module.exports, require('./srvc') );\n```\n\n__`srvc.js`__\n```js\nmodule.exports = [function(){\n\n  var srvc = this;\n\n  srvc.data = {\n    person: {\n      name: 'Jack',\n      age: 21,\n    }\n  };\n\n}];\n```\n\n__`spec.js`__\n```js\ndescribe('ExampleSrvc', function() {\n\n    var ExampleSrvc;\n\n    beforeEach(function(){\n\n        angular.mock.module(require('.'));\n\n        inject(function(_ExampleSrvc_) {\n            ExampleSrvc = _ExampleSrvc_;\n        });\n\n    });\n\n    it('has right name',function(){\n\n        expect(ExampleSrvc.data.person.name).toEqual('Jack');\n\n    });\n\n});\n```\n\n---\n\n#### Unit Testing\n\nYou may have noticed that the `spec.js` files require you to write tests for all _public_ interfaces. For _component_ controllers, this means that if a function is not private to the controller, it needs to be tested to define and validate the purpose of that function. The same rule applies to _services_.\n\nThis rewards privatizing functions that aren't necessary to expose. Unit tests also help keep modules lightweight and focused.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Fdocker-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryan-haskell%2Fdocker-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Fdocker-angular/lists"}