Question

我想在laravel中渲染一个角度视图，但angular无法显示我的视图。这是我的主要角度模板：

<!DOCTYPE html>
<html lang="en" ng-model="myApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token() }}"/>

        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="css/style.css">

        <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        function getBaseURL () {
            return location.protocol + "//" + location.hostname + (location.port && ":" + location.port) + "/";
        }
        <script type="text/javascript">var baseUrl = window.location.origin</script>
        <!-- <script type="text/javascript">window.base_url = <?php echo json_encode(base_url('/')); ?>;</script> -->
    </head>
    <body ng-controller="mainController">
        <div id="main">
        <div ng-view></div>
        </div>
        <script src="js/jQuery.js" type="text/javascript"></script>
        <script src="angular/angular.min.js" type="text/javascript"></script>
        <script src="angular/angular-cookie.min.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>

        <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

    </body>
</html>

这是我的脚本（app.js）

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl : 'main.html',
        controller  : 'mainController'
    })
    .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'aboutController'
    })
    .when('/contact', {
        templateUrl : 'pages/contact.html',
        controller  : 'contactController'
    });
});

这是我的html（about.html）

<div class="jumbotron text-center">
    <h1>Home Page</h1>

    <p>This is the about page</p>
</div>

这是我的路线

Route::get('/', function () {
    return File::get(public_path().'/angular-templates/main.html');
})->where('angular', '.*');

Angular能够呈现main.html页面而不是about.html。

Answer 1

您需要为您的应用注册about和contact页面的控制器。您的应用名为myApp，因此在aboutController.js文件中，第一行应为：

angular.module('myApp').controller('aboutController', ['$scope', '$http', function($scope, $http){
//controller logic goes here
}]);

您的contactController.js

也是如此

angular.module('myApp').controller('contactController', ['$scope', '$http', function($scope, $http){
    //controller logic goes here
}]);

Answer 2

而不是写<html ng-app="myApp">，我写了ng-model="myApp"，这搞砸了整个事情。谢谢你们所有的贡献帮助。

角度视图不在laravel中呈现

2 个答案: