分离文件时，Angular Js路由无法正常工作
[英]Angular Js routing not working properly when file separated
问题描述
//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
1 个解决方案
解决方案1
1 已采纳 2016-11-17 11:07:58
你写：
.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，您可以在此处查看示例。
让我知道这是否行不通。
Angular Js路由无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.