控制器不能使用路由功能

我是angularjs技術中的新成員。我在我的項目中實現了一個註冊功能。控制器不能使用路由功能

我已經創建了路由和控制功能的一個js文件在我的項目，它的做工精細，如果我會做單獨的路由器和控制器的文件，然後我申請失敗。

我需要做單獨的文件爲路由器和控制器。

下面是我在一個文件中的代碼。

app.js文件

var app = angular.module('crasApp', [ 'ngRoute' ]); 
app.config(function($routeProvider) { 
    $routeProvider.when("/", { 
     templateUrl : "./views/xyz.html", 
     controller : "searchCtrl" 
    }).when("/registration", { 
     templateUrl : "./views/abc.html", 
     controller : "MainCtrl" 
    }).when("/view", { 
     templateUrl : "./views/viewsdata.html", 
     controller : "overViewCtrl" 
    }); 
}); 
app 
     .controller(
       "MainCtrl", 
       function($scope, $http) {  
     console.log("Hi"); 
});

的index.html

<!DOCTYPE html> 
<html ng-app="crasApp"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<head> 
<!-- Use Bootstrap --> 
<link rel="stylesheet" href="./css/bootstrap.min.css"> 
<link rel="stylesheet" href="./css/abn-stylesheet.css"> 
<link rel="stylesheet" href="./css/style.css"> 
<script src="./javascripts/jquery/jquery-1.12.4.js"></script> 
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script> 
<script src="./javascripts/angular/bootstrap.min.js"></script> 
<!-- <script src="./javascripts/angular/angular.min.js"></script> --> 
    <script src="./javascripts/controllers/app.js"></script> 
<!-- <script src="./javascripts/angular/angular-route.js"></script> --> 
<script src="./javascripts/router/router.js"></script> 

<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 

</head> 
<div ng-view></div> 

</html>

xyz.html

<!DOCTYPE html> 
<html ng-app="crasApp"> 
<head> 
<!-- Use Bootstrap --> 
<link rel="stylesheet" href="./css/bootstrap.min.css"> 
<link rel="stylesheet" href="./css/abn-stylesheet.css"> 
<link rel="stylesheet" href="./css/style.css"> 
<link rel="stylesheet" href="./css/ngDatepicker.css"> 
<script src="./javascripts/jquery/jquery-1.12.4.js"></script> 
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script> 
<script src="./javascripts/angular/bootstrap.min.js"></script> 
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> --> 
<script src="./javascripts/controllers/app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
Hi 
</body> 
<html>

所以，它的工作文件，如果我使用一個app.js文件

我想做分離路由器和控制器文件。

路由器功能我搬進了不同的文件，其工作的路由器功能，但不工作控制器的功能..

單獨的路由器如下文件。

router.js

var app = angular.module('crasApp', [ 'ngRoute']); 
app.config(function($routeProvider) { 
    $routeProvider.when("/", { 
     templateUrl : "./views/retrieveTerminationReason.html", 
     /*controller : "searchCtrl"*/ 
    }).when("/registration", { 
     templateUrl : "./views/registration.html", 
     /*controller : "MainCtrl"*/ 
    }).when("/view", { 
     templateUrl : "./views/forbearanceRegistartionOverview.html", 
     /*controller : "overViewCtrl"*/ 
    }); 
});

app.js作爲控制器

var app = angular.module('crasApp', []); 

app 
     .controller(
       'MainCtrl', 
       function($scope, $http) { 
        console.log("Hi"); 
});

請任何一個可以這部分幫助。

來源

2017-08-08 Jitendra Singh Pal

，而這可能會出現* *是工作，你有一些您應該解決的問題。值得注意的是，'template' **不是一個完整的HTML文檔**，您應該從該文檔中去除'html'，'head'，所有'script'標籤等。另外，在路由中使用'controller：'時，您不應該在模板文件中使用'ng-controller'來複制它。除此之外，布萊恩所提供的答案是正確的。 – Claies

問題當你使用你的route.js var app = angular.module('crasApp', [ 'ngRoute']);文件要初始化新的模塊不增加配置到現有的模塊！

以構建一個角應用最好的辦法是不使用變量，你可以打電話給你的模塊中一樣以不同的方式：

app.js

var MODULE_NAME = 'crasApp' 
angular.module(MODULE_NAME, ['ngRoute']);

創建控制器控制器。JS

angular.module(MODULE_NAME).controller('MainCtrl',function($scope, $http) { //Note removing the dependencies array 
     console.log("Hi"); 
});

在你的index.html創建配置routes.js

angular.module(MODULE_NAME).config(function($routeProvider) { //Note removing the dependencies array $routeProvider.when("/", { templateUrl : "./views/retrieveTerminationReason.html", /*controller : "searchCtrl"*/ })

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/routes.js"></script> 
    <script src="js/controllers.js"></script> 
</head>

注意你不需要NG-控制器指令在你的HTML中，因爲在路由中定義它是en ough

分離服務

使用控制器創建例如

angular.module(MODULE_NAME).factory('Users',function($http,$q) { 
    return { 
    getUsers:function(){ 
     var def = $q.defer(); 
     $http({url:'URL_HERE',method:'GET'}).then(function(res){ 
     def.resolve(res) 
     },function(err){ 
     def.reject(err); 
     }) 
    } 
    } 
})

services.js

angular.module(MODULE_NAME).controller('MainCtrl',function($scope, Users) { //Note Users is the name of the factory created above 
    Users.getUsers().then(function(res){ 
    $scope.users=res; 
    },function(err){ 
    $scope.error = err; 
    }) 
});

來源

2017-08-08 17:50:13

其上面的實現工作。感謝您的迴應。 –

我們如何拆分服務js。我在我的控制器中使用REST獲取和發佈服務。我們如何從控制器分離服務。 –

請檢查我上面編輯的答案 –

在router.js，改變var app = angular.module('crasApp', [ 'ngRoute'])到var app = angular.module('crasApp')。

此外，在app.js，你的聲明應該是：var app = angular.module('crasApp', ['ngRoute']);。既然你有一個單獨的模塊'crasApp'，你必須在聲明模塊本身時聲明它的依賴關係。

當前已被重新創建什麼模塊與附加功能。

此外，一定要包括你的router.js以及在你的HTML。

來源

2017-08-08 16:59:31 Brian

控制器不能使用路由功能

回答

相關問題