控制器不能使用路由功能

我是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

控制器不能使用路由功能

回答

相关问题