Question

这是主要指标：我有两个.php文件，需要在模板中查看。（ng-view） mainFrame.php

    <!DOCTYPE html>
    <html lang="en-US" ng-app="app">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <link href="../css/materialize.min.css" rel="stylesheet">
        <link href="css/blogmain.css" rel="stylesheet"/>
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700italic,900|Lato|Tangerine|Montserrat|Robot
        o+Condensed:400,300italic,700italic' rel='stylesheet' type='text/css'>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
    <div class="row">
        <div class="navbar-fixed">
            <nav style="height: 65px">
                <div class="nav-wrapper">
                    <a href="#" class="brand-logo center" style="font-family:'Montserrat',serif;">
                        Welcome To </a>
                    <ul id="slide-out" class="side-nav">
                        <li class="waves-effect wifull"><a href="#/create" id="changeDiv">Create a
                                Post</a>
                        </li>
                        <li class="waves-effect wifull"><a href="#/posts" id="changeDiv1">View
                                Posts</a></li>
                    </ul>
                    <a href="#" data-activates="slide-out" class="button-collapse show-on-large show-on-medium-and-down"><i
                            class="mdi-navigation-menu"></i></a>
                </div>
            </nav>
        </div>
        <div ng-view></div>
    </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/angular_min.js"></script>
    <script src="../js/angular_route.min.js"></script>
    <script src="js/appRoute.js"></script>
    <script src="../js/materialize.min.js"></script>
    <script>
        $(document).ready(function () {
            $('select').material_select();
        });
        $('.button-collapse').sideNav({
                menuWidth: 300,
                edge: 'left',
                closeOnClick: true
            }
        );
    </script>
    </body>
    </html>

用于路由的

.js文件。

appRoute.js

   (function () {
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
    $routeProvider
        .when('/create', {
            templateUrl: '../create/create.php',
            controller: 'CreateController'
        })
        .when('/posts', {
                templateUrl: '../viewPost/view_post.php',
                controller: 'ViewPostController'
            }
        )
        .otherwise({
            redirectTo: '/create'
        })
});

app.controller('CreateController', function ($scope) {
});

app.controller('ViewPostController', function ($scope) {
});

}).();

我不知道问题是什么，但在ng-view中没有显示任何内容。感谢。

Answer 1

你在appRoute.js的最后一行是错误的。

}).();

删除。（点）

})();

Answer 2

第二个代码变体:)只放普通的HTML模板

'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', 
 function($location, $routeProvider) {
    $routeProvider
        .when('/create', {
            templateUrl: '../create/create.php',
            controller: 'CreateController'
        })
        .when('/posts', {
                templateUrl: '../viewPost/view_post.php',
                controller: 'ViewPostController'
            }
        )
        .otherwise({
            redirectTo: '/create'
        })
}]);

app.controller('CreateController', function ($scope) {
});

app.controller('ViewPostController', function ($scope) {
});

Answer 3

首先，在一个JS App中使用JQuery和Angular是个坏主意。

第二，什么。（）;在appRoute.js的代码末尾？

第三，你是否在appRoute.js中调用了代码（function（）{？

请尝试使用appRoute.js

的代码

'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider)
{
    $routeProvider
        .when('/create', {
            templateUrl: '../create/create.php',
            controller: 'CreateController'
        })
        .when('/posts', {
                templateUrl: '../viewPost/view_post.php',
                controller: 'ViewPostController'
            }
        )
        .otherwise({
            redirectTo: '/create'
        })
});

app.controller('CreateController', function ($scope) {
});

app.controller('ViewPostController', function ($scope) {
});

ngRoute在Angular中不起作用？

3 个答案: