# AngurlarJS And Roots

**URL:** https://discourse.roots.io/t/angurlarjs-and-roots/1965
**Category:** uncategorized
**Created:** 2014-07-19T17:32:51Z
**Posts:** 10

## Post 1 by @xav — 2014-07-19T17:32:51Z

I looking for some theme project with Roots and AngularJS.  
Do you have worked with Roots ?

---

## Post 2 by @JulienMelissas — 2014-07-22T14:17:14Z

There is literally no reason why Angular shouldn’t work with roots. Go for it and post up some examples when you get something going!

---

## Post 3 by @hotbelgo — 2015-05-23T19:02:24Z

The easy way is just to install with bower and let gulp mix it in with your code. However, angular apps benefit from a couple of pre-uglification steps (ngAnnotate) and not sure how to add that to the gulp file.

You can also make the angular and angular-related stuff separately by adding e.g. the following to manifest.json

```
"vendor.js": {
  "bower": ["angular", "ngmap"]
},
```

---

## Post 4 by @xav — 2015-05-26T19:23:46Z

Thanks for that, nice things.

Is too bad, I have the solution with WP.

But for the route I can’t got my variable path with javascript and Sage, but this is work well with the Hook, exemple:

I used with wp\_localize\_script()  
[http://codex.wordpress.org/Function\_Reference/wp\_localize\_script](http://codex.wordpress.org/Function_Reference/wp_localize_script)  
My name variable is ‘myLocalized’ and is equal:

‘myLocalized.partials’ === get\_template\_directory\_uri().’/partials/’;

```
function my_scripts() {
  wp_register_script(
	'angularjs',
	get_stylesheet_directory_uri() . '/bower_components/angular/angular.min.js'
);
wp_register_script(
	'angularjs-route',
 	get_stylesheet_directory_uri() . '/bower_components/angular-route/angular-route.min.js'
	);

	wp_register_script(
		'angularjs-sanitize',
		get_stylesheet_directory_uri() . '/bower_components/angular-sanitize/angular-sanitize.min.js'
	);
	wp_register_script(
		'my-jquery',
		get_stylesheet_directory_uri() . '/bower_components/jquery/dist/jquery.min.js'
	);
	wp_enqueue_script(
	'my-scripts',
		get_stylesheet_directory_uri() . '/js/scripts.min.js',
		array( 'my-jquery', 'angularjs', 'angularjs-route', 'angularjs-sanitize' )
	);
	wp_localize_script(
		'my-scripts',
		'myLocalized',
		array(
			'partials' => trailingslashit( get_template_directory_uri() ) . 'partials/'
			)
	 );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
```

then in route I call my variable to get the path template

```
$routeProvider
  .when('/', {
    templateUrl: myLocalized.partials + 'main.html',
    controller: 'Main'
  })
```

I’m using WP\_API to get the data in main.html:

```
<a href="blog/{{post.ID}}" ng-bind-html="post.title"></a>
```

Any chance to get work with Sage + Angular + Route + Sanitize ?

I really want to build a theme with Sage and Angular.

EDIT:  
I used  
templateUrl: window.location.href.partials + ‘main.html’,  
But I still get an error to load the module app

---

## Post 5 by @kalenjohnson — 2015-05-26T23:08:46Z

For one, I’m not sure why you are enqueueing all those scripts on your own. They are most likely being pulled in with gulp to the `main.js` file. The gulp file is using `main-bower-files` to pull in whatever is declared in the Bower package’s `main`. You could possibly be getting errors because you’re loading all those packages separately and then again in `main.js`.

Second, why are you enqueueing jQuery yourself as `my-jquery`? Seems like you are most likely loading jQuery twice on the page with that.

---

## Post 6 by @xav — 2015-05-26T23:18:03Z

It’s an exemple without Sage and it work well, but with the wrapper and the concatenation doesn’t work.  
Maybe I need to use library third parties with Angular to concatenate ?

I just try to figure out.

I installed angular by Bower too.

```
"dependencies": {
    "modernizr": "2.8.2",
    "bootstrap-sass-official": "3.3.4",
    "angular": "~1.3.15",
    "angular-route": "~1.3.15",
    "angular-sanitize": "~1.3.15",
    "angular-slick": "latest",
    "jquery": "~2.1.4"
  },
```

Everything is concatened in main.js in this order ?

I got this error:

```
GET http://localhost:3000/angular-wp/undefinedmain.html 404 (Not Found)t @ angular.js:9866w @ angular.js:9667$get.c @ angular.js:9383u @ angular.js:13248(anonymous function) @ angular.js:13264$get.p.$eval @ angular.js:14466$get.p.$digest @ angular.js:14282$get.p.$apply @ angular.js:14571(anonymous function) @ angular.js:1455i @ angular.js:4203s @ angular.js:1453Q @ angular.js:1473X @ angular.js:1367(anonymous function) @ angular.js:26304m.Callbacks.j @ jquery.js?ver=1.11.2:2m.Callbacks.k.fireWith @ jquery.js?ver=1.11.2:2m.extend.ready @ jquery.js?ver=1.11.2:2J @ jquery.js?ver=1.11.2:2
angular.js:11655Error: [$compile:tpload] Failed to load template: undefinedmain.html
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=undefinedmain.html
    at angular.js:63
    at a (angular.js:16133)
    at u (angular.js:13248)
    at angular.js:13264
    at p.$get.p.$eval (angular.js:14466)
    at p.$get.p.$digest (angular.js:14282)
    at p.$get.p.$apply (angular.js:14571)
    at o (angular.js:9698)
    at v (angular.js:9888)
    at XMLHttpRequest.w.onload (angular.js:9829)
```

---

## Post 7 by @kalenjohnson — 2015-05-26T23:27:38Z

> [@xav](#):
>
> [http://localhost:3000/angular-wp/undefinedmain.html](http://localhost:3000/angular-wp/undefinedmain.html)

You should probably debug why that is what’s getting passed to JavaScript.

---

## Post 8 by @mindoza — 2015-09-05T13:23:07Z

Hi xav  
do you got any progress with Angular + Sage?  
I can’t make it work at all.  
read every post here …,

my files:

manifest.json

“angular.js”: {  
“bower”: [“angular”]  
}

assets.php

wp\_enqueue\_script(‘angular’, asset\_path(‘scripts/angular.js’), [] , null, true);

page.php

```
<div ng-app> <input type="text" ng-model="name"><p>Hello, {{name}}!</p> </div>v
```

please show me any small working example or sample repo so I can figure out how to setup angular. thanks

---

## Post 9 by @JulienMelissas — 2015-10-05T20:33:33Z

I’ve done this a few times recently. Will try and get a repo up here in the next week or so but beware - angular takes like 10 seconds to build if you’re going to put it into bower!

---

## Post 10 by @JulienMelissas — 2015-10-07T22:03:16Z

Hey guys - made a post here that should get you up and running!

> [@Using Angular and Sage? Read this! (examples)](https://discourse.roots.io/t/using-angular-and-sage-read-this-examples/4924):
>
> #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 work…