0 

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

4

1 に答える 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を参照してください 。そこで例を確認できます。

これが機能しない場合はお知らせください。

于 2016-11-17T11:07:58.743 に答える