>웹 프론트엔드 >JS 튜토리얼 >AngularJs 학습 컨트롤러, 데이터 바인딩, 범위 자세한 설명

AngularJs 학습 컨트롤러, 데이터 바인딩, 범위 자세한 설명

零下一度
零下一度원래의
2017-07-23 18:05:211400검색

1. 컨트롤러:

개념: AngleJS에서 컨트롤러는 뷰 범위에 추가 기능을 추가하고, 범위의 초기 상태를 설정하고, 사용자 정의 동작을 추가하는 데 사용되는 함수입니다.

컨트롤러 선언: app.controller('controllerName',function($scope){...})

//    控制器定义//    第一参数: 控制器名称, 第二个参数: 匿名函数, 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "d12c29ee83e5b622484f1e9842eecbbdhello,htmlbinde6e38b3c62e8df885fe2e3986461aa63";
        $scope.subCtrl = "hello subCtrl";

    });

컨트롤러 사용: 필요한 경우(html 어딘가 태그) add ng- 제어 장치.

<body ng-app="myapp" ng-controller="myCtrl">

위에서 컨트롤의 정의와 사용법은 비교적 간단하지만 컨트롤러의 역할과 컨트롤러에 어떤 코드를 작성해야 하는지 이해하지 못하는 사람들이 많을 것입니다. 전체 코드가 컨트롤러에 푸시됩니다. 개인적으로 컨트롤러는 페이지 보기와 모드 사이의 링크일 뿐이라고 생각합니다. 컨트롤러는 일부 데이터 바인딩, 이벤트 바인딩 등과 일련의 간단한 논리, 특정 서버 액세스만 처리합니다. 또는 데이터 읽기 등이 서비스에 구현되어야 합니다. 서비스에 대해서는 다음번에 자세히 말씀드리겠습니다.

컨트롤을 사용하실 때 참고하실 점을 간단하게 정리했습니다.

1) 컨트롤러 및 $scope와 관련된 작업을 최대한 단순화하세요.
2) 컨트롤러를 재사용하지 마세요. 컨트롤러는 일반적으로 뷰의 작은 부분만 담당합니다.
3) 컨트롤러에서 DOM을 조작하지 마세요. 이는 컨트롤러의 책임이 아닙니다.
4) 컨트롤러에서는 데이터 필터링이나 데이터 작업을 수행하지 마십시오.
5) 일반적으로 Controller들은 서로 호출하지 않습니다. $scope와 관련하여 AngularJs의 범위와 그 수명주기에 대해 간략히 설명하겠습니다.

3. :

AngularJs 데이터 바인딩에도 여러 가지 바인딩이 있습니다. 아마 모든 사람들이 사용해 본 적이 있을 것입니다. ㅋㅋ                              {{abc}}                함수: {{func()}}

                표현식: {{a+b }} 이 방법은 Angular가 표현식을 만나는 한 가장 일반적인 표현식 바인딩입니다. 범위 Angular에서는 자동으로 Html이 인식하는 표현식이나 변수로 구문 분석합니다.           2) 명령어 방식(ng-bind):

                      이 바인딩 방식은 요소에 ng-bind 명령어를 추가한 후 Angular가 명령어를 파싱하여 바인딩을 실행하는 것입니다. O 3) NG-MODEL:
이 방법은 주로 양식의 양식 제출에 사용되며 양방향 데이터 바인딩, 페이지 콘텐츠와 모델 간의 양방향 데이터를 구현합니다. ㅋㅋ ~ ng-bind-html? 메서드만 해당되지만 바인딩은 직렬화된 js 파일을 참조해야 합니다.

 bea4b67a9fe0f78efa78bb17563afef42cacc6d41bbb37262a98f745aa00fbf0


5) ng-bind-template:

  이 방법은 여러 변수와 표현식을 한 번에 바인딩할 수 있습니다.

사용 시나리오:

홈페이지는 ng-bind를 사용하고, 템플릿의 페이지는 대괄호 {{}}를 사용할 수 있으며, 양식은 ng-model을 사용하고,

{{}} 구문 결함: 사용자의 지속적인 새로 고침에서 {}도 볼 수 있고, 네트워크가 좋지 않을 때는

도 볼 수 있습니다. 다음 코드는 위 5가지 메소드의 전체 코드입니다.

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb

93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
    8c811ac8fd9babb9040140530f82b25d
    77270bb742f3ad5194245f4c8255d4462cacc6d41bbb37262a98f745aa00fbf0
    60220d8de1216b63e9c1b28a224c045e
    bea4b67a9fe0f78efa78bb17563afef42cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

ccdadbad7e3059b89eb400c635c34cbf

1f053390e7c21aca8a3642f3056f0325
    f134b2367422703a79a890ff392a97ed
    4a249f0d628e2318394fd9b75b4636b1{{expression}}473f0a7621bec819994bb5020d29372a
    111b486f21321f3cada78ef45ecdb88b
    c1a436a314ed609750bd7c7d319db4da{{ngmodel}}2e9b454fa8428549ca2e64dfac4625cd
    29f0abed5aaa39b48e876871254471b0
    019e17b222897eccffa24631cf5a4ef8
    55c6de69ad377b88a286836e38b9a14639528cedfa926ea0c01e69ef5b2ea9b0
    e98a5e78d495c45e9e5b79ae614e661739528cedfa926ea0c01e69ef5b2ea9b0
    3705e54a06f7229001d05ca799a8e1b1
    6235f479a55e5cc5abecaaa6ff74a16b0f6dfd1e3624ce5465eb402e300e01ae
    1f1e0a0a08c80c27718d6a0eccae0f79
    1297111b1e5dbccf7bcf0ba0c1d6d63a46eb22d0a433f22cff9940d34d5612bf
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e
3f1c4e4b6b16bbbd69b2ee476dc4f83a//模块定义// 第一个参数:应用名称,第二个参数:应用依赖模块var app = angular.module('myapp', ['ngSanitize']);//    控制器定义//    第一参数: 控制器名称, 第二个参数: 匿名函数, 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "d12c29ee83e5b622484f1e9842eecbbdhello,htmlbinde6e38b3c62e8df885fe2e3986461aa63";
        $scope.subCtrl = "hello subCtrl";

    });2cacc6d41bbb37262a98f745aa00fbf0

위 내용은 AngularJs 학습 컨트롤러, 데이터 바인딩, 범위 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.