Question

我正在开发一个基于symfony的项目作为后端和angularjs作为前端，我买了一个使用angular的模板并希望将它与symfony集成（老板让我这样做），这是我的第一次使用angular同时集成它我发现很难处理它，没有显示这是我的代码：的 base.html.twig

<!DOCTYPE html>

</head>

<body ng-controller="AppController" class="page-boxed page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-sidebar-closed-hide-logo page-on-load" >
<div  class="page-header navbar navbar-fixed-top">
        {% include '::header.html.twig' %}
</div>
    <div class="clearfix">
</div>
<div class="container">
    <div class="page-container">
        <div  class="page-sidebar-wrapper">         
                        {% include '::sidebar.html.twig' %}
        </div>
        <div class="page-content-wrapper">
            <div class="page-content">
                <div class="theme-panel hidden-xs hidden-sm">       
                                         {% include '::theme-panel.html.twig' %}
                </div>
                <div class="fade-in-up">
                                        {% block body %}{% endblock %}
                </div> 
            </div>
        </div>
    </div>
    <div  class="page-footer">
                 {% include '::footer.html.twig' %}
    </div>
</div>

        <!-- BEGIN CORE ANGULARJS PLUGINS -->
        <script src="{{ asset('plugins/angularjs/angular.min.js') }}" type="text/javascript"></script>  
        <script src="{{ asset('plugins/angularjs/angular-sanitize.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('plugins/angularjs/angular-touch.min.js') }}" type="text/javascript"></script>    
        <script src="{{ asset('plugins/angularjs/plugins/angular-ui-router.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('plugins/angularjs/angular-route.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('plugins/angularjs/plugins/ocLazyLoad.min.js') }}" type="text/javascript"></script>
        <script src="{{ asset('plugins/angularjs/plugins/ui-bootstrap-tpls.min.js') }}" type="text/javascript"></script>
        <!-- END CORE ANGULARJS PLUGINS -->

        <!-- BEGIN APP LEVEL ANGULARJS SCRIPTS -->
        <script src="{{ asset('angular/js/app.js') }}" type="text/javascript"></script>
        <script src="{{ asset('angular/js/directives.js') }}" type="text/javascript"></script>
        <script src="{{ asset('angular/js/demo.js') }}" type="text/javascript"></script>
        <!-- END APP LEVEL ANGULARJS SCRIPTS -->

        <!-- BEGIN PAGE LEVEL SCRIPTS -->
        <script src="{{ asset('global/scripts/metronic.js') }}" type="text/javascript"></script>
        <script src="{{ asset('angular/js/layout.js') }}" type="text/javascript"></script>
        <script src="{{ asset('angular/js/quick-sidebar.js') }}" type="text/javascript"></script>
        <!-- END PAGE LEVEL SCRIPTS -->
        <script type="text/javascript">
    /* Init Metronic's core jquery plugins and layout scripts */
    $(document).ready(function() {   
        Metronic.init(); // Run metronic theme  
                    Layout.init(); // init current layout
                    Demo.init();
    });
</script>
            <!-- END JAVASCRIPTS -->
    {% endblock %}
</body>

其他模板部分只有一些html

index.html.twig

{% extends '::base.html.twig' %}

{% block body %}
    <div class="row">
        <div class="col-md-10">
            <h1>|| wellcome || </h1>
        </div>
    </div>
{% endblock %}

这是js文件：app.js

var MetronicApp = angular.module("MetronicApp", [
"ui.router", 
"ngRoute",
"ui.bootstrap", 
"oc.lazyLoad",  
"ngSanitize"
]);

MetronicApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
    $ocLazyLoadProvider.config({
        // global configs go here
    });
}]);

MetronicApp.config(['$controllerProvider','$interpolateProvider', function($controllerProvider, $interpolateProvider ) {
  // this option might be handy for migrating old apps, but please don't use it
  // in new ones!
  $controllerProvider.allowGlobals();
  $interpolateProvider.startSymbol('||');
  $interpolateProvider.endSymbol('||');
}]);

/* Setup global settings */
MetronicApp.factory('settings', ['$rootScope', function($rootScope) {
    // supported languages
    var settings = {
        layout: {
            pageSidebarClosed: false, // sidebar state
            pageAutoScrollOnLoad: 1000 // auto scroll to top on page load
        },
        layoutImgPath: Metronic.getAssetsPath() + 'img/',
        layoutCssPath: Metronic.getAssetsPath() + 'css/'
    };
    $rootScope.settings = settings;
    return settings;
}]);

MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.$on('$viewContentLoaded', function() {
        Metronic.initComponents(); // init core components
        Layout.init(); //  Init entire layout(header, footer, sidebar, etc) on page load if the partials included in server side instead of loading with ng-include directive 
        console.log('Initialisation of components');
    });
    $scope.wellcome = "Bienvenue dans votre app!";
}]);



/* Setup Rounting For All Pages */
MetronicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

}]);

/* Init global settings and run the app */
MetronicApp.run(["$rootScope", "settings", "$state", function($rootScope, settings, $state) {
    $rootScope.$state = $state; // state to be accessed from view
}]);

需要帮助！提前谢谢！

带有symfony2的角度js模板

0 个答案: