This project demonstrates two approaches (v1 & v2) to create an AngularJS and Three.js app. You can view the accompanying presentation on Google Slides.
Both approaches create the same app, a simple 3D model viewer.
- Most common Angular pattern (angularjs.org docs demonstrate this approach)
- Uses grunt to uglify / minify
- Uses Angular factories, services, filters, directives
- Bootstraps components from ng-controller in DOM
- Prototypal Pattern for Everything!
- Bridge to Angular 2.0
- Controller as (local scope)
- Closure Compilation
- Annotations including @ngInject
- type checking
- --angular_pass
- Dependency chains (goog.provide / goog.require)
- minification
- No closure pattern (factories). Services only.
- App.js initialization for all components.
- Do a
git pull https://github.com/cubicleDowns/ng-three-viewer.git - You will probably have to install some grunt packages in both the v1 & v2 directories.
- npm install grunt-package-name
- Open up the repo and run a server from the ng-three-viewer/ directory
- grunt serve
- python -m SimpleHTTPServer
- or whatever.
- Browse to SERVER_NAME:PORT
- Compiled Versions:
- /v1/dist/
- /v2/dist/
- Uncompiled Versions:
- /v1/
- /v2/
- From v1/
grunt build
- Joins all library files into libs.js
- Minifies and ngAnnnotates
- Exports the files to /v1/dist/
- Uncomment
- //goog.require('Viewer.Scene'); in app.js
- //goog.require's in scene.js
- From v2/
grunt - Will show any warnings or errors from compilation
- If no errors, it'll output /v2/dist/app.min.js