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

时间:2016-11-17 10:00:56

标签: angularjs angular-module ng-app angular-config



//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>
&#13;
&#13;
&#13;

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

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

关于和联系的html页面是成功创建的。有什么问题? ,我无法弄清楚为什么。我检查了角度的脚本引用是第一位的。一切都好。甚至将控制器的方法调用到工厂。唯一遗漏的是.config

1 个答案:

答案 0 :(得分: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 你可以查看那里的例子。

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