John Masqued John Masqued - 1 year ago 52
AngularJS Question

Angular Js routing not working properly when file separated

//this is the app.js go down below to see controller.js

templateURL : 'contact.html'



function insertData(Name,Email,Password,Mobile){
//save data to database
var x = "This is add data";
return x;

function getData(){
//get data from database
var x = "This is retrieve data";
return x;

function updateData(){
//update data to database

return "This is edit data";

return {


//this is controller.js

$scope.firstName ="asd";
$scope.Message = "In the beginning";

$scope.addRecord = function(){

var x = personFactory.insertData($scope.Name,$scope.Email,$scope.Password,$scope.Mobile,$scope.result);
$scope.message = "You have successfuly added new data";
return x + ' ' + $scope.message;


$scope.retieveRecord = function(){
return personFactory.getData();

$scope.editRecord = function(){
return personFactory.updateData();


<!DOCTYPE html>
<html ng-app="myFirstApp">

<script src=""></script>
<script src=""></script>
<script src="app.js"></script>
<script src="controller.js"></script>


<a href="#home">Home</a>
<a href="#people">People</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div ng-view></div>

<div ng-controller="myController">

Name : <input type="text" ng-model="Name" />
<br />

Email : <input type="text" ng-model="Email" />
<br />

Password : <input type="text" ng-model="Password" />
<br />

Mobile : <input type="text" ng-model="Mobile" />
<br />

<button ng-click="addRecord()">Submit</button>

<h1>Hello, {{message}}</h1>
<h1>Hello, {{retieveRecord()}}</h1>
<h1>Hello, {{editRecord()}}</h1>


This is not working, .factory is inside app.js, all controllers are inside controller.js.

My problem : .config inside app.js is not working with index.html's about href and contact href.

The html pages of about and contact are created successfuly. What is the issue? ,I cant figure out why. I checked that the script reference of angular comes first. Everything is ok. even the calling of the method of controller to factory. The only left out is .config

Answer Source

You have written:

                templateUrl : 'contact.html' //use templateUrl instead of templateURL

use templateUrl instead of templateURL

i tried on my system works fine for me

refer$route#example you can check the example there.

Let me know if this does not work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download