{"id":15452334,"url":"https://github.com/cryptix/gopherangulartutorial","last_synced_at":"2025-10-09T17:08:00.581Z","repository":{"id":17801568,"uuid":"20685634","full_name":"cryptix/GopherAngularTutorial","owner":"cryptix","description":"A port of the AngularJS.org tutorial to GopherJS","archived":false,"fork":false,"pushed_at":"2014-06-18T00:36:03.000Z","size":1663,"stargazers_count":19,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T13:52:14.872Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Go","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/cryptix.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-06-10T13:12:19.000Z","updated_at":"2018-09-01T00:15:59.000Z","dependencies_parsed_at":"2022-09-02T13:01:10.922Z","dependency_job_id":null,"html_url":"https://github.com/cryptix/GopherAngularTutorial","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cryptix%2FGopherAngularTutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cryptix%2FGopherAngularTutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cryptix%2FGopherAngularTutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cryptix%2FGopherAngularTutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cryptix","download_url":"https://codeload.github.com/cryptix/GopherAngularTutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249832702,"owners_count":21331654,"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-01T21:42:01.138Z","updated_at":"2025-10-09T17:07:55.547Z","avatar_url":"https://github.com/cryptix.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"GopherAngularTutorial\n=====================\n\nA port of the [AngularJS.org tutorial](https://docs.angularjs.org/tutorial) to [GopherJS](https://github.com/gopherjs/gopherjs) using the [go-angularjs](https://github.com/gopherjs/go-angularjs) wrapper.\n\nThis is a minimal fork of the original tutorial and I advice you to work through that one first if you don't know angular yet.\nMy aim was to see how far the angularjs wrapper for gopherjs is. I stripped out all the testing of the tutorial until jet. I also got rid of all the nodejs tools like bower to focus on the gopherjs stuff.\n\n\n## Step 0 - [Bootstrapping](https://docs.angularjs.org/tutorial/step_00)\n\nRun `go get github.com/gopherjs/go-angularjs` to get the angularjs wrapper code. It also fetches the gopherjs package.\n\nI included `public/index.html` which is simular to the original `app/index.html` but I link to CDN hosted versions of angularjs and bootstrap (again, to not use bower).\n\nRun `go run server.go` and open [localhost:3000](http://localhost:3000) with your browser to get started.\n\nIt is a minimal http server that hosts the `public` directory, much like the example in the [stdlib](http://golang.org/pkg/net/http/#example_FileServer) `http.FileServer`.\n\n\n## Step 1 - [Static Template](https://docs.angularjs.org/tutorial/step_01)\nI skipped this, nothing javascript related yet..\n\n## Step 2 - [Angular Templates](https://docs.angularjs.org/tutorial/step_02)\nNow the fun begins. The first controller in `app/app.go` is identical to the one in the original tutorial and is compiled to javascript like this: `gopherjs build app/*.go`. Which dumps a `contollers.js` and `app.js.map` in the directory you ran the `build` command in. There is a nicer way to do this:\n\n\n`gopherjs build -w -o public/app.js app/*.go`\n\nThe `-o` flag specifies where to write the output to and the `-w` watches for changes to the input source and rebuilds automatically.\n\n\n## Step 3 - [Filtering Repeaters](https://docs.angularjs.org/tutorial/step_03)\nThis makes no changes to the controllers but I included the changes to the HTML for completness.\n\n\n## Step 4 - [Two-way Data Binding](https://docs.angularjs.org/tutorial/step_04)\nThe `Age` field is added to the type `Phone` of the `PhoneListCtrl` to demo the `orderBy` feature of angular.\n\n\n## Step 5 - [XHRs \u0026 Dependency Injection](https://docs.angularjs.org/tutorial/step_05)\nHere we inject the HttpService of AngularJS into our controller to request JSON data of the phones, instead of hardcoding them all in our controller.\n\nThe wrapped service in go ([*ng.HttpService](http://godoc.org/github.com/gopherjs/go-angularjs#HttpService)) is pretty cool, in that it does the JSON unmarshall for you, just supply the type of data you expect as the first parameter. `[]Phone` in this case and you are done.\n\n~~One minor thing I tripped over at first is that you need to supply two arguments to the callback otherwise you get a panic like this: `runtime error: index out of range` and a callstack in js that is not really pretty...\nIt comes down to [this](https://github.com/gopherjs/go-angularjs/blob/master/http.go#L120) go code. The wrapped http service uses a hardcoded amount of arguments. I opend an [pull request](https://github.com/gopherjs/go-angularjs/pull/4) with a fix where it checks `len(in)` and gives you a nicer error if it is to short.~~ My PR landed, you now get a error message, explaining that you need two arguments in the callback.\n\n\n## Step 6 - [Templating Links \u0026 Images](https://docs.angularjs.org/tutorial/step_06)\nThis just addes some more ng-html markup to display the images of the phones as thumbnails.\n\n\n## Step 7 - [Routing \u0026 Multiple Views](https://docs.angularjs.org/tutorial/step_07)\nThis step introduces multiple views using the `ngRoute` module.\nI took the chance to break out the controllers into named functions. If they grew more they could be moved out to other go files.\n\n~~The only thing I need to complete this Step is the `$routeParams`, i need to investigate how the ngRoute module calls the controller.~~ [Pull Request #5](https://github.com/gopherjs/go-angularjs/pull/5) adds the missing `$routeParams` Wrapper.\n\n\n## Step 8 - [More Templating](https://docs.angularjs.org/tutorial/step_08)\nThis adds the http request to the `PhoneDetailCtrl` and extends the template with detailed data.\n\nThere is an Issue regarding setting the phone data on `$scope`. It seems that string slices are somehoe mangled, they come out in go string representation in the templates, which in this case means that angular tries to set the `src` attribute of the `img` tags to something like `http://localhost:3000/[%22img/phones/dell-streak-7.0.jpg%22,%22img/phones/dell-streak-7.1.jpg%22,%22img/phones/dell-streak-7.2.jpg%22,%22img/phones/dell-streak-7.3.jpg%22,%22img/phones/dell-streak-7.4.jpg%22,%22%22]`. I added seperate scopes for these until it is fixed.\n\n\n## Step 9 - [Filters](https://docs.angularjs.org/tutorial/step_09)\nThis just adds the Filter Module, basicly the same as in js.\n\n\n## Step 10 - [Event Handlers](https://docs.angularjs.org/tutorial/step_10)\nThis just adds a simple `ng-click` handler to the thumbnails in the detail view to change the big image.\n\n### TODO\n- [ ] Step 11\n- [x] The gopherjs wrapper seems to miss the angularjs `$routeParams`\n- [ ] Something is wrong with `[]string` inside structs\n- [ ] `RouteProvider` doesn't know about `redirectTo`\n- [x] Open Issue regarding the UTF8 encoding. It's [here](https://github.com/gopherjs/gopherjs/issues/47).\n- [ ] The testing part of the tutorial\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptix%2Fgopherangulartutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcryptix%2Fgopherangulartutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptix%2Fgopherangulartutorial/lists"}