# Using Angular and Sage? Read this! (examples) **URL:** https://discourse.roots.io/t/using-angular-and-sage-read-this-examples/4924 **Category:** archived 🗄 **Created:** 2015-10-07T22:02:50Z **Posts:** 10 ## Post 1 by @JulienMelissas — 2015-10-07T22:02:51Z #Hey all! We’ve had numerous threads with people asking how to use Angular and Sage. It’s really not hard at all, but in order to help some people out with some real examples I’ve created a few branches forked off of Sage that should help get you started with good working examples of Sage and Angular. **Please keep in mind I probably won’t keep these branches up to date with Sage.** I’ve been in Angular-land the last 6 months and while this probably isn’t the right way to do everything, it’s worked okay for me! ##Simple Angular App Example You can check out the branch here, but here’s a small rundown of this tiny app: - I added `gulp-ng-annotate` to the build process cause it’s annoying to have to type scope stuff 2x - Angular is added via bootstrap, bundled into `main.js` with everything else (build time is ~12 seconds on my quick computer) - Angular logic, controllers, and bootstrap code are just placed at the top of `main.js` - That’s it. [Check it out](https://github.com/JulienMelissas/sage/tree/sage-angular) or [See the Diff](https://github.com/JulienMelissas/sage/commit/cac8b3045ca98e946408b3e01102d5a3add39249). ##Advanced Angular Example I find that most of my Angular projects get big and require an increased scope. Normally, I like to use [UI Router](https://github.com/angular-ui/ui-router) to handle my routes and [UI Bootstrap](https://angular-ui.github.io/bootstrap/) to add the Bootstrap JS back to my projects (we don’t need the regular Bootstrap JS anymore if we don’t want it anywhere else on the site). I also find that instead of using angular _everywhere_ on the site I normally just use it on “that special page”. Sage’s build process makes it very easy to do that. I’ve seperated everything out into it’s own `/assets/sage-app/` directory that should handle a good organization pattern of even some really large projects. Here’s a breakdown of what I added to my simple angular app: - Added angular-ui-router and angular-bootstrap - Custom `sage-app.js` file with all angular dependencies and js from the `/sage-app/` directory - New “page-sage-app” - Ability to create as many controllers in the /controllers/ folder - Ability to create as many partials in the /partials/ folder - Enqueuing the minified js file only on the one page we need it - Used `wp_localize_script` to expose the partials path via `GLOBALS.partialsPath` All you need to do to get this working is add a page in WP called “Sage App” and you should be up and running! I even made a gif! ![](https://discourse.roots.io/uploads/default/original/2X/6/6c37f3f861cf5b46fd0e2aa48cdcbf4ca15f3ee2.gif) Anyways, I know you want the code. [Check it out](https://github.com/JulienMelissas/sage/tree/sage-angular-advanced) or [See the Diff](https://github.com/JulienMelissas/sage/commit/d15508c8a05c1fbe9d6132478c18eaf9f276f360). --- ## Post 2 by @clov3rly — 2015-10-07T22:18:25Z Hey, that’s awesome, I just posted an [angular-related question](https://discourse.roots.io/t/internal-redirect/4925/1). How do you set it up to get html5mode(true) to work? --- ## Post 3 by @JulienMelissas — 2015-10-07T22:30:18Z Haha, yeah I saw. Unfortunately I’ve never had to deal with that problem. Personally, I actually prefer `/#/` urls on public sites normally, or sites that only have a little bit of Angular sprinkled in. I’m sorry - I wish I could help! --- ## Post 4 by @clov3rly — 2015-10-07T22:51:38Z No worries. I need to be able to add OG meta tags on the server based on the full url, which is why I need the html5 URL. Which is a shame, it’s working great right now… these business requirements are cramping my style :stuck_out_tongue: --- ## Post 5 by @darjanpanic — 2015-10-08T08:14:43Z Seems nice, gonna play with it a bit next week, thanks! :smile: --- ## Post 6 by @mindoza — 2015-10-25T18:11:28Z Thanks for examples, finally see it working on my machine! Since ui-bootstrap is part of sage-app is only available angular pages or I can use it in other pages too? thanks --- ## Post 7 by @JulienMelissas — 2015-10-26T01:07:48Z UI Boostrap will only work within instantiated Angular modules ([https://github.com/JulienMelissas/sage/commit/d15508c8a05c1fbe9d6132478c18eaf9f276f360#diff-2f6122efd8ec361e239562ca4874a9e0R5](https://github.com/JulienMelissas/sage/commit/d15508c8a05c1fbe9d6132478c18eaf9f276f360#diff-2f6122efd8ec361e239562ca4874a9e0R5)), so unless you had the script firing on every page, and ng-app on the entire page, it’s not going to run. --- ## Post 8 by @oivind — 2015-11-10T10:32:57Z Thanks for sharing! I cloned your sage-angular-advanced branch , but soon had some issues with CORS while testing over localhost. I modified .htaccess , adding this: ``` Header always set Access-Control-Allow-Origin: "http://10.0.0.19:3000" Header always set Access-Control-Allow-Origin: "http://localhost:3000" Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS" Header always set Access-Control-Allow-Headers "X-Requested-With, content-type" ``` this worked for desktop browsers but not when I tested on iPhone over LAN using the first url entry I added in above .htaccess Any thoughts or experience regarding this? I would really like to continue to use the Browsersync proxying workflow. --- ## Post 9 by @JulienMelissas — 2015-11-10T17:28:09Z Hmmm… What are you using to host the site? I’ll be honest in that I’m not a CORS expert, but I didn’t have to do anything on my Sage build to get it to open up on the phone when visiting `my-ip:3000`. I think that was on a VVV box? --- ## Post 10 by @ben — 2022-02-26T03:06:05Z