0
votes

angular.js:38 Uncaught Error: [$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=""> It works when i didn't add value. <body ng-app="mainapp"> It didn't work and give the above error.Also my css didn't work. How can i fix it?Can someone help me?

<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
ಠ_ಠ <-- MFW I'm trying to figure out this post. You might want to provide some more code as well as clean up the post to clarify what you're asking. - KreepN
You need to define angular module as var app = angular.module("mainapp",[]); - Rahul Arora
How can i define.Can u tell me more detail.I am the newbie of angular js. @RahulArora - Pyae Phyo Hlaing
@PyaePhyoHlaing would suggest starting by browsing over the intros to the pages here so you have some idea of what the lingo means in the context of angular docs.angularjs.org/guide Then go through at least some of the tutorial before trying to go your own route docs.angularjs.org/tutorial - shaunhusain

1 Answers

0
votes

The mainapp must be defined as an angular module somewhere in the JS you include in the index.html

When the document ready event occurs angular reads the DOM and looks for elements with an attribute of ng-app, for the first one it finds traversing the DOM it will try to create and run any .config blocks then any .run blocks and if you have a router configured the router will check the URL and load the appropriate templates and controllers (after any async resolves finish, if they are specified). In your case from what you shared no one can see where/if you defined the module that it's trying to start executing things for so it fails.

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>