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>
答案 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>