ng-app 지시문 값을 추가 할 때 html CSS가 작동하지 않습니다.

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)ng-app 지시문 값을 추가 할 때 html CSS가 작동하지 않습니다.

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

출처

2016-07-19 Pyae Phyo Hlaing

ಠ_ಠ <-이 게시물을 알아 내려고 노력하고있어 MFW. 더 많은 코드를 제공하고 게시물을 정리하여 사용자가 원하는 내용을 명확히 할 수 있습니다. – KreepN

각도 모듈을 var app = angular.module ("mainapp", []);로 정의해야합니다. –

어떻게 정의 할 수 있습니다. 자세한 내용을 알려 주실 수 있습니까? 저는 각도 j의 초보자입니다. @RahulArora –

mainapp는 문서 준비 이벤트가 각도가 DOM 읽고 발생 NG의 속성과 요소를 검색 할 때 당신은 index.html을

에 포함 JS 어딘가에 각도 모듈로 정의해야합니다 -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-19 18:49:26 shaunhusain

angular.module ('mainapp', []) 내가이 코드를 추가해야합니까? 내가 도울 수 .. –

@PyaePhyoHlaing 그 정의는 동일한 페이지의 블록에있을 수 있지만 일반적으로 스크립트 태그를 사용하여 JS 확장자가있는 텍스트 파일에서로드됩니다. – shaunhusain

나는 2 개의 오류가 더 많다 .... 1. GET 파일 : ///angularjs/src/module/mainApp.js net :: ERR_FILE_NOT_FOUND 2. .GET 파일 : ///angularjs/src/module/studentController.js net :: ERR_FILE_NOT_FOUND. 3. angular.js : 38Uncaught 오류 : [$ 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) –

ng-app 지시문 값을 추가 할 때 html CSS가 작동하지 않습니다.

답변

관련 문제