ngRoute 在 Angular 中不工作？

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

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

二、什么.();在代码末尾 appRoute.js ?

三、有没有call in 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) {
});

Answer 3

代码的第二种变体:)只放普通的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) {
});

ngRoute 在 Angular 中不工作？

ngRoute not working in Angular?

javascript

angularjs

angularjs-routing