在 ngRoute 示例中工作的多个控制器
Multiple controllers working within ngRoute example
我有一个小的 ngRoute 示例,我正在尝试使用多个应用程序和控制器。第一个 app/controller 用于主页,而第二组 app/controller 用于 ngRoute 在按下按钮后加载的 html。但是,它似乎没有用。代码如下:
主模块
var app = angular.module("MainModule", ["ngRoute"]);
主控制器
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
客户模块
var CustomerModule = angular.module("CustomerModule", []);
客户控制员
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<a href="#/customers"><input type="button" value="Load Customers" /> </a>
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
那里有很长的代码,但希望是简单的代码。当我按下 "Load Customer" 按钮时,输出字面上是 {{Test}} 没有数组数据可以跟随。
我刚刚开始学习 angular,所以如果您对此问题有任何帮助,我将不胜感激。我这样做只是为了好玩,尝试学习。所以我想这个问题并不紧迫。 :) 谢谢!
我不确定,但问题出在您的 MainModule 中。应该是这样的:
var app = angular.module("MainModule", ["ngRoute"]);
当您仅使用一个参数调用 angular.module
时 - 它只是尝试获取模块,而不是创建。
而customers.html应该只包含你的一部分html,而不是完整的:
完整 customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
并添加move customer js文件到index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
希望对您有帮助。
我使用问题中的代码作为基础编写了一个工作示例。做了很多调整,所以我会列出每一个部分并做一些解释。
没有必要每个 "page" 都有自己的模块。但是,这不是一个坏习惯。为了支持您在此处为每个视图设计一个模块,我进行了以下更改:
将 CustomerModule
作为依赖项包含在 MainModule
(MainModule.js) 中:
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
加载 ALL 中的脚本 index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
通过这些更改,$routeProvider
能够找到 CustomerController
并在路由更改期间实例化它。 customers.html 现在不必创建控制器,并且可以剥离成一个完整的部分。此外,customers.html 中使用的表达式需要更改,并分解为每个 属性.
的单独表达式
决赛customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
plnkr.co 上的完整工作示例:http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview
我有一个小的 ngRoute 示例,我正在尝试使用多个应用程序和控制器。第一个 app/controller 用于主页,而第二组 app/controller 用于 ngRoute 在按下按钮后加载的 html。但是,它似乎没有用。代码如下:
主模块
var app = angular.module("MainModule", ["ngRoute"]);
主控制器
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
客户模块
var CustomerModule = angular.module("CustomerModule", []);
客户控制员
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<a href="#/customers"><input type="button" value="Load Customers" /> </a>
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
那里有很长的代码,但希望是简单的代码。当我按下 "Load Customer" 按钮时,输出字面上是 {{Test}} 没有数组数据可以跟随。
我刚刚开始学习 angular,所以如果您对此问题有任何帮助,我将不胜感激。我这样做只是为了好玩,尝试学习。所以我想这个问题并不紧迫。 :) 谢谢!
我不确定,但问题出在您的 MainModule 中。应该是这样的:
var app = angular.module("MainModule", ["ngRoute"]);
当您仅使用一个参数调用 angular.module
时 - 它只是尝试获取模块,而不是创建。
而customers.html应该只包含你的一部分html,而不是完整的:
完整 customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
并添加move customer js文件到index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
希望对您有帮助。
我使用问题中的代码作为基础编写了一个工作示例。做了很多调整,所以我会列出每一个部分并做一些解释。
没有必要每个 "page" 都有自己的模块。但是,这不是一个坏习惯。为了支持您在此处为每个视图设计一个模块,我进行了以下更改:
将 CustomerModule
作为依赖项包含在 MainModule
(MainModule.js) 中:
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
加载 ALL 中的脚本 index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
通过这些更改,$routeProvider
能够找到 CustomerController
并在路由更改期间实例化它。 customers.html 现在不必创建控制器,并且可以剥离成一个完整的部分。此外,customers.html 中使用的表达式需要更改,并分解为每个 属性.
决赛customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
plnkr.co 上的完整工作示例:http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview