Angular js:如何在ng-view中加载服务器响应

时间:2016-06-17 11:19:30

标签: javascript angularjs html5 codeigniter angular-ui-router

我正在开发codeigniter和angualrJs的网站。

我尝试使用$state路由方法从codeigniter的controller-action加载 ui-view 中的视图。但我没有得到任何回应。需要使用http get方法。

以下是我的代码。 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>

如果我在这里错过了什么,请建议我。

2 个答案:

答案 0 :(得分:0)

我注意到在注入函数时有$ 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"
        })
}
);

}());

答案 1 :(得分:0)

a working plunker

你几乎就在那里..只是UI-Router将vies放入名为 ui-view 的目标中,而不是 ng-view

//<div ng-view></div>
<div ui-view></div>

而且,要使用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"
        })
}]

检查here

another example

使用 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"
        })