我的 AngularJS 路由不起作用？答案

【问题标题】：My AngularJS routing doesn't work?我的 AngularJS 路由不起作用？
【发布时间】：2016-12-14 03:05:24
【问题描述】：

我有我的主页，我想从中进行路由，但是当我启动此页面时，我看不到任何内容，并且在浏览器中没有 #/ 在这里唱歌，我被卡住了，我是初学者，所以我会很感激任何帮助这是我在主页上的代码：

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div>
        <div data-ng-view=""></div>
    </div>

    <script>
        var myApp = angular.module("myApp", []).controller("SimpleController", ['$scope', function ($scope) {

            $scope.contacts = [
                { name: "Jhony", tel: "0338987121" },
                { name: "JhonyK", tel: "03332443545" },
                { name: "JhonyKun", tel: "03385666767" },
                { name: "Nick", tel: "12232434343" },

            ];

            $scope.styleDemo = function () {
                if (!$scope.styler) {
                    return;
                }

                return {
                    background: "red",
                    fontWeight: "bold",
                };
            }
        }]).filter('truncate', function () {
            return function (input, limit) {
                return (input.length > limit) ? input.substr(0, limit) + '...' : input;
            };
        }).controller("addController", ['$scope', function ($scope) {

            $scope.customers = [
                { name: "Jhony", code: "12323232" },
                { name: "JhonyK", code: "133443453" },
                { name: "JhonyKun", code: "165768787" },
                { name: "Nick", code: "14323232434" },
                { name: "NickK", code: "1897872323" },
                { name: "NickKun", code: "156656523323" },
            ]

            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, code: $scope.newCustomer.code });
            }
        }]);

        myApp.config(function ($routeProvider) {
            $routeProvider.when('/',
                    {
                        controller: "SimpleController",
                        templateUrl: "HtmlPage2.html"
                    })
            .when('/add',
            {
                controller: 'addController',
                templateUrl: 'add.html'
            })
            .otherwise(
            {
                redirectTo: '/'
            });
        });
    </script>
</body>
</html>

这是我的页面 HtmlPage2.html：

<div class="container">
    <input type="text" ng-model="search.tel" />
    <ul>
        <li data-ng-repeat="con in contacts|filter:search.tel|orderBy:'name':true" ng-cloak>{{con.name}}-{{con.tel}}</li>
    </ul>
    <div class="row">
        <div class="col-md-8">
            <p ng-class="{'text-center':center,'text-danger':error}" ng-style="styleDemo()">
                {{725508723000|date:"h 'o''clock'"}}
            </p>
            <input type="checkbox" ng-model="center"/>
            <input type="checkbox" ng-model="error" />
            <label><input type="checkbox" ng-model="styler"/>ng-style</label>
            <p>{{'Lorem ipsum dolar sit amet'|truncate:15}}</p>
        </div>
    </div>

</div>
<a href="#/add">Add page</a>

还有我的添加页面：

<div class="container">
    <div class="jumbotron">
        <h1>This is my add page</h1>
    </div>
    Customer Name:<br />
    <input type="text" data-ng-model="newCustomer.name"/><br /><br />
    Customer City:<br />
    <input type="text" data-ng-model="newCustomer.code"/><br /><br />
    <button data-ng-click="addCustomer()">Add customer</button><br /><br /><br />
    Filter:<br />
    <input type="text" data-ng-model="customer.name" /><br />
    <ul>
        <li data-ng-repeat="customer in customers|filter:customer.name">{{customer.name}}-{{customer.code}}</li>
    </ul>
</div>

我得到了这个错误控制台，但我插入了 jQuery，但仍然没有：

错误：Bootstrap 的 JavaScript 需要 jQuery
angular.min.js:40Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.8 %2F%24injector%2Funpr%3Fp0%3D%2524routeProvider

【问题讨论】：

您是否在控制台中看到任何错误？？
我忘了我必须向 thx 寻求建议
你有未缩小的角脚本吗？喜欢：<script src="Scripts/angular.js"></script>。如果这样做，请更改它并显示您得到的新控制台错误。此外，您是否在 Angular 脚本之前插入了 jQuery 脚本？
你使用的是哪个版本的 Angular????
我解决了我忘记插入 angular-route.min.js 的问题，并且在括号中 ['ngRoute'] 无论如何都很完美

标签： angularjs

【解决方案1】：

您将在 html 中包含 angular-route.min.js 文件，并将 ngRoute 作为依赖项添加到您的应用中。

如果您将此文件捆绑到您的应用程序中，那么您可以使用以下代码将其添加到您的页面中。

<script src="angular-route.js">

如果您想从 Google CDN 中包含它，请使用以下代码。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

然后在你的 AngularJS 应用程序中加载 ngRoute 模块，将其添加为依赖模块，如下所示：

var myApp = angular.module("myApp", ['ngRoute']).controller("SimpleController", ['$scope', function ($scope) {
//your controller code goes here
}]);

【讨论】：