我有一个单页应用程序，我想将我的代码拆分为两个单独的 js 文件，如下所示 - 脚本1.js -
var app = angular.module("AngularJs", ["ui.router"])
.config(function ($stateProvider) {
$stateProvider
.state("home", {
url:"/home",
templateUrl: "Template/Home.html",
controller: "homeController",
controllerAs: "homectrl"
})
.state("courses", {
url: "/courses",
templateUrl: "Template/Courses.html",
controller: "coursesController",
controllerAs: "Coursectrl"
})
.state("newregistration", {
// url: "/students",
templateUrl: "Template/NewRegistration.html",
controller: "newregistration",
controllerAs: "newregistrationctrl"
})
})
我已经为所有状态定义了控制器
.controller("homeController", function () {
this.message = "Home Page";
})
.controller("coursesController", function () {
this.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
this.message = "Courses Page";
})
Now problem is that i want to define other controller on other script file -
Script2.js -
.controller("newregistration", function () {
this.meassage = "New Employee Registration sfdsf";
})
如何将代码分成两个不同的 JS 文件。
分离示例
应用.js
var app = angular.module("AngularJs", ["ui.router"])
配置.js
app.config(function ($stateProvider) {
$stateProvider
.state("home", {
url:"/home",
templateUrl: "Template/Home.html",
controller: "homeController",
controllerAs: "homectrl"
})
.state("courses", {
url: "/courses",
templateUrl: "Template/Courses.html",
controller: "coursesController",
controllerAs: "Coursectrl"
})
.state("newregistration", {
// url: "/students",
templateUrl: "Template/NewRegistration.html",
controller: "newregistration",
controllerAs: "newregistrationctrl"
})
})
控制器.js
app.controller("homeController", function () {
this.message = "Home Page";
})
app.controller("coursesController", function () {
this.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
this.message = "Courses Page";
})
定义应用
应用.js
var app = angular.module（'demoApp'，[]）;
像这样
将控制器放在单独的文件中
首页按.js
angular.module('demoApp').controller("homeController", function () {
this.message = "Home Page";
});
课程控制.js
angular.module('demoApp').controller("coursesController", function () {
this.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
this.message = "Courses Page";
});
注册控制.js
angular.module('demoApp').controller("newregistration", function () {
this.meassage = "New Employee Registration sfdsf";
});
然后，您的 HTML 将包含该应用程序并使用控制器
<script src="app.js"></script>
<script src="HomeCtrl.js"></script>
<script src="CoursesCtrl.js"></script>
<script src="RegistrationCtrl.js"></script>
<body ng-app="demoApp">
<div ng-controller='HomeCtrl'>
This will access home controller
</div>
<div ng-controller='CoursesCtrl'>
This will access courses controller
</div>
<div ng-controller='RegistrationCtrl'>
This will access registration controller
</div>
</body>