Question

我是angularjs tech的新手。我在我的项目中实现了一个注册功能。

我在我的项目中为路由和控制器功能创建了一个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");
});

请任何人都可以提供帮助。

Answer 1

在router.js中，将var app = angular.module('crasApp', [ 'ngRoute'])更改为var app = angular.module('crasApp')。

此外，在app.js中，您的声明应为：var app = angular.module('crasApp', ['ngRoute']);。由于您只有一个模块，因此您必须在声明模块本身时声明它的依赖关系。

您目前正在重新创建模块与附加功能。

此外，请务必在您的HTML中包含您的router.js。

Answer 2

问题当您在route.js文件中使用var app = angular.module('crasApp', [ 'ngRoute']);时，您正在初始化新模块，而不是将配置添加到现有模块！

构建Angular App的最佳方法是不使用变量，可以用不同的方式调用模块：

<强> app.js

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

创建控制器 controllers.js

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

创建配置 routes.js

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

index.html

中的

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

注意您在HTML中不需要ng-controller指令，因为在路由中定义它就足够了

分离服务

创建services.js例如

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);
      })
    }
  }
})

在控制器中使用

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;
   })
});

控制器不使用路由功能

2 个答案: