Question

我有我想要做路由的主页但是当我开始这个页面时我什么都没看到，在浏览器中没有＃/唱歌，我被卡住了，我是初学者所以我非常感谢任何帮助，这是我的主页代码：

<!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：40错误：[$ injector：modulerr] http://errors.angularjs.org/1.5.8/ $ injector / modulerr？p0 = myApp＆amp; p1 =％5B％24injector％3Aunpr％5D％20http％3A％2F％2Ferrors.angularjs.org ％2F1.5.8％2F％24injector％2Funpr％3Fp0％3D％2524routeProvider

Answer 1

您将包含angular-route.min.js文件到您的html并添加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>

然后将AngRoute模块作为依赖模块添加到AngularJS应用程序中，如下所示：

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

我的AngularJS路由不起作用？

1 个答案: