{"id":20314320,"url":"https://github.com/normandy72/routing","last_synced_at":"2026-05-06T17:36:10.994Z","repository":{"id":153902829,"uuid":"591242146","full_name":"Normandy72/Routing","owner":"Normandy72","description":"Routing in AngularJS. Coursera course \"Single Page Web Applications with AngularJS\" by Yaakov Chaikin.","archived":false,"fork":false,"pushed_at":"2023-01-20T10:37:01.000Z","size":164,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-24T21:46:03.863Z","etag":null,"topics":["angular","angularjs","css","css3","html","html5","javascript","js"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/Normandy72.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,"publiccode":null,"codemeta":null}},"created_at":"2023-01-20T09:17:25.000Z","updated_at":"2023-01-20T10:37:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"d66ff780-9699-449b-b3a2-03513dd56c83","html_url":"https://github.com/Normandy72/Routing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Normandy72/Routing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FRouting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FRouting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FRouting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FRouting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Normandy72","download_url":"https://codeload.github.com/Normandy72/Routing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FRouting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32704757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["angular","angularjs","css","css3","html","html5","javascript","js"],"created_at":"2024-11-14T18:14:48.757Z","updated_at":"2026-05-06T17:36:10.977Z","avatar_url":"https://github.com/Normandy72.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Routing\n### For routing we can use:\n#### ngRoute\n* Separate JS file.\n* Developed by Google \u0026 community.\n* No concept of UI state.\n* Every route must be represented by a URL.\n* No concept of nested views.\n* OK for prototype projects.\n#### ui-router\n* Separate JS file.\n* Developed by community.\n* UI state in center. Can have a route with no unique URL for that route.\n* URL routing is also supported. UI state is updated based on the URL.\n* Neated views suppurted.\n* Better choice for more serious projects.\n\n### Steps to using routing\n#### Step 1: Reference in HTML\n```\n\u003cscript src=\"lib/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"lib/angular-ui-router.min.js\"\u003e\u003c/script\u003e\n```\n`\u003cscript src=\"lib/angular-ui-router.min.js\"\u003e\u003c/script\u003e` - reference _after_ angular\n#### Step 2: Place ui-view Initial View Placeholder\n```\n\u003cbody\u003e\n    ...\n    \u003cui-view\u003e\n        // content of a view will be loaded here\n    \u003c/ui-view\u003e\n    ...\n\u003c/body\u003e\n```\n#### Step 3: Declare ui-router As a Dependency\n`angular.module('App', ['ui.router']);`\n\n`'ui.router'` - module name uses '.', not '-'\n#### Step 4: Configure Routes in .config Method\n```\nangular.module('App')\n.config(RoutesConfig);\n\nRoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];\nfunction RoutesConfig($stateProvider, $urlRouterProvider){\n    ...\n};\n\n...\n$stateProvider\n    .state('view1', {\n        url: '/view1',\n        template: '\u003cdiv\u003e ... \u003c/div\u003e'\n        // or\n        // templateURL: 'view1.html'\n    })\n\n    .state('view2', {...});\n```\n`'view1'` - unique state name\n\n` url: '/view1'` - _optional_ URL associated with the state\n\n`template: '\u003cdiv\u003e ... \u003c/div\u003e'` - contents of template will be inserted into `\u003cui-view\u003e...\u003c/ui-view\u003e`\n\n`.state('view2', {...});` - state method is chainable\n\n```\n$urlRouterProvider\n    .otherwise(''/view1');\n\n...\n$stateProvider\n    .state('view1', {\n        url: '/view1',\n        ...\n    });\n```\n***\n#### _Summary_\n* `ui-router` uses independent concepts for URL mapping and UI state representation.\n* Configure ui-router in angular.config:\n    * provide alternate URL mapping with `$urlRouterProvider.otherwise('alternateURL');`;\n    * configure states with optional URLs using `$stateProvider.state('name', {url: '...', templateUrl: '...'})`.\n* Use `\u003cui-view\u003e` tag as placeholder for state-based UI.\n* Use `ui-sref` attribute for constructing links and actions to configured states.\n***","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Frouting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormandy72%2Frouting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Frouting/lists"}