Angular js : How to load server response in ng-view
Question
I am developing and website in codeigniter and 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.
Below is my code. 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 answers
solution1
0 2016-06-17 11:26:51
i did notice there is $urlRouterProvider in injecting to function has extra "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"
})
}
);
}());
solution2
0 2016-06-17 11:33:39
There is a working plunker
You are almost there.. just UI-Router places vies into targets named ui-view , not the 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)
//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
$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"
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.