如何使用 AngularJS 从应用程序中的数据库传递动态 URL.js


How to pass dynamic URL from database in app.js using AngularJS

我想从href标签创建动态网址。我是AngularJS的新手,所以真的没有任何想法。我想创建像这样的网址 www.example.com/blog/blogheading .我不知道如何在应用程序中传递这些动态变量(博客标题.js点击阅读更多。阅读更多是 href 链接。

这是我的博客.php代码。

<div id="content-paginate">
                    <?php
                        if(mysql_num_rows($result) > 0){
                            while($row = mysql_fetch_assoc($result)){
                                $originalDate = $row['date'];;
                                $newDate = date("d F y", strtotime($originalDate));
                                ?>
                                <div class="z">
                                    <div class="blogpost">
                                        <div class="meta">
                                           <div class="date">
                                            <p class="day"><span>03</span></p>
                                            <p class="month">Jan'16</p>
                                           </div>
                                        </div>
                                        <div class="excerpt ">
                                            <h3><a href=""><?php echo $row['heading']; ?></a></h3>
                                            <p><?php echo substr($row['heading'], 0, 100); ?></p>
                                    <a href="" class="link" ui-sref="blog_view">Read More</a>
                                        </div>
                                    </div>
                                </div> 
                                <?php
                            }
                        }else{
                            ?>
                            <div class="content">
                                <strong>There are no Blogs.</strong>
                            </div>
                            <?php
                        }
                    ?>
                    </div>

这是我的应用程序.js

(function() {
    var app = angular.module('compareApp', ['ui.router', 'mgcrea.ngStrap']);
    app.config(function($stateProvider, $urlRouterProvider, $locationProvider, $modalProvider, $sceProvider) {
        $stateProvider.state('home', {
            url : '/home',
            templateUrl : 'partials/home.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Home',
                pageID : 1
            }
        }).state('about', {
            url : '/about',
            templateUrl : 'partials/about.html',
            controller : 'mainController',
            data : {
                pageTitle : 'About us',
                pageID : 2
            }
        }).state('services', {
            url : '/services',
            templateUrl : 'partials/services.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Services',
                pageID : 3
            }
        }).state('income-protection', {
            url : '/services/income-protection',
            templateUrl : 'partials/income-protection.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Income protection',
                pageID : 4
            }
        }).state('tpd', {
            url : '/services/tpd',
            templateUrl : 'partials/tpd.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Total and Permanent Disability (TPD) insurance',
                pageID : 5
            }
        }).state('trauma', {
            url : '/services/trauma',
            templateUrl : 'partials/trauma.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Trauma insurance',
                pageID : 6
            }
        }).state('life-insurance', {
            url : '/services/life-insurance',
            templateUrl : 'partials/life-insurance.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Life insurance',
                pageID : 7
            }
        }).state('calculate', {
            url : '/calculate',
            templateUrl : 'partials/calculate.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Calculate',
                pageID : 8
            }
        }).state('calculate-result', {
            url : '/calculate/result',
            templateUrl : 'partials/calculate-result.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Calculate',
                pageID : 9
            },
            onEnter : function($state, phaseService) {
                console.log(phaseService.currentPhase);
                if (phaseService.currentPhase < 1) {
                    $state.go('calculate');
                }
            }
        }).state('personal-information', {
            url : '/premium',
            templateUrl : 'partials/personal-information.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Premium',
                pageID : 11
            }
        }).state('premium', {
            url : '/premium/calculate',
            templateUrl : 'partials/premium.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Premium',
                pageID : 10
            },
            onEnter : function($state, phaseService) {
                if (phaseService.currentPhase < 3) {
                    $state.go('personal-information');
                }
            }
        }).state('show-comparison', {
            url : '/premium/result',
            templateUrl : 'partials/premium-result.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Premium comparison result',
                pageID : 12
            },
            onEnter : function($state, phaseService) {
                if (phaseService.currentPhase < 4) {
                    $state.go('personal-information');
                }
            }
        }).state('contact-info', {
            url : '/premium/contact-info',
            templateUrl : 'partials/contact-info.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Contact information',
                pageID : 13
            },
            onEnter : function($state, phaseService) {
                if (phaseService.currentPhase < 5) {
                    $state.go('personal-information');
                }
            }
        }).state('thankyou', {
            url : '/premium/success',
            templateUrl : 'partials/premium-success.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Thanks for applying',
                pageID : 14
            },
            onEnter : function($state, phaseService) {
                if (phaseService.currentPhase >0) {
                    $state.go('personal-information');
                }
            }
        }).state('faq', {
            url : '/faq',
            templateUrl : 'partials/faq.html',
            controller : 'mainController',
            data : {
                pageTitle : 'FAQ',
                pageID : 14
            }
        }).state('contact', {
            url : '/contact',
            templateUrl : 'partials/contact.html',
            controller : 'mainController',
            data : {
                pageTitle : 'Contact',
                pageID : 15
            }
        }).state('blog',{
           url : '/blog',
           templateUrl : 'partials/blog.php',
           controller : 'mainController',
           data : {
                pageTitle : 'Blog',
                pageID : 16
           }
       }).state('blog_view',{
           url : '/blog_view',
           templateUrl : 'partials/blog_view.php',
           controller : 'mainController',
           data : {
                pageTitle : 'Blog',
                pageID : 17
           }
       });
        $urlRouterProvider.otherwise('/home');
        $locationProvider.html5Mode(true);
        //$urlRouterProvider.otherwise('/home');
        angular.extend($modalProvider.defaults, {
            html : true
        });
          // disable strict context
          $sceProvider.enabled(false);
    });
    app.run(['$rootScope', '$state', '$stateParams',
    function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    }]);

看看这个例子——

您将验证数据是否按此定义:

var url = 'http://localhost:9200/';
var index = $scope.responseData._index || null;
var type = $scope.responseDate._type || null;
var id = $scope.responseData._id || null;
if(index && type && id){
   url = url + index + '/' + type + '/' + id + '/_update';
   $http.post(url, postData);
};

有关更多信息,请查看此答案

工作示例在这里