[英]How can I test an AngularJS controller that relies on a service, using ui-router?
[英]How can I make ui-router controller to work?
我已经设置了两个简单的URL,它们具有简单的不同模板和相同的控制器,但是不起作用
头:
<script src="jsLib/angular_v1.4.js" type="text/javascript"></script>
<script src="jsLib/angular-ui-router.min.js" type="text/javascript"></script>
<script src="routes.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
HTML:
<body ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<div ui-view></div>
app.js:
angular
.module("app", ["ui.router"])
.controller("MainCTRL", MainCTRL)
.config(configA);
function MainCTRL($location){
this.nameApp = "nameApp";
}
routes.js:
function configA($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("/",{
url: "/",
templateUrl : "/testingBlock.htm",
controller : "MainCTRL"
})
.state("login",{
url: "/login",
templateUrl : "/app/templates/login.htm",
controller : "MainCTRL"
});
}
login.htm:
<div>Header</div>
<div>Main</div>
<div>Footer</div>
{{name.nameApp}}
testingBlock.htm:
<h2>Hello goHenry</h2>
{{MainCTRL.nameApp}}
它不显示MainCTRL.nameApp
想要告诉您问题出在哪里,但没有发现任何问题。 但是后来我意识到问题出在状态视图之内。
所有的调整实际上都很小(不重要)。 index.html
<html ng-app="app" >
<head>
<title>my app</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
></script>
<script src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
></script>
<script src="routes.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCTRL as ctrl">
{{ctrl.nameApp}}
<br><a href="#/">#/</a> - default
<br><a href="#/login">login</a>
<hr><div ui-view=""></div>
</body>
</html>
这里最大的是"controllerAs"
$stateProvider
.state("/",{
url: "/",
templateUrl : "testingBlock.htm",
controller : "MainCTRL",
controllerAs:"MainCTRL",
})
.state("login",{
url: "/login",
templateUrl : "app/templates/login.htm",
controller : "MainCTRL",
controllerAs:"name",
});
那么,有什么不同呢? 支持以下声明:
{{name.nameApp}}
, {{MainCTRL.nameApp}}
app / templates / login.htm“中的{{MainCTRL.nameApp}}
, 我们需要使用controllerAs和name作为name或MainCTRL(比较您的代码和此示例 )
注意:请勿混用ng-controller
和UI-Router
状态控制器。 这些应该是不同的对象,因为UI-Router
可以使用其他解析方式,而不是angular native ng-controller
。 后来可能会带来惊喜...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.