Angularjs 使用ng view时，控制器是否可以位于单独的文件中？_Angularjs_Angularjs Controller

Angularjs 使用ng view时，控制器是否可以位于单独的文件中？

angularjs

Angularjs 使用ng view时，控制器是否可以位于单独的文件中？,angularjs,angularjs-controller,Angularjs,Angularjs Controller,目前我正在学习AngularJS。我制作了一个通过ng view指令显示的“hello world”应用程序。到目前为止还不错我的文件按以下方式排序： - WebContent *(root)* > - controllers *(folder)* >> - controllers.js > - views *(folder)* >> - view1.html >> - view2.html > - index.html 路由配置如下所示

目前我正在学习AngularJS。我制作了一个通过ng view指令显示的“hello world”应用程序。到目前为止还不错

我的文件按以下方式排序：

- WebContent *(root)*
> - controllers *(folder)*
>> - controllers.js
> - views *(folder)*
>> - view1.html
>> - view2.html
> - index.html

路由配置如下所示：

function routeConfig($routeProvider){
$routeProvider.when('/', 
{
templateUrl: "views/view1.html",
controller: "View1Ctrl"
}
).when("/view/:id", 
{
templateUrl: "views/view2.html",
controller: "View2Ctrl"
}
).otherwise(
{
redirectTo: "/"
});
};

app.controller("View1Ctrl", function($scope) {
$scope.message = "Hello World1";
}
[... etc. ...]

- WebContent *(root)*
> - controllers *(folder)*
>> - controllers.js
>> - view1-controller.js
>> - view2-controller.js
> - views *(folder)*
>> - view1.html
>> - view2.html
> - index.html

(function() {
  angular
    .module('plunker')
    .directive('helloWorld', function() {
      return {
        scope: true,
        restrict: 'E',
        controller: 'HelloWorldController',
        controllerAs: '$ctrl',
        templateUrl: 'app/directives/hello-world/template.html'
      };
    })
})();

正如我之前提到的：这工作非常好。然而，事情可能会变得更加复杂。控制器可能包含更多功能等。是否可以将这些控制器放入外部文件中？所以它看起来像这样：

function routeConfig($routeProvider){
$routeProvider.when('/', 
{
templateUrl: "views/view1.html",
controller: "View1Ctrl"
}
).when("/view/:id", 
{
templateUrl: "views/view2.html",
controller: "View2Ctrl"
}
).otherwise(
{
redirectTo: "/"
});
};

app.controller("View1Ctrl", function($scope) {
$scope.message = "Hello World1";
}
[... etc. ...]

- WebContent *(root)*
> - controllers *(folder)*
>> - controllers.js
>> - view1-controller.js
>> - view2-controller.js
> - views *(folder)*
>> - view1.html
>> - view2.html
> - index.html

(function() {
  angular
    .module('plunker')
    .directive('helloWorld', function() {
      return {
        scope: true,
        restrict: 'E',
        controller: 'HelloWorldController',
        controllerAs: '$ctrl',
        templateUrl: 'app/directives/hello-world/template.html'
      };
    })
})();

我已经尝试简单地将这些文件导入索引：

<script src="controllers/view1-controller.js"></script>

但这似乎不起作用。（这给我留下了一张白纸。）希望有人能帮我

达格·罗伯特

那当然有可能，我更推荐它！我想让你看看这个

基本上你可以这样做：

function routeConfig($routeProvider){
$routeProvider.when('/', 
{
templateUrl: "views/view1.html",
controller: "View1Ctrl"
}
).when("/view/:id", 
{
templateUrl: "views/view2.html",
controller: "View2Ctrl"
}
).otherwise(
{
redirectTo: "/"
});
};

app.controller("View1Ctrl", function($scope) {
$scope.message = "Hello World1";
}
[... etc. ...]

- WebContent *(root)*
> - controllers *(folder)*
>> - controllers.js
>> - view1-controller.js
>> - view2-controller.js
> - views *(folder)*
>> - view1.html
>> - view2.html
> - index.html

(function() {
  angular
    .module('plunker')
    .directive('helloWorld', function() {
      return {
        scope: true,
        restrict: 'E',
        controller: 'HelloWorldController',
        controllerAs: '$ctrl',
        templateUrl: 'app/directives/hello-world/template.html'
      };
    })
})();

重要提示：

要创建一个新模块，您需要编写：

angular.module（'name'），
依赖关系）。其中依赖项是一个数组
要检索相同的模块，您不需要编写依赖项：
angular.module（'name'）
。这将简单地获得模块
达格·罗伯特
那当然有可能，我更推荐它！我想让你看看这个
基本上你可以这样做：
function routeConfig($routeProvider){
$routeProvider.when('/', 
{
templateUrl: "views/view1.html",
controller: "View1Ctrl"
}
).when("/view/:id", 
{
templateUrl: "views/view2.html",
controller: "View2Ctrl"
}
).otherwise(
{
redirectTo: "/"
});
};

app.controller("View1Ctrl", function($scope) {
$scope.message = "Hello World1";
}
[... etc. ...]

- WebContent *(root)*
> - controllers *(folder)*
>> - controllers.js
>> - view1-controller.js
>> - view2-controller.js
> - views *(folder)*
>> - view1.html
>> - view2.html
> - index.html

(function() {
  angular
    .module('plunker')
    .directive('helloWorld', function() {
      return {
        scope: true,
        restrict: 'E',
        controller: 'HelloWorldController',
        controllerAs: '$ctrl',
        templateUrl: 'app/directives/hello-world/template.html'
      };
    })
})();

重要提示：

要创建一个新模块，您需要编写：angular.module（'name'），
依赖关系）。其中依赖项是一个数组
要检索相同的模块，您不需要编写依赖项：
angular.module（'name'）
。这将简单地获得模块

WebContent（根目录）

控制器（文件夹）

Home.js
Employee.js

视图*（文件夹）

view1.html
view2.html

index.html


这是index.js
var myApp=angular.module（'myApp'）
这是seprate主控制器（Home.js）
myApp.controller（'HomeCtrl'，函数（$scope）{}

myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);

下面是seprate employee.js
myApp.controller（'EmployeeController'，函数（$scope）{}

myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);

这是seprate Home.js
myApp.controller（'HomeController'，函数（$scope）{}

myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);

WebContent（根目录）

控制器（文件夹）

Home.js
Employee.js

视图*（文件夹）

view1.html
view2.html

index.html


这是index.js
var myApp=angular.module（'myApp'）；
这是seprate主控制器（Home.js）
myApp.controller（'HomeCtrl'，函数（$scope）{}

myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);

下面是seprate employee.js
myApp.controller（'EmployeeController'，函数（$scope）{}

myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);

这是seprate Home.js
myApp.controller（'HomeController'，函数（$scope）{}
仅根据目录位置很难预测。您能为同一个位置创建一个plunkr吗？我不熟悉plunkr，但我想这正是您所问的：@RobertvanderSpek，我现在知道您的错误在哪里了。在controllers/view1 controller.js
中，您创建了一个新模块，而不是检索它fangular.module（“App”、[“ngRoute”]）.controller（…
），您应该写angular.module（“App”）.controller（…
。请添加此评论作为答案，因为它确实回答了我的问题！（有时您盯着问题看得太久了，解决方案似乎看不见，感谢您睁开我的眼睛。）它已经作为重要的注释添加到我的中；-）仅仅根据目录位置很难预测。你能为它做一个plunkr吗？我不熟悉plunkr，但我想这正是你所问的：@RobertvanderSpek，我现在知道你的错误在哪里了。在controllers/view1 controller.js
中，你创建了一个新模块，而不是检索它。而不是angular.module（“App”、[“ngRoute”]）.controller（…
，你应该写angular.module（“App”）.controller（…。请添加此评论作为答案，因为它确实回答了我的问题！（有时你盯着问题看得太厉害，以至于解决方案似乎看不见，感谢你睁开了我的眼睛。）它已经作为我的重要注释添加了；-）虽然这是可行的，但它没有使用ng view指令。使用ng view难道不可能吗（就我目前对角度的了解而言）.啊，我错了。我现在还不确定，因为我已经快速地从内置视图切换到了，它的工作方式与我在这里描述的完全相同。因为您才刚刚开始，请查看以下内容：。它提供了有关如何格式化和分组代码的重要提示。虽然它可以工作，但它不使用ng view指令。使用ng view难道不可能吗（因为这是我目前对Angular的了解）。啊，我的错误。我现在还不确定，因为我已经快速地从内置视图切换到了，它以我在这里描述的方式工作。由于您刚刚开始，请查看：。它提供了关于如何格式化和分组代码的很好提示。
myApp.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/Employees", {
    templateUrl: "templates/Employees/Employee.cshtml",
    controller: "EmployeeController"
})
.when("/Home", {
    templateUrl: "templates/Home/Home.cshtml"
})

.when("/EmployeeProgress", {
templateUrl: "templates/EmployeeStats/EmployeeStats.cshtml"
 })
.otherwise({
    templateUrl: "templates/Home/Home.cshtml"

});

}]);