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

问题描述 投票:0回答:1

//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

angularjs angularjs-module ng-app angularjs-config
1个回答
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 你可以在那里查看示例。

如果这不起作用,请告诉我。

© www.soinside.com 2019 - 2024. All rights reserved.