Jump to content

invamped

Members
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by invamped

    AngularJS routing with ProcessWire

    in General Support

    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

    Setting up Routing with AngularJS

    in General Support

    Posted

    Hi,

    So I'm just getting started with using Processwire(PW) and I really like it so far. I've also recently started using AngularJS and loving it. Now i'm trying to setup angular routing to work with PW but not having much luck. I've google around etc and tried following the following post 

    https://processwire.com/talk/topic/6281-angularjs-routing-with-processwire/?hl=%2Bangular+%2Brouting

    but still can't get it to work.

    I have a simple site setup for a portfolio, Home/About/Work/Contact

    I would love to have angular route all the other pages into the homepage. At the moment it just goes to the no-found url.

    If anyone could give me some tips that would be awesome.

×
×
  • Create New...