범위, 상속 구조, 이벤트 시스템 및 수명 주기에 대한 AngularJS 심층 분석
이 기사의 예에서는 AngularJS의 범위, 상속 구조, 이벤트 시스템 및 수명 주기를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
Scope 범위에 대한 심층 토론
모든 $scope는 Scope 클래스의 인스턴스입니다. 클래스 범위에는 범위 수명 주기를 제어할 수 있는 메서드가 있고 이벤트 전파 기능을 제공하며 템플릿 렌더링을 지원합니다.
범위 계층
이 간단한 HelloCtrl 예제를 다시 살펴보겠습니다.
var HelloCtrl = function($scope){
$scope.name = 'World';
}
HelloCtrl은 평범한 것처럼 보입니다. 실제로 $scope 매개변수를 제외하고는 실제로 새로운 것이 없습니다. 그런데 이 매개변수는 어디서 오는 걸까요?
이 새로운 범위는 Scope.$new() 메서드를 사용하는 ng-controller 지시문에 의해 생성됩니다. 잠깐, 새 범위를 생성하려면 범위 인스턴스가 하나 이상 있어야 합니다. 예, AngularJS에는 실제로 $rootScope(다른 모든 범위의 상위 항목)가 있습니다. 이 $rootScope 인스턴스는 새 애플리케이션이 시작될 때 생성됩니다.
ng-controller 지시어는 범위를 생성할 수 있는 지시어 중 하나입니다. AngularJS는 DOM 트리에서 이 create-scope 지시어를 만날 때마다 Scope 클래스의 새 인스턴스를 생성합니다. 새로 생성된 범위는 $parent 속성을 통해 자체 상위 범위를 가리킵니다. DOM 트리에는 범위를 생성할 수 있는 지시문이 많이 있으므로 결과적으로 많은 범위가 생성됩니다.
범위의 형태는 부모-자식, 트리형 관계와 유사하며 루트는 $rootScope 인스턴스입니다. 범위 생성이 DOM 트리에 의해 주도되는 것처럼 범위 트리도 DOM의 구조를 모방합니다.
이제 일부 지시문이 새로운 하위 범위를 생성한다는 사실을 알았으므로 이 모든 복잡성이 왜 필요한지 궁금할 것입니다. 이를 이해하기 위해 ng-repeat 루프 지시문이 사용되는 예를 보여드리겠습니다.
컨트롤러는 다음과 같습니다.
var WorldCtrl = function ($scope) {
$scope.population = 7000;
$scope.countries = [
{name: 'France', population: 63.1},
{name: 'United Kingdom', population: 61.8},
];
};
템플릿은 다음과 같습니다.
<ul ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
<hr>
World's population: {{population}} millions
</ul>
ng-repeat 지시문은 여러 국가 컬렉션을 반복하고 컬렉션의 각 항목에 대해 새로운 DOM 요소를 생성합니다. ng-repeat 지시문의 구문은 이해하기 매우 쉽습니다. 각 항목에는 새로운 변수 country가 필요하며 뷰 렌더링을 위해 $scope에 매달립니다.
하지만 여기에 문제가 있습니다. 즉, 각 국가마다 $scope에 새 변수를 마운트해야 하며, 이전에 마운트된 값을 단순히 덮어쓸 수는 없습니다. AngularJS는 컬렉션의 각 요소에 대해 새로운 범위를 생성하여 이 문제를 해결합니다. 새로 생성된 이 범위는 일치하는 DOM 트리 구조와 매우 유사하며, 앞서 언급한 멋진 Chrome 확장 프로그램인 Batarang을 사용하여 시각화할 수도 있습니다.
직사각형으로 둘러싸인 각 범위는 자체 데이터 모델을 유지합니다. 동일한 이름을 가진 변수를 다른 범위에 추가하는 데 전혀 문제가 없으며 이름 지정 충돌이 발생하지 않습니다(다른 DOM 요소는 다른 범위를 가리키며 해당 범위의 변수를 사용하여 템플릿을 렌더링합니다). 이러한 방식으로 각 요소에는 고유한 네임스페이스가 있습니다. 이전 예에서 각
범위의 계층 구조 및 상속
범위에 정의된 속성은 해당 하위 항목에 표시됩니다. 하위 범위는 동일한 이름을 가진 속성을 반복적으로 정의할 필요가 없습니다. 이는 범위 체인을 통해 사용할 수 있는 속성을 반복해서 다시 정의할 필요가 없기 때문에 실제로 매우 유용합니다.
이전 예를 다시 살펴보면, 이러한 국가를 전체 세계 인구의 백분율로 표시한다고 가정해 보겠습니다. 이 기능을 구현하려면 다음과 같이 범위에 worldsPercentage 메서드를 정의하고 WorldCtrl로 관리할 수 있습니다.
$scope.worldsPercentage = function (countryPopulation) {
return (countryPopulation / $scope.population)*100;
}
이 메서드는 다음과 같습니다. ng-repeat에 의해 생성된 모든 범위 인스턴스에 대해 다음과 같이 호출됩니다.
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}},
{{worldsPercentage(country.population)}} % of the World's
population
</li>
AngularJS의 범위 상속 규칙과 JavaScript의 프로토타입 상속 규칙 동일합니다(속성을 읽어야 할 경우 해당 속성을 찾을 때까지 상속 트리를 계속 검색합니다).
스코프 체인을 통한 상속 위험
스코프 계층 관계를 통한 이러한 상속은 데이터를 읽을 때 매우 직관적이고 이해하기 쉽습니다. 하지만 데이터를 쓰면 조금 복잡해집니다.
자식 범위에 있는지 여부에 관계없이 범위에 변수를 정의하는 경우를 살펴보겠습니다. 자바스크립트 코드는
var HelloCtrl = function ($scope) {
};
뷰 코드는
<body ng-app ng-init="name='World'">
<h1>Hello, {{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name">
<h2>Hello, {{name}}!</h2>
</div>
</body>
이 코드를 실행하면 이 이름 변수가 최상위 범위에서만 정의되지만 전체 애플리케이션에서 볼 수 있다는 것을 알 수 있습니다! 이는 변수가 범위 체인에서 상속되었음을 보여줍니다. 즉, 변수는 상위 범위에서 정의된 다음 하위 범위에서 액세스됩니다.
现在，我们一起来看看，如果在 中写点字会发生什么，运行结果你可能会感到吃惊，因为 HelloCtrl 控制器所初始化的作用域创建了一个新的变量，而不是直接去修改$rootScope 实例中的值。不过当我们认识到作用域也只不过是在彼此间进行了原型继承，也就不会觉得那么吃惊了。所有可以用在 JavaScript 对象上的原型继承的规则，都可以同等的用在 作用域 的原型链继承上去。毕竟 Scopes 作用域就是 JavaScript 对象嘛。
在子级作用域中去改变父级作用域上面的属性有几种方法。第一种，我们就直接通过 $parent 属性来引用父级作用域，但我们要看到，这是一个非常不可靠的解决方案。麻烦之处就在于，ng-model 指令所使用的表达式非常严重的依赖于整个DOM结构。比如就在 标签上面的哪里插入另一个 可创建作用域 的指令，那$parent 就会指向一个完全不同的作用域了。
就经验来讲，尽量避免使用 $parent 属性，因为它强制的把 AngularJS 表达式和你的模板所创建的 DOM 结构捆绑在了一起。这样一来，HTML结构的一个小小的改动，都可能会让整个应用崩溃。
另一个解决方案就是，不要直接把属性绑定到 作用域上，而是绑到一个对象上面，如下所示：
<body ng-app ng-init="thing = {name : 'World'}">
<h1>Hello, {{thing.name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="thing.name">
<h2>Hello, {{thing.name}}!</h2>
</div>
</body>
这个方案会更可靠，因为他并没有假设 DOM 树的结构是什么样子。
避免直接把数据绑定到 作用域的属性上。应优先选择把数据双向绑定到对象的属性上（然后再把对象挂到 scope 上）。就经验而言，在给 ng-model 指令的表达式中，你应该有一个点（例如， ng-model="thing.name"）。
作用域层级和事件系统
层级关系中的作用域可以使用 event bus（一种事件系统）。AngularJS可以在作用域层级中传播具名的装备齐全的事件。事件可以从任何一个作用域中发出，然后向上（$emit）和向下（$broadcast）四处传播。
AngularJS核心服务和指令使用这种事件巴士来发出一些应用程序状态变化的重要事件。比如，我们可以监听$locationChangeSuccess 事件（由 $rootScope 实例发出），然后在任何 location（浏览器中就是URL）变化的时候都会得到通知，如下所示：
$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){
//react on the location change here
//for example, update breadcrumbs based on the newUrl
});
每一个作用域对象都会有这个 $on 方法，可以用来注册一个作用域事件的侦听器。这个函数所扮演的侦听器在被调用时会有一个 event 对象作为第一个参数。后面的参数会根据事件类型的不同与事件本身的配备一一对应。
类似于 DOM 事件，我们可以调用 event 对象的 preventDefault() 和 stopPropagation() 方法。stopPropagation() 方法将会阻止事件沿着作用域层级继续冒泡，并且只在事件向上层传播的时候（$emit）才有效。
尽管 AngularJS 的事件系统是模仿了 DOM 的，但两个事件传播系统是完全独立的，没有任何共同之处。
虽然在作用域层级中传播事件对一些问题来说是一种非常优雅方案（特别是对全局的，异步的状态变化来说），但还是要适度使用。通常情况下，可以依靠双向数据绑定来得到一个比较干净的方案。在整个 AngularJS 框架中，一共只发出（$emit）了三个事件（$includeContentRequested,$includeContentLoaded,$viewContentLoaded）和七个广播（$broadcast）（$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart,$routeChangeSuccess, $routeChangeError, $destroy）。正如你所看到的，作用域事件使用的非常少，我们应该在发送自定义的事件之前认真的评估一下其他的可选方案（多数会是双向数据绑定）。
千万不要在 AngularJS 中模仿 DOM 的基于事件的编程方式。大多数情况下，你的应用会有更好的架构方式，你也可以在双向数据绑定这条路上深入探索。
作用域的生命周期
作用域需要提供相互隔离的命名空间，避免变量的命名冲突。作用域们都很小，而且被以层级的方式组织起来，对内存使用的管理来说很有帮助。当其中一个作用域不再需要 ，它就可以被销毁了。结果就是，这个作用域所暴露出来的模型和方法就符合的垃圾回收的标准。
新的作用域通常是被 可创建作用域 的指令所生成和销毁的。不过也可以使用 $new() 和 $destroy() 方法来手动的创建和销毁作用域。
希望本文所述对大家AngularJS程序设计有所帮助。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7486
15
1377
52
77
11
51
19
19
38
입문부터 숙달까지, 2022년 최신 5개 Anglejs 튜토리얼
Jun 15, 2017 pm 05:50 PM
자바스크립트는 코드의 구성, 코드의 프로그래밍 패러다임, 객체지향 이론 측면에서 매우 독특한 언어입니다. 하지만 20년 동안 Javascript가 지배했음에도 불구하고 jQuery, Angularjs, 심지어 React와 같은 인기 프레임워크를 이해하려면 "Black Horse Cloud Classroom JavaScript Advanced Framework"를 시청하세요. 디자인 비디오 튜토리얼'을 참조하세요.
PHP와 AngularJS를 사용하여 반응형 웹사이트를 구축하여 고품질 사용자 경험 제공
Jun 27, 2023 pm 07:37 PM
오늘날의 정보화 시대에 웹사이트는 사람들이 정보를 얻고 소통하는 중요한 도구가 되었습니다. 반응형 웹사이트는 다양한 기기에 적응하고 사용자에게 고품질 경험을 제공할 수 있으며, 이는 현대 웹사이트 개발에서 핫스팟이 되었습니다. 이 기사에서는 PHP와 AngularJS를 사용하여 고품질 사용자 경험을 제공하는 반응형 웹사이트를 구축하는 방법을 소개합니다. PHP 소개 PHP는 웹 개발에 이상적인 오픈 소스 서버측 프로그래밍 언어입니다. PHP는 배우기 쉬움, 크로스 플랫폼, 풍부한 도구 라이브러리, 개발 효율성 등 많은 장점을 가지고 있습니다.
PHP와 AngularJS를 사용하여 웹 애플리케이션 구축
May 27, 2023 pm 08:10 PM
인터넷의 지속적인 발전으로 인해 웹 애플리케이션은 기업 정보 구축의 중요한 부분이자 현대화 작업에 필요한 수단이 되었습니다. 웹 애플리케이션을 쉽게 개발, 유지 관리 및 확장하려면 개발자는 개발 요구 사항에 맞는 기술 프레임워크와 프로그래밍 언어를 선택해야 합니다. PHP와 AngularJS는 각각 서버측 및 클라이언트측 솔루션으로 널리 사용되는 두 가지 웹 개발 기술입니다. 이들을 결합하여 사용하면 웹 애플리케이션의 개발 효율성과 사용자 경험을 크게 향상시킬 수 있습니다. PHPPHP의 장점
PHP 프로그래밍에서 AngularJS를 어떻게 사용하나요?
Jun 12, 2023 am 09:40 AM
웹 애플리케이션의 인기로 인해 프런트엔드 프레임워크인 AngularJS가 점점 인기를 얻고 있습니다. AngularJS는 동적 웹 애플리케이션 기능을 갖춘 웹 애플리케이션을 구축하는 데 도움이 되도록 Google에서 개발한 JavaScript 프레임워크입니다. 반면, 백엔드 프로그래밍의 경우 PHP는 매우 널리 사용되는 프로그래밍 언어입니다. 서버 측 프로그래밍에 PHP를 사용하는 경우 AngularJS와 함께 PHP를 사용하면 웹 사이트에 더욱 역동적인 효과를 가져올 수 있습니다.
Flask와 AngularJS를 사용하여 단일 페이지 웹 애플리케이션 구축
Jun 17, 2023 am 08:49 AM
웹 기술의 급속한 발전으로 단일 페이지 웹 애플리케이션(SinglePage Application, SPA)이 점점 더 인기 있는 웹 애플리케이션 모델이 되었습니다. 기존의 다중 페이지 웹 애플리케이션과 비교하여 SPA의 가장 큰 장점은 사용자 경험이 더 부드럽고 서버의 컴퓨팅 부담도 크게 줄어든다는 것입니다. 이번 글에서는 Flask와 AngularJS를 사용하여 간단한 SPA를 구축하는 방법을 소개하겠습니다. Flask는 경량 Py입니다.
PHP 및 AngularJS를 사용하여 파일 관리를 용이하게 하는 온라인 파일 관리 플랫폼 개발
Jun 27, 2023 pm 01:34 PM
인터넷의 대중화로 인해 점점 더 많은 사람들이 네트워크를 사용하여 파일을 전송하고 공유하고 있습니다. 그러나 여러 가지 이유로 파일 관리에 FTP와 같은 전통적인 방법을 사용하는 것은 현대 사용자의 요구를 충족할 수 없습니다. 따라서 사용하기 쉽고 효율적이며 안전한 온라인 파일 관리 플랫폼을 구축하는 것이 추세가 되었습니다. 본 기사에서 소개하는 온라인 파일 관리 플랫폼은 PHP와 AngularJS를 기반으로 파일 업로드, 다운로드, 편집, 삭제 및 기타 작업을 쉽게 수행할 수 있으며 파일 공유, 검색,
프론트엔드 개발에 PHP와 AngularJS를 사용하는 방법
May 11, 2023 pm 05:18 PM
인터넷의 대중화와 발전으로 프론트엔드 개발이 점점 더 중요해지고 있습니다. 프론트엔드 개발자로서 우리는 다양한 개발 도구와 기술을 이해하고 숙달해야 합니다. 그중 PHP와 AngularJS는 매우 유용하고 인기 있는 두 가지 도구입니다. 이 글에서는 프론트엔드 개발을 위해 이 두 도구를 사용하는 방법을 설명하겠습니다. 1. PHP 소개 PHP는 널리 사용되는 오픈 소스 서버 측 스크립팅 언어로 웹 개발에 적합하며 웹 서버 및 다양한 운영 체제에서 실행될 수 있습니다. PHP의 장점은 단순성, 속도, 편리성입니다.
AngularJS의 기본 소개
Apr 21, 2018 am 10:37 AM
이 글의 내용은 AngularJS의 기본 소개에 관한 것입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
