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="">当我没有增加值(value)时它起作用了。
<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>
最佳答案
mainapp 必须定义为包含在 index.html 中的 JS 某处的 Angular 模块
当文档就绪事件发生时，angular 读取 DOM 并查找具有 ng-app 属性的元素，对于它找到的第一个遍历 DOM 的元素，它将尝试创建并运行任何 .config block ，然后是任何 .run block 如果您配置了路由器，路由器将检查 URL 并加载适当的模板和 Controller (在任何异步解析完成后，如果指定的话)。在你的情况下，从你分享的内容中，没有人可以看到你在哪里/如果你定义了它试图开始执行的模块，所以它失败了。
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>关于css - 添加 ng-app 指令值时，html css 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38466006/