//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>
这是行不通的,.factory 位于 app.js 内部,所有控制器都位于controller.js 内部。
我的问题:app.js 内的 .config 无法与 index.html 的 about href 和 contact href 一起使用。
about和contact的html页面创建成功。有什么问题吗? ,我不明白为什么。我检查了 Angular 的脚本引用是第一位的。一切都好。甚至调用控制器的方法到工厂。唯一遗漏的是.config
您已写道:
.config(function($routeProvider){
$routeProvider.when('/contact',{
templateUrl : 'contact.html' //use templateUrl instead of templateURL
})
使用 templateUrl 而不是 templateURL
我尝试过我的系统对我来说效果很好
参考https://docs.angularjs.org/api/ngRoute/service/$route#example 你可以在那里查看示例。
如果这不起作用,请告诉我。