Building a Website with AngularJS - Routes and Partials

simpulton · 79K views · 2012 · 14:22

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users cite it as the tutorial they were following when their AngularJS routes or partials failed to render, so it shows up as context in troubleshooting questions.

Recommended by 0 people across 0 different months, 2013 to 2014.

What it is

A 2012 screencast by simpulton that walks through building a small multi-page website with AngularJS, using $routeProvider routes and HTML partials. The description links to a GitHub repo with the code updated to AngularJS v1.0.2.

What people said

Cites nycynik · 2013-04 · Stack Overflow · on “Angular JS routes not working, only shows path to partial, not partial”

I am following a tutorial on AngularJS - "Building a website with AngularJS" [this video] The routes I am using are pretty much the same as the tutorial : // JavaScript Document angular.module('quest', []). config(function($routeProvider) { $routeProvider. when('/about', {template:'partials/about.html'}). when('/start', {template:'partials/start.html'}). otherwise({redirectTo:'/home', template:'partials/home.html'}); }); The problem is : it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows: PARTIALS/ABOUT.HTML I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.

Cites seasick · 2013-12 · Stack Overflow · on “HTML routes rendered only through localhost”

I found a basic example on youtube that demonstrates routes through angular. When I load the set of files from this screen [this video] it does not work. I can see the index.html, but the partials do not render. I think it is because I am not serving these files through a server. If that is the case, how is angular different? I thought static files can be seen without them being served. index.html - <!doctype html> <html ng-app="website"> <head> <title>AngularJS Website</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/website.css"> </head> <body> <!-- top --> <header id="header"> <h1 id="logo">

Cites C1pher · 2014-02 · Stack Overflow · on “Angular Web Project Not Changing Pages”

I have a Java Maven Webproject that is using Rest. I cannot get the project to navigate more than a single time away from the index.html. I have attempted to use various applications of routes ( Link#1 [this video] , Link#2 [LINK] ) and have tried some <div ng-include=""></div> tricks with variables controlled from the controller. When I get a page to load, I cannot get the page to change afterwards from triggering a route (the text of the url is the only thing to display) or changing $scope variables (the variables update, but the view does not). I have a directory structure like the following: index.html [views] ->[subfolder] ->view1.html ->view2.html I am pretty sure that the issue lies with t