Jump to content

AngularJS routing with ProcessWire

evanmcd

By evanmcd,
in General Support

 Share

Recommended Posts

evanmcd Sr. Member

evanmcd

Posted
Posted

Hi all,

Starting up a web app and planning to use PW and AngularJS together for the first time.

However, I'm having trouble getting Angular's routing to work.  It seems that PW's rewrites are taking precedence so whenever I navigate to a URL that's defined in an Angular route, PW throws a 404 error.

Has anyone successfully setup Angular's routing with ProcessWire?

Would love to learn how it's done.

Thanks!

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

Just guessing that those urls you request don't exist in PW, so you'll get a 404. Solution could be to have url segments enabled for root template.

So a url like 

domain.com/phones

if a page /phones/ doesn't exist it won't throw an 404, but just route the request to the home template.

  • Like 2
Link to comment
Share on other sites
evanmcd Sr. Member

evanmcd

Posted
  • Author
Posted

Thanks for the quick replies.  @Soma, enabling url segments is a great idea (wish I'd thought of it) and it did the trick.

The way it ends up as far as URLs go, is like this: http://example.com/pw-managed-page/#/start-of-angular-routes.

The code for my router configuration is like this:

var MyAppRoutes = angular.module('MyApp', ['ngRoute']);

function routeConfig($routeProvider) {
	$routeProvider.
	when('/start-of-angular-routes', { // note that it DOES NOT include the pw-mananged-page
		controller: AppController,
		templateUrl: '/ng-templates/app-template/' //don't link to file system html pages
	}).
	otherwise({
		redirectTo: '/not-found' // angular managed page not found
	});
}

MyAppRoutes.config(routeConfig);

Thanks so much for your help.  Much appreciated.

  • Like 2
Link to comment
Share on other sites
  • 6 months later...
invamped Newbie

invamped

Posted
Posted

Hello again kongondo,
 
Thanks for helping me out. I had a read up on enabling URL segments cheers for pointing me in the right direction I didn't have that setup.
However I have enabled it and now I get a 404 for pages in the console. I have my site setup on localhost/pw/ which might be causing the issues.
I have included a base <base href="/pw/"/> in my <head> but it still errors  "GET http://localhost/partials/about 404 (Not Found)"

my base template for index "home" page

<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="/pw/"/>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><?php echo $page->title; ?></title>
		<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

	</head>
	<body ng-app="pwApp">
	<nav>
			<ul>
				<li><a href="#/">Home</a> </li>
				<li><a href="#/about">About</a></li>
				<li><a href="#/work">Work</a></li>
				<li><a href="#/contact">Contact</a> </li>
			</ul>
		</nav>
		<h1><?php echo $page->title; ?></h1>
		<div>
			<div ng-view></div>
		</div>
		<?php if($page->editable()) echo "<p><a href='$page->editURL'>Edit</a></p>"; ?>

		<script src="<?php echo $config->urls->root?>/site/bower_components/angular/angular.js"></script>
		<script src="<?php echo $config->urls->root?>/site/bower_components/angular-route/angular-route.js"></script>
		<script src="<?php echo $config->urls->templates?>scripts/main.js"></script>
		<script src="<?php echo $config->urls->templates?>scripts/controllers.js"></script>
	</body>
</html> 

My routing cofig

var pwapp = angular.module('pwApp', ['ngRoute']);

pwapp.config(['$routeProvider', function($routeProvider) {
	$routeProvider.
      when('/', {
		controller: 'homeCtrl',
		templateUrl: '/partials/home'
	}).
    when('/about', {
		controller: 'aboutCtrl',
		templateUrl: '/partials/about'
	}).
	otherwise({
		redirectTo: '/not-found'
}]);

I also have a partials folder inside of the templates folder, then inside partials I have all my partial php pages about.php etc. Plus the 

partial.php with

switch ($input->urlSegment1) {
     case "home": include("./partials/home.php"); break;
     case "about": include("./partials/about.php"); break;
     default: break;
}

any insights would be greatly appreciated.... Still learning!!!

Thanks man

  • Like 1
Link to comment
Share on other sites
invamped Newbie

invamped

Posted
Posted

Hmmm so I put in the absolute path to the partials and get forbidden 403. This is because you can't directly access files in the templates folder with php unless its setup as a template in the cms. But how can I set it as a template when its in a subfolder (partials)???

thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...