添加ng-app指令值时,html css不起作用

时间:2016-07-19 18:32:07

标签: css angularjs ng-app

angular.js:38未捕捉错误:[$ injector:modulerr] http://errors.angularjs.org/1.4.8/ $ injector / modulerr?p0 = mainapp& p1 =错误%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>

1 个答案:

答案 0 :(得分: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>