Angular Js routing not working properly when file separated
Question
//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
1 answers
solution1
1 ACCPTED 2016-11-17 11:07:58
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.