AngularJS의 기본 소개-JS 튜토리얼-php.cn

AngularJS의 기본 소개

零到壹度

풀어 주다： 2022-12-07 09:49:43

원래의

2031명이 탐색했습니다.

이 글의 내용은 angularjs에 대한 기본 소개입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

핵심 포인트:

프론트엔드 JS 프레임워크: 프론트엔드 반복 기능 개발을 위한 JS 사용을 캡슐화하고 HTML을 확장하며 주로 페이지 작업 및 표시에 사용됩니다.

핵심: MVC, 모듈화, 양방향 데이터 바인딩, 종속성 주입, 의미 체계 태그, 표현식 등 [추천 관련 동영상 튜토리얼: angularjs 동영상 튜토리얼]

양방향 데이터 바인딩

모듈형 MVC(MVVM) 기반

View: 주로 HTML 정적 페이지 데이터 태그를 나타내며 주로 표시에 사용됩니다.

모델: 주로 보기 및 논리적 처리를 위한 일부 데이터만 채웁니다. 예를 들어 json, 변수

제어: 일부 js 코드, 로직 작성. 주로 모델을 가져오고, 뷰를 채우고, 뷰에서 데이터를 가져오고, 모델을 채우는 것입니다.

m과 vm 간의 변환:

예를 들어 변수:

var username=”XiaoQi”;
$scope.username=username;

로그인 후 복사

vm의 변수는 실제로 전역 변수 $scope의 속성에 바인딩됩니다.

페이지: {{username}}

참고: Angularjs 변수는 페이지의 $scope에 추가할 수 없습니다.

타이머 등 내부 js에 의해 변수가 변경된 경우 기본적으로 Angularjs는 양방향 데이터 바인딩 및 표시를 구현할 수 없으며 강제 알림(새로 고침)을 수행하려면 $.digest를 사용해야 합니다. 페이지가 열립니다:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--<p ng-app="myApp" ng-controller="myCtrl"  ng-init="username=&#39;Jack&#39;">-->
       
       <p ng-app="myApp" ng-controller="myCtrl">
           
           <input ng-model="username"/>
           <p>{{username}}</p>
       </p>
       
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           //参数1：应用模块的名字
           //参数2：使用扩展模块，这里没有
           var myApp=angular.module("myApp",[]);
           //初始化控制器：认为控制器绑定了一堆js
           //参数1：控制器的名字
           //参数2：js函数
           myApp.controller("myCtrl",["$scope",function ($scope) {
              //初始化变量
              $scope.username="XiaoQi";
              //可以写任何的js
           }]);
           
       </script>
    </body>
</html>

로그인 후 복사

참고:

이름이 지정된 애플리케이션 모듈과 컨트롤러를 정의하는 경우, 초기화하려면 js를 사용해야 합니다. !

종속성 주입 DI

버튼 이벤트 바인딩

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="username"/>
           <input type="button" value="清空数据1" ng-click="clearMsg()"/>
           <input type="button" value="清空数据2" ng-click="username=&#39;&#39;"/>
           <p>Hello {{username}}</p>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           var myApp=angular.module("myApp",[]);
           //初始化控制器
           myApp.controller("myCtrl",["$scope",function($scope){
              //初始化一个angularjs的事件
              $scope.clearMsg=function(){
                  //清空数据
                  $scope.username="";
              };
           }]);
       </script>
    </body>
</html>

로그인 후 복사

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <table border="1">
              <tr>
                  <th>序号</th>
                  <th>商品编号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
              </tr>
              <tr ng-repeat="product in  products">
                  <td>{{$index+1}}</td>
                  <td>{{product.id}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
              </tr>
           </table>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[])
           .controller("myCtrl",["$scope",function($scope){
              //json数组
              $scope.products=[
                  {"id":1001,"name":"电视机","price":998},
                  {"id":1002,"name":"洗衣机","price":988898}
              ];
           }])
        </script>
    </body>
</html>

로그인 후 복사

product: 원하는 대로 각 순회에 대한 임시 anglejs 개체를 작성합니다. 여기서는 각 json 개체를 나타냅니다.

라우팅 메커니즘

이전: 포함에는 단지 재사용된 페이지인 페이지가 포함되어 있지만 재사용된 페이지도 전체적으로 새로 고쳐집니다.

Angularjs 라우팅을 통해 부분 새로고침이 가능하며, 반복되는 머리와 꼬리가 새로고침 없이 구현될 수 있습니다. 그리고 다중 보기 단일 페이지 효과.

기본 구현: html에서 #(앵커)를 통해 구현됩니다.

공식 예시:

작성: url+#+subpath (가운데 표시)

라우팅 모듈 소개:

<!--引入路由模块-->
       <script type="text/javascript"  src="../js/angular-route.min.js"  ></script>

로그인 후 복사

rreee

ng-view: 라우팅 결과의 내용을 표시하는 데 사용

when: 판단문

template: html의 결과, html 태그 지원

templateUrl: 다른 페이지 로딩 지원