AngurlarJS And Roots

1

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

2

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!

3

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"]
},
4

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
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

5

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.

6

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)
7

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

8

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

1 Like
9

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!

2 Likes
10

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

1 Like