Question

在Web应用程序上工作我正在实现路由，我添加了路由CDN，当我添加ngRoute作为myApp的依赖项时，它现在无法正常工作。在添加ngRoute viewproducts之前工作正常但现在我是什么看到的是： {{product.name}} {{product.company}}而不是实际值。

模块代码：

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

    myApp.config(function($routeProvider){
        $routeProvider.
            when('/addproduct', {
                  templateUrl:'addproduct.html',
                  controller:'myController'
             })
});

控制器代码：

myApp.controller("myController",function($scope,$http){
    $scope.insertData = function(){
        $http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
        .success(function(data,status,headers,config){

           $scope.successMessage = "Inserted Successfuly!"; 
        });
    }

});

HTML CODE：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dashboard</title>
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="js/angular/angular.min.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="main.js"></script>
        <script src="angularkhan.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


    </head>
    <body ng-controller="myController">
        <div class="header">
            <div class="logo">
                <i class="fa fa-tachometer"></i>
                <span>Dashboard</span>
            </div>
            <a href="#" class="nav-trigger"><span></span></a>
        </div>
        <div class="side-nav">
            <div class="logo">
                <i class="fa fa-tachometer"></i>
                <span>Dashboard</span>
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#">
                            <span><i class="fa fa-user"></i></span>
                            <span>Users</span>
                        </a>
                    </li>
                    <li>
                        <a href="addproduct.html">
                            <span><i class="fa fa-user"></i></span>
                            <span>Add Product</span>
                        </a>
                    </li>
                    <li>
                        <a href="viewproducts.html">

                            <span><i class="fa fa-envelope"></i></span>
                            <span>View Products</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <span><i class="fa fa-bar-chart"></i></span>
                            <span>Analytics</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span><i class="fa fa-credit-card-alt"></i></span>
                            <span>Payments</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <div class="title">
                Add Product
            </div>

            <div class="main" ng-view> 

                <form style="padding:10px">
                      <div class="form-group">
                        <label for="ProductName">Product Name</label>
                        <input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
                      </div>
                      <div class="form-group">
                        <label for="company">Company </label>
                        <input type="text" class="form-control" placeholder="company" ng-model="company">
                      </div>
                      <div class="form-group">
                        <label for="company">Price </label>
                        <input type="text" class="form-control" placeholder="price" ng-model="price">
                      </div>
                      <div class="form-group">
                        <label for="company">Quantity </label>
                        <input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
                      </div>
                      <button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
                      <h1>{{successMessage}}</h1>

                </form>
            </div>
        </div>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>

Answer 1

看起来您可能正在重新设计模块。您的项目中的其他地方是否有以下代码？

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

如果这样做，带括号的第二个模块调用将重新定义现有模块。尝试将ngRoute依赖项添加到第一个模块定义，并删除config中的一个括号。它应该如下所示。

var myApp = angular.module('myApp');

Answer 2

你的剧本顺序很重要！您创建角度模块应用程序的文件：

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

此文件应位于angular-route文件之后。

修正：

<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<script src="main.js"></script>
<script src="angularkhan.js"></script>

为什么添加依赖项会导致AngularJS出错？

2 个答案: