찾다

집  >  기사  >  웹 프론트엔드  >  Anglejs의 기본 소개에 대해 얼마나 알고 있나요? 다음은 Anglejs에 대한 자세한 소개입니다.

Anglejs의 기본 소개에 대해 얼마나 알고 있나요? 다음은 Anglejs에 대한 자세한 소개입니다.

寻∝梦
寻∝梦원래의
2018-09-07 14:02:451186검색

이 글에서는 angularjs에 대한 간략한 중간 글을 소개합니다. 은 단일 페이지 웹 애플리케이션인 #🎜을 소개합니다. 🎜# 세 가지 템플릿 방법, $scope, scope, traversal, 기타 지침, 데이터 요청jqLite, $watch, $apply. 다음은 이 글도 함께 읽어보아요

단일 페이지 애플리케이션의 특징: 전체 웹 사이트는 하나의 페이지로 구성되며, 공개 부분은 한 번만 로드됩니다. 페이지 전환의 목적을 달성하기 위해 페이지가 흰색으로 이동하는 현상이 사용됩니다. 앵커 포인트와 페이지는 단일 페이지 웹 애플리케이션의 적용에 해당합니다.

시나리오: 단일 페이지 애플리케이션은 검색 엔진에 적합하지 않으며 검색할 필요가 없는 공개 디스플레이 웹사이트, 웹사이트 백엔드 관리 시스템, 사무실 OA, 하이브리드 앱 등에 적합하지 않습니다. 검색 엔진. Angularjs는 순서에만 의존할 수 없고 이름에만 의존합니다 형식 매개변수의 이름이 변경되면 Anglejs는 무엇을 해야 할지 알 수 없게 됩니다

해결책: 두 번째 매개변수로 배열을 작성하고 그 배열에 콜백 함수를 넣습니다

압축할 때 , 문자열은 압축되지 않으므로 배열은 매개변수의 순서를 결정하기 위해 문자열을 전달합니다

<script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/angular-route/angular-route.min.js"></script>
  <body ng-app="myApp">
      <a href="#!/index">首页</a>
        <a href="#!/list">列表页</a>
        <div ng-view></div>
  </body>
  <script>
      var app=angular.module(&#39;myApp&#39;,[&#39;ngRoute&#39;])
      app.config(function($routeProvider){
          $routeProvider
              .when(&#39;/index&#39;,{
                  templateUrl:&#39;./tpl/index.html&#39;,
                    controller:&#39;indexCtrl&#39;
              })
                .when(&#39;/list&#39;,{
                  templateUrl:&#39;./tpl/list.html&#39;,
                    controller:&#39;listCtrl&#39;
              })
                .otherwise(&#39;/index&#39;)
      });
        app.controller(&#39;indexCtrl&#39;,function($scope){
          $scope.msg="我是首页msg"
      })
        app.controller(&#39;listCtrl&#39;,function($scope){
          $scope.msg="我是列表页msg"
      })  </script>

ScopeScope 근접 원칙

Angularjs에서 컨트롤러에 의해 제어되는 영역은 로컬 범위입니다.

즉, $scope는 로컬 범위를 나타냅니다

$rootScope는 전역 범위를 나타냅니다

변수는 먼저 $scope를 따라 검색됩니다. 변수가 없으면 전역으로 검색합니다.

공용 속성 메서드를 마운트할 수 있습니다

Traverse

ng-repeat="데이터의 현재 항목 루프 중"은 데이터를 루프하고 현재 DOM 요소를 생성합니다

<script>
    templateUrl:&#39;./tpl/index.html&#39;//localhost
      template:&#39;<div>我是首页</div>&#39;//file|localhosst
      template:&#39;indexTpl&#39;//file|localhosst</script>
는 중첩될 수 있는 배열 객체를 트래버스합니다. ng-repeat 태그는 ng-repeat를 사용하여 태그에 중첩될 수도 있습니다.

 ff6d136ddc5fdfeffaf53ff6ee95f185
     68e48d5eb36f6e4cd7474d29c9591769
           {{person.name}}{{person.age}}
           56b3be832e56dba00e0d995f3aa8ae3f{{item}}54bdf357c58b8a65c66d7c19c8e4d114
       bed06894275b65c1ab86501b08a632eb
 929d1f5ca49e04fdcb27f9465b944689

数组项重复，会报错

 <ul>
      <li ng-repeat="item in arr track by $index">{{item}}</li>
  </ul>

其他指令

ng-class="{'类名1':布尔值,'类名2':布尔值}"专门用来添加或者删除类名，接收的值是一个对象，布尔值为真，添加类名，布尔值为假，删除类名

复选框，ng-model用来获取复选框的值，是一个布尔值

ng-bind="数据"，将msg放到属性中进行加载，避免出现闪烁效果

ng-bind-template="{{数据1}} {{数据2}}"

ng-non-bindable直接得到插值表达式中的内容，只要与属性相关，都不执行

ng-show="布尔值"，控制元素的显示和隐藏

ng-hide="布尔值"，控制元素的显示和隐藏

ng-if="布尔值"，控制元素的显示和隐藏 true 显示 false 隐藏

ng-switch&ng-switch-when用法和switch-case类似

事件指令

onclick => ng-click

onmouseenter => ng-mouseenter

onchange => ng-change

ng-dblclick 双击事件

ng-src没有src就不会解析就不会报错，直到angularjs加载完成，解析ng-src之后再生成src

ng-href同上

ng-options用来循环下拉列表，不能单独使用，需要配合ng-model一起使用

请求数据

要请求数据需要先引入js文件

引入的js文件作为依赖文件，控制器中必须写入$http

$http-->请求的地址，相当于jQuery中的ajax

method-->type请求的方式

params-->data只用于get传参

data可以用于post传参

$http点then后面是两个回调函数

第一个回调函数是成功回调

第二个回调函数是失败回调

res是形参，表示请求回来的数据

 <script src="node_modules/angular/angular.js"></script>
  <script src="node_modules/angular-sanitize.min.js"></script>
  <script>
      angular.module(&#39;myApp&#39;,[&#39;ngSanitize&#39;])
            .controller(&#39;demoCtrl&#39;,[&#39;$scope&#39;,&#39;$http&#39;,function($scope,$http){
              $http({                  url:&#39;./test.json&#39;,                    method:&#39;post&#39;,//请求方式
                    params:{//get传参
                        a:1,                      b:2
                    },                    data:{                        c:3,                      d:4
                    }
              }).then(function(res){                    //成功回调
                  console.log(res)
              },function(){                  //失败回调
              })                //另外一种写法
                $http.get(&#39;./test.json&#39;,{params:{a:1,b:2}}).then(function(res){                    //get方式传参
                  console.log(res)
              })
                $http.post(&#39;./test.json&#39;,{c:3,d:4}.then(function(res){                    //post方式传参
                  console.log(res)
              })
          }])  </script>

jqLite

为了方便DOM操作，angularjs提供了一个jQuery精简版，叫做jqLite

$(原生的JS对象)将原生JS对象转换成jQuery对象，目的是为了使用jQuery对象下面提供的方法

angularjs.element(原生JS对象)将原生JS对象转换成jqLite对象，目的是为了使用jqLite对象下面提供的方法

这里angularjs.element相当于jQuery中的$

jqLite中方法的使用和jQuery高度相似

$watch

$watch用来监控数据的变化

第一个参数是要监控的数据，第二个参数是回调函数

回调函数中第一个参数newValue是用户输入的最新内容，第二个参数oldValue是上一次用户输入的内容

页面一上来的时候，回调函数会先执行一次

<script>
      $scope.$watch(&#39;val&#39;,function(newValue,oldValue){          if(newValue.length>10){
              $scope.tips="大于10";
          }else{
              $scope.tips="小于10"
          }
      })  </script>

$apply

当通过原生JS将angularjs中的数据做了改变以后，angularjs不知道，所以需要调用$apply()方法通知angularjs更新html页面

以上就本篇关于angularjs简历的中级篇文章了，下一篇终极的在后面，大家期待吧，想学更多关于angularjs的相关知识就到PHP中文网angularjs参考手册栏目中学习。

위 내용은 Anglejs의 기본 소개에 대해 얼마나 알고 있나요? 다음은 Anglejs에 대한 자세한 소개입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.다음 기사：Angular 편집기가 변수 초기화에 실패했습니다. 이유를 알고 계십니까? 다음은 Anglejs 초기화 실패에 대한 자세한 설명입니다.

관련 기사

더보기