Angular Js 路由在文件分离时无法正常工作

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>

这不起作用，.factory 在 app.js 内，所有控制器都在 controller.js.

内

我的问题：app.js 中的 .config 无法使用 index.html 的关于 href 和联系 href。

关于和联系html页创建成功。问题是什么？，我想不通为什么。我检查了 angular 的脚本引用是否排在第一位。一切都好。甚至调用控制器的方法到工厂。唯一遗漏的是 .config

Answer 1

您写了：

        .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 路由在文件分离时无法正常工作

Angular Js routing not working properly when file separated

angularjs

ng-app

angular-module

angular-config