I am developing and website in codeigniter and angualrJs.
我正在开发和使用codeigniter和angualrJs的网站。
I an trying to load view in ui-view from controller- action of codeigniter using $state
route method. But I am not getting any response. Is need to use http get method for this.
我试图使用$ state route方法从codeigniter的controller-action加载ui-view中的视图。但我没有得到任何回应。需要为此使用http get方法。
Below is my code. app.js
以下是我的代码。 app.js
(function () {
"use strict";
var app = angular.module("autoQuote",["common.services","ui.router"]);
app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("step1", {
url : "/",
templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
})
.state("step2", {
url : "/",
templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
})
}
);
}());
common.services.js
(function () {
"use strict";
angular
.module("common.services",
["ngResource"])
}());
autoQuoteCtrl.js
(function(){
"use strict";
angular
.model("autoQuote")
.controller("prepareDTO","prepareDTO");
function prepareDTO()
{
var vm = this;
vm.postAutoQuoteObj = [];
}
});
html
<script src="<?php echo $assetName; ?>/js/jquery-3.0.0.min.js"></script>
<script src="<?php echo $assetName; ?>/js/angular.js"></script>
<script src="<?php echo $assetName; ?>/js/angular-resource.js"></script>
<script src="<?php echo $assetName; ?>/js/angular-mocks.js"></script>
<script src="<?php echo $assetName; ?>/js/angular-ui-router.js"></script>
<script src="<?php echo $assetName; ?>/js/bootstrap.js"></script>
<!-- Application Script -->
<script src="<?php echo $assetName; ?>/app/app.js"></script>
<!-- services -->
<script src="common/services/common.services.js"></script>
<!-- Controllers -->
<script src="<?php echo $assetName; ?>/app/ctrl/autoQuoteCtrl.js"></script>
</head>
<body ng-app="autoQuote">
<div ui-view></div>
</body>
Please suggest me if I am missing something here.
如果我在这里错过了什么,请建议我。
2 个解决方案
#1
0
i did notice there is $urlRouterProvider in injecting to function has extra "e"
我注意到在注入函数时有$ urlRouterProvider有额外的“e”
app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("step1", {
url : "/",
templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step1"
})
.state("step2", {
url : "/",
templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step2"
})
}
);
}());
#2
0
There is a working plunker
有一个工作的plunker
You are almost there.. just UI-Router places vies into targets named ui-view
, not the ng-view
你几乎就在那里..只是UI-Router将vies放入名为ui-view的目标,而不是ng-view
//<div ng-view></div>
<div ui-view></div>
And also, to use array for IoC, we need array which will encapsulate even the function (check the removed ]
sign before function)
而且,要为IoC使用数组,我们需要数组甚至封装函数(在函数之前检查删除的符号)
//app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
app.config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("step1", {
url : "/",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
templateUrl: "tpl.html"
})
.state("step2", {
url : "/step2",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
templateUrl: "tpl.html"
})
}]
Check it here
在这里查看
There is another example
还有另一个例子
which uses templateUrl
(instead of template) but not templateURL
它使用templateUrl(而不是模板)但不使用templateURL
$stateProvider
.state("step1", {
url : "/",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
templateUrl : "rc1/renderstep/step1.php"
})
.state("step2", {
url : "/step2",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
templateUrl : "rc1/renderstep/step2.html"
})
#1
0
i did notice there is $urlRouterProvider in injecting to function has extra "e"
我注意到在注入函数时有$ urlRouterProvider有额外的“e”
app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("step1", {
url : "/",
templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step1"
})
.state("step2", {
url : "/",
templateURL : "http://dev.angauto.insurance.com/rc1/renderstep/step2"
})
}
);
}());
#2
0
There is a working plunker
有一个工作的plunker
You are almost there.. just UI-Router places vies into targets named ui-view
, not the ng-view
你几乎就在那里..只是UI-Router将vies放入名为ui-view的目标,而不是ng-view
//<div ng-view></div>
<div ui-view></div>
And also, to use array for IoC, we need array which will encapsulate even the function (check the removed ]
sign before function)
而且,要为IoC使用数组,我们需要数组甚至封装函数(在函数之前检查删除的符号)
//app.config(["$stateProvider","$urlRouterProvider"], function($stateProvider,$urlRouterProvider){
app.config(["$stateProvider","$urlRouterProvider", function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("step1", {
url : "/",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
templateUrl: "tpl.html"
})
.state("step2", {
url : "/step2",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
templateUrl: "tpl.html"
})
}]
Check it here
在这里查看
There is another example
还有另一个例子
which uses templateUrl
(instead of template) but not templateURL
它使用templateUrl(而不是模板)但不使用templateURL
$stateProvider
.state("step1", {
url : "/",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step1"
templateUrl : "rc1/renderstep/step1.php"
})
.state("step2", {
url : "/step2",
//templateURL : "http://dev.angauto.domain.com/rc1/renderstep/step2"
templateUrl : "rc1/renderstep/step2.html"
})