//this is the app.js go down below to see controller.js
angular.module('myFirstApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/contact',{
templateURL : 'contact.html'
})
})
.factory('personFactory',function(){
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 {
insertData,
getData,
updateData
};
})
//this is controller.js
angular.module('myFirstApp')
.controller('myController',function($scope,personFactory){
$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.retrieveRecord = function(){
return personFactory.getData();
}
$scope.editRecord = function(){
return personFactory.updateData();
}
})
<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
<title>AlbuquerqueApp</title>
</head>
<body>
<a href="#home">Home</a>
<a href="#people">People</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div>
<div ng-view></div>
</div>
<h1>Begin</h1>
<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, {{retrieveRecord()}}</h1>
<h1>Hello, {{editRecord()}}</h1>
</div>
</body>
</html>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
You have written:
.config(function($routeProvider){
$routeProvider.when('/contact',{
templateUrl : 'contact.html' //use templateUrl instead of templateURL
})
use templateUrl instead of templateURL
i tried on my system works fine for me
refer https://docs.angularjs.org/api/ngRoute/service/$route#example you can check the example there.
Let me know if this does not work.