I looking for some theme project with Roots and AngularJS.
Do you have worked with Roots ?
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!
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"]
},
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
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.
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)
You should probably debug why that is whatâs getting passed to JavaScript.
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
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!
Hey guys - made a post here that should get you up and running!