Using Angular and Sage? Read this! (examples)

archived đź—„
1

#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 or See the Diff.

##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 to handle my routes and UI 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!

Anyways, I know you want the code. Check it out or See the Diff.

5 Likes
2

Hey, that’s awesome, I just posted an angular-related question. How do you set it up to get html5mode(true) to work?

3

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!

4

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:

5

Seems nice, gonna play with it a bit next week, thanks! :smile:

1 Like
6

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

7

UI Boostrap will only work within instantiated Angular modules (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.

8

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.

9

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?