A port of the AngularJS.org tutorial to GopherJS using the go-angularjs wrapper.
This 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. My 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.
go get github.com/gopherjs/go-angularjs to get the angularjs wrapper code. It also fetches the gopherjs package.
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).
go run server.go and open localhost:3000 with your browser to get started.
It is a minimal http server that hosts the
public directory, much like the example in the stdlib
Now the fun begins. The first controller in
gopherjs build app/*.go. Which dumps a
app.js.map in the directory you ran the
build command in. There is a nicer way to do this:
gopherjs build -w -o public/app.js app/*.go
-o flag specifies where to write the output to and the
-w watches for changes to the input source and rebuilds automatically.
This makes no changes to the controllers but I included the changes to the HTML for completness.
Age field is added to the type
Phone of the
PhoneListCtrl to demo the
orderBy feature of angular.
Here we inject the HttpService of AngularJS into our controller to request JSON data of the phones, instead of hardcoding them all in our controller.
The wrapped service in go (*ng.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.
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: My PR landed, you now get a error message, explaining that you need two arguments in the callback.
runtime error: index out of range and a callstack in js that is not really pretty...
It comes down to this go code. The wrapped http service uses a hardcoded amount of arguments. I opend an pull request with a fix where it checks
len(in) and gives you a nicer error if it is to short.
This just addes some more ng-html markup to display the images of the phones as thumbnails.
This step introduces multiple views using the
I took the chance to break out the controllers into named functions. If they grew more they could be moved out to other go files.
The only thing I need to complete this Step is the Pull Request #5 adds the missing
$routeParams, i need to investigate how the ngRoute module calls the controller.
This adds the http request to the
PhoneDetailCtrl and extends the template with detailed data.
There 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.
This just adds the Filter Module, basicly the same as in js.
This just adds a simple
ng-click handler to the thumbnails in the detail view to change the big image.
RouteProviderdoesn't know about