0

angular.js:38 未捕获的错误:[$injector:modulerr ] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=mainapp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs %2F1.4.8%2Fangular.min.js%3A19%3A463)

<body ng-app="">当我没有增加价值时它会起作用。 <body ng-app="mainapp">它不起作用并给出上述错误。我的 css 也不起作用。我该如何解决?有人可以帮我吗?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="mainapp">
<div id="slidingDiv">

        <section id="Proposal">
            <div class="container cev2">
                <div class="grid-1 ev">

                    <h1>Contact Information</h1>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">Name:</label>
                            <div class="col-sm-10">
                                <input type="name" class="form-control" id="name" placeholder="Enter your full name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="phon">Ph no:</label>
                            <div class="col-sm-10">
                                <input type="phno" class="form-control" id="phno" placeholder="Enter your contact number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="email">Email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" placeholder="Enter your email address">
                            </div>
                        </div>
                    </form>

                    <!--
                </div>
                <div class="grid-1 ev">
                    -->

                    <h1>Event Information</h1>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="sel1">Type of Event</label>
                            <div class="col-sm-10">
                                <select class="form-control  input-sm" id="sel1">
                                    <option>Carrers</option>
                                    <option>Dining</option>
                                    <option>Meeting & Events</option>
                                    <option>Reservations</option>
                                    <option>Services & Facilities</option>
                                    <option>Wedding & Engagement</option>
                                    <option>Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">Start Day</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">End Day</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="sel1">Type of Desserts</label>
                            <div class="col-sm-10">
                                <select class="form-control  input-sm" id="sel1" ng-model="myVar">
                                    <option>None</option>
                                    <option value="icecream">Icecream</option>
                                    <option value="cake">Cake & Bakery</option>
                                    <option value="rice">Fried chicken rice</option>
                                    <option value="dan">Dan port</option>
                                    <option value="myanmar">Myanmar rice and curry</option>
                                    <option value="others">Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">No of Participants</label>
                            <div class="col-sm-10">
                                <input type="parti" class="form-control" id="parti" placeholder="Enter Number of Participants" ng-model="parti">
                            </div>
                        </div>
                        <!--
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="requirement">Other Requirements</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="comment" placeholder="Enter your requirement"></textarea>
                            </div>
                        </div>
                        -->
                        <button type="button" class="btn btn-success" id="submit">Submit</button>
                    </form>

                </div>
                <!-- Booking Summary -->
                <div class="booking" id="booking">
                <div class="grid-1 ev">

                    <div class="panel panel-default">

                        <div class="panel-heading">Booking Summary</div>

                        <div class="panel-body">

                        <div style="float: left; margin-left: 110px;">
                                 <span>Hall</span><br>
                                 <span>no of Days</span><br>
                                 <span>Cash for Hall</span><br>
                                <div ng-switch="myVar">
                                    <div ng-switch-when="icecream">
                                        <span>IceCream</span><br>
                                    </div>
                                    <div ng-switch-when="cake">
                                        <span>Cake & Bakery</span><br>
                                    </div>
                                    <div ng-switch-when="rice">
                                        <span>Fried Chicken Rice</span><br>
                                    </div>
                                    <div ng-switch-when="dan">
                                        <span>Dan Port</span><br>
                                    </div>
                                    <div ng-switch-when="myanmar">
                                        <span>Myanmar Rice & Curry</span><br>
                                    </div>
                                    <div ng-switch-when="others">
                                        <span>Others</span><br>
                                    </div>
                                </div>
                                 <span>No of participants</span><br>
                            <div ng-switch="myVar">
                                <div ng-switch-when="icecream">
                                    <span>Cash for IceCream</span><br><br>
                                </div>
                                <div ng-switch-when="cake">
                                    <span>Cash for Cake & Bakery</span><br><br>
                                </div>
                                <div ng-switch-when="rice">
                                    <span>Cash for Fried Chicken Rice</span><br><br>
                                </div>
                                <div ng-switch-when="dan">
                                    <span>Cash for Dan Port</span><br><br>
                                </div>
                                <div ng-switch-when="myanmar">
                                    <span>Cash for Myanmar Rice & Curry</span><br><br>
                                </div>
                                <div ng-switch-when="others">
                                    <span>Cash for Others</span><br><br>
                                </div>
                            </div>
                                 <span>Total amount</span>
                             </div>
                             <div>
                                 <span>500,000 kyats</span><br>
                                 <span>$40</span><br>
                                 <span>$40</span><br>
                                 <div ng-switch="myVar">
                                     <div ng-switch-when="icecream">
                                         <span>1,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="cake">
                                         <span>3,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="rice">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="dan">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="myanmar">
                                         <span>4,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="others">
                                         <span>Others</span><br>
                                     </div>
                                 </div>
                                 <span>{{parti}}</span><br>
                                 <div ng-switch="myVar">
                                     <div ng-switch-when="icecream">
                                         <span>1,500*{{parti}} kyats</span><br>
                                     </div>
                                     <div ng-switch-when="cake">
                                         <span>3,500*{{parti}} kyats</span><br>
                                     </div>
                                     <div ng-switch-when="rice">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="dan">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="myanmar">
                                         <span>4,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="others">
                                         <span>Others</span><br>
                                     </div>
                                 </div>
                                 <span>$40</span><br>
                             </div>
                        </div>
                        <button id="myBtn" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  style="margin-bottom: 30px;">Confirm</button>

                        <!-- The Modal -->
                        <div id="myModal" class="modal">

                            <!-- Modal content -->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <span class="close">×</span>
                                    <h2>Confirmation box</h2>
                                </div>
                                <div class="modal-body">
                                    <p>Some text in the Modal Body</p>
                                    <p>Some other text...</p>
                                </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
                            </div>
                            </div>

                        </div>

                    </div>

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

        </section>

    </div>
</body>
</html>
4

1 回答 1

0

mainapp 必须在 index.html 中包含的 JS 中的某处定义为 Angular 模块

当文档就绪事件发生时,角度读取 DOM 并查找具有 ng-app 属性的元素,对于它找到的第一个遍历 DOM 的元素,它将尝试创建并运行任何 .config 块,然后是任何 .run 块,如果你配置了路由器,路由器将检查 URL 并加载适当的模板和控制器(在任何异步解析完成后,如果指定了它们)。在您的情况下,从您共享的内容中,没有人可以看到/如果您定义了它试图开始执行的模块,因此它失败了。

angular.module('mainapp',[])
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="mainapp">
<div id="slidingDiv">

        <section id="Proposal">
            <div class="container cev2">
                <div class="grid-1 ev">

                    <h1>Contact Information</h1>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="name">Name:</label>
                            <div class="col-sm-10">
                                <input type="name" class="form-control" id="name" placeholder="Enter your full name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="phon">Ph no:</label>
                            <div class="col-sm-10">
                                <input type="phno" class="form-control" id="phno" placeholder="Enter your contact number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="email">Email:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="email" placeholder="Enter your email address">
                            </div>
                        </div>
                    </form>

                    <!--
                </div>
                <div class="grid-1 ev">
                    -->

                    <h1>Event Information</h1>
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="sel1">Type of Event</label>
                            <div class="col-sm-10">
                                <select class="form-control  input-sm" id="sel1">
                                    <option>Carrers</option>
                                    <option>Dining</option>
                                    <option>Meeting & Events</option>
                                    <option>Reservations</option>
                                    <option>Services & Facilities</option>
                                    <option>Wedding & Engagement</option>
                                    <option>Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">Start Day</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">End Day</label>
                            <div class="col-sm-10">
                                <input type="date" class="form-control" id="date">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="sel1">Type of Desserts</label>
                            <div class="col-sm-10">
                                <select class="form-control  input-sm" id="sel1" ng-model="myVar">
                                    <option>None</option>
                                    <option value="icecream">Icecream</option>
                                    <option value="cake">Cake & Bakery</option>
                                    <option value="rice">Fried chicken rice</option>
                                    <option value="dan">Dan port</option>
                                    <option value="myanmar">Myanmar rice and curry</option>
                                    <option value="others">Others</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="parti">No of Participants</label>
                            <div class="col-sm-10">
                                <input type="parti" class="form-control" id="parti" placeholder="Enter Number of Participants" ng-model="parti">
                            </div>
                        </div>
                        <!--
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="requirement">Other Requirements</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" id="comment" placeholder="Enter your requirement"></textarea>
                            </div>
                        </div>
                        -->
                        <button type="button" class="btn btn-success" id="submit">Submit</button>
                    </form>

                </div>
                <!-- Booking Summary -->
                <div class="booking" id="booking">
                <div class="grid-1 ev">

                    <div class="panel panel-default">

                        <div class="panel-heading">Booking Summary</div>

                        <div class="panel-body">

                        <div style="float: left; margin-left: 110px;">
                                 <span>Hall</span><br>
                                 <span>no of Days</span><br>
                                 <span>Cash for Hall</span><br>
                                <div ng-switch="myVar">
                                    <div ng-switch-when="icecream">
                                        <span>IceCream</span><br>
                                    </div>
                                    <div ng-switch-when="cake">
                                        <span>Cake & Bakery</span><br>
                                    </div>
                                    <div ng-switch-when="rice">
                                        <span>Fried Chicken Rice</span><br>
                                    </div>
                                    <div ng-switch-when="dan">
                                        <span>Dan Port</span><br>
                                    </div>
                                    <div ng-switch-when="myanmar">
                                        <span>Myanmar Rice & Curry</span><br>
                                    </div>
                                    <div ng-switch-when="others">
                                        <span>Others</span><br>
                                    </div>
                                </div>
                                 <span>No of participants</span><br>
                            <div ng-switch="myVar">
                                <div ng-switch-when="icecream">
                                    <span>Cash for IceCream</span><br><br>
                                </div>
                                <div ng-switch-when="cake">
                                    <span>Cash for Cake & Bakery</span><br><br>
                                </div>
                                <div ng-switch-when="rice">
                                    <span>Cash for Fried Chicken Rice</span><br><br>
                                </div>
                                <div ng-switch-when="dan">
                                    <span>Cash for Dan Port</span><br><br>
                                </div>
                                <div ng-switch-when="myanmar">
                                    <span>Cash for Myanmar Rice & Curry</span><br><br>
                                </div>
                                <div ng-switch-when="others">
                                    <span>Cash for Others</span><br><br>
                                </div>
                            </div>
                                 <span>Total amount</span>
                             </div>
                             <div>
                                 <span>500,000 kyats</span><br>
                                 <span>$40</span><br>
                                 <span>$40</span><br>
                                 <div ng-switch="myVar">
                                     <div ng-switch-when="icecream">
                                         <span>1,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="cake">
                                         <span>3,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="rice">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="dan">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="myanmar">
                                         <span>4,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="others">
                                         <span>Others</span><br>
                                     </div>
                                 </div>
                                 <span>{{parti}}</span><br>
                                 <div ng-switch="myVar">
                                     <div ng-switch-when="icecream">
                                         <span>1,500*{{parti}} kyats</span><br>
                                     </div>
                                     <div ng-switch-when="cake">
                                         <span>3,500*{{parti}} kyats</span><br>
                                     </div>
                                     <div ng-switch-when="rice">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="dan">
                                         <span>4,000 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="myanmar">
                                         <span>4,500 kyats</span><br>
                                     </div>
                                     <div ng-switch-when="others">
                                         <span>Others</span><br>
                                     </div>
                                 </div>
                                 <span>$40</span><br>
                             </div>
                        </div>
                        <button id="myBtn" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"  style="margin-bottom: 30px;">Confirm</button>

                        <!-- The Modal -->
                        <div id="myModal" class="modal">

                            <!-- Modal content -->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <span class="close">×</span>
                                    <h2>Confirmation box</h2>
                                </div>
                                <div class="modal-body">
                                    <p>Some text in the Modal Body</p>
                                    <p>Some other text...</p>
                                </div>
                                <div class="modal-footer">
                                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
                            </div>
                            </div>

                        </div>

                    </div>

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

        </section>

    </div>
</body>
</html>

于 2016-07-19T18:49:26.650 回答