{"id":17133302,"url":"https://github.com/gilbox/angular-flux-routing-example","last_synced_at":"2025-07-25T10:32:56.213Z","repository":{"id":25420676,"uuid":"28849923","full_name":"gilbox/angular-flux-routing-example","owner":"gilbox","description":"Achieving Reasonable Scalability in Angular with Flux and Routing","archived":false,"fork":false,"pushed_at":"2015-02-21T04:18:44.000Z","size":211,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-14T19:42:43.612Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gilbox.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":"2015-01-06T06:23:08.000Z","updated_at":"2019-08-08T16:50:14.000Z","dependencies_parsed_at":"2022-08-25T21:41:20.458Z","dependency_job_id":null,"html_url":"https://github.com/gilbox/angular-flux-routing-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fangular-flux-routing-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fangular-flux-routing-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fangular-flux-routing-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fangular-flux-routing-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbox","download_url":"https://codeload.github.com/gilbox/angular-flux-routing-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227564803,"owners_count":17787070,"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-10-14T19:41:52.793Z","updated_at":"2024-12-01T13:11:19.641Z","avatar_url":"https://github.com/gilbox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-flux-routing-example\n============================\n\nAchieving Reasonable Scalability in Angular with Flux and Routing\n\n**NOTE: The routing code in this repo has been refactored (to be simpler) since I published the Medium article,\nbut the article does not yet have the updated code. The changes mostly effect `action-creator.js` and `stores.js`.**\n\nrunning\n=======\n\nThere is no build process, so just\n\n    npm install\n    npm start\n\nThen open [`http://localhost:3300/`](http://localhost:3300/)\n\n\nwhat's reasonable scalability?\n==============================\n\nfirst setup our routes in `routeStore`. We're using yahoo's [routr](https://github.com/yahoo/routr),\nit supports params the same way `ui-router` does but we don't need them for this example:\n\n    router: new Router({\n\n      home: {\n        path: '/',\n        method: 'get'\n      },\n\n      about: {\n        path: '/about',\n        method: 'get'\n      }\n\n    }),\n\nthen handle routing in our Action Creator [*like a boss*](http://gifstumblr.com/images/putting-sunglasses-on-like-a-boss_863.gif):\n\n\n    // we define all of our route handling logic here,\n    // these functions take the place of ui-router's resolve blocks\n    // navigate to home\n    home: function(route) {\n\n      // If colors have already loaded, just dispatch the `route` action\n      // This way, the colors will only be loaded once through the life-cycle\n      // of the application\n\n      if (! colorStore.colorsLoaded) {\n        // if colors haven't been loaded, show the loading indicator\n        // and send a request to colorApi\n        // once colors are loaded, dispatch the `loaded:colors` action to\n        // process the color data, then dispatch `route` to complete routing\n        // and finally dispatch `loadingIndicator:hide` to hide the loading indicator\n        dispatcher.dispatch('loadingIndicator:show');\n        colorApi.fetch().success(function(data) {\n          dispatcher.dispatch('loaded:colors', {colors: data});\n          dispatcher.dispatch('route', {route:route});\n          dispatcher.dispatch('loadingIndicator:hide');\n        });\n\n        return false;\n      }\n    },\n\n    // navigate to about\n    about: function(route) {\n\n      // whenever the 'about' route is loaded, we re-load\n      // the about data with aboutApi.\n      // This probably makes little sense in a real-world application,\n      // but contrast this to how the color data is only loaded one\n      // time in the 'home' route above\n\n      dispatcher.dispatch('loadingIndicator:show');\n\n      aboutApi.fetch().success(function(data) {\n        dispatcher.dispatch('loaded:about', {people: data});\n        dispatcher.dispatch('route', {route:route});\n        dispatcher.dispatch('loadingIndicator:hide');\n      });\n\n      return false;\n    },\n\nnow [tell me](https://github.com/gilbox/angular-flux-routing-example/issues)\nyou still want to use resolve blocks!?\n\n\nstill using ui-router?\n======================\n\nYeah, we're still using ui-router in this demo but it's only being used\nfor it's `ui-view` directive. We're not using it's state machine or URL\nmatching capabilities because they are too tightly coupled.\nSo `ui-router` could easily be replaced by any number of other solutions.\n\n\nnotes\n=====\n\nDon't try this at home: I hacked a browserified routr.js to expose Router\nglobally just to keep things simple for this demo.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Fangular-flux-routing-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbox%2Fangular-flux-routing-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Fangular-flux-routing-example/lists"}