angularJS 기초 회고

4822 단어 web
송 양
본 고 는 아수라 도 에서 나 온 것 으로 상업 적 용도 로 사용 되 는 것 을 금지 하 며 전재 출처 를 밝 혀 주 십시오.  
원본 링크:http://blog.csdn.net/fansongy/article/details/44106207
width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=2080045857&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Fandroid-game%2F1521.html&dpc=1" style="font-size: 14px; font-weight: bold; border-width: 0px; margin: 0px; padding: 0px; font-family: arial, helvetica, clean, sans-serif; line-height: 16px;">
데이터
“I'm string”
123
{A:"I'm",B:"Dictory"}
{"I","am","array"}

기본 데이터 사용ng-init,ng-bind관련.

표현 식
텍스트 영역 에 쓸 수 있 는 내용 은 표현 방식 이 다음 과 같다.{{expression}}이것 은 실제 가격ng-bind이다.
 
My express:{{"check Now~"+firstName}}

지령
  • ng-app 명령 은 AngularJS 응용 프로그램의 루트 요 소 를 정의 합 니 다.
  • ng-repat 명령 은 집합(배열 중)의 항목 마다 HTML 요 소 를 복제 합 니 다.
    • 	
    
	
	
        ：
    
	
      
	  
    • 
	    {{ x.name + ', ' + x.country }}
	  
      •

    컨트롤 러
    스 크 립 트 불 러 오기 전에 헤드 에 넣 어야 합 니 다:
    
    
    
    <script type="text/javascript" src="bower_components/angular/angular.min.js"/>  
    <script type="text/javascript">
    var myModel = angular.module("myModel",[]);
    myModel.controller("myController",function($scope) {
        $scope.persion = {
            firstName:"Dan",
            lastName:"Jao"
        };
    });
    </script>
</code></pre> 
  <br/> 
  <br/> 
   
  <p>              module。      ，  <code>angular.module('appName',['dependcyModuleNmae'])</code>   ，   controller       controller。          <code>$scope</code>  </p> 
   
  <pre><code>	<div ng-app="myModel" ng-controller="myController">
	    FirstName:<input type="text" ng-model="persion.firstName"/><br/>
	    LastName:<input type="text" ng-model="persion.lastName"/><br/>
	    Whole: {{persion.firstName+" "+persion.lastName}}
	</div>
</code></pre> 
  <br/> 
  <br/> 
   
  <p>             ng-app，    main()。</p> 
  <h2 id="   ">   </h2> 
  <p>            </p> 
  <ul> 
   <li>currency           。</li> 
   <li> filter            。</li> 
   <li> lowercase          。</li> 
   <li> orderBy            。</li> 
   <li> uppercase          。</li> 
  </ul> 
  <p>  ：</p> 
  <pre><code>{{ (x.name |uppercase)+","+x.others }}
<p>   = {{ (quantity * price) | currency }}</p>
<li ng-repeat="x in names | orderBy:'country'"/></code></pre> 
  <h2 id="  ">  </h2> 
  <p>      <code>$emit('myEvent')</code>，      <code>$broadcast('myEvent')</code>      ：</p> 
  <pre><code>$scope.$on('myEvent'),function() {
    $scope.count++;
}</code></pre> 
  <h2 id="scope">$scope</h2> 
  <p><span class="math">$scope angularjs   。      ，    `$</span>rootScope<code>。    </code>angular.element($0).scope()`    。</p> 
  <p style="text-align:center;"><span style="font-family:'Microsoft YaHei';font-size:16px;line-height:26px;"><strong><span style="color:#009900;">              ，      </span><span style="color:#cc0000;"> </span><span style="color:#009900;">，       ，          ... <img src="https://s1.md5.ltd/image/894fc6246dc3436e80c63202b1444589.jpg" alt="" width="0" height="0" class="check_url_is_full"/></span></strong></span><br/><br/></p> 
 </div> 
</div>
                            </div>
                        </div>
    Http 의 디 코딩
    JDK 5.0 특성-스 레 드 잠 금 잠 금

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage