Anglejs를 어떻게 사용하나요? Anglejs 프레임워크 예제에 대한 자세한 분석(전체 예제 포함)-JS 튜토리얼-php.cn

이 글에서는 전체 태그에 대한 전체 예제와 자세한 설명과 함께 angularjs의 프레임워크 지식 포인트를 요약하여 소개합니다. 다음으로 이 글을 함께 읽어볼까요

1. AngularJS란 무엇인가요?

Google에서 개발한 MVC 구조의 프런트엔드 프레임워크입니다. Angular 애플리케이션에서 뷰 레이어는 DOM이고 컨트롤러는 JavaScript 클래스이며 모델 데이터는 개체 속성에 저장됩니다.

2. 데이터 바인딩

은 인터페이스의 특정 부분이 JavaScript 의 속성에 매핑되어 자동으로 동기화되도록 선언합니다. 필드에 대한 리스너를 등록할 필요가 없으며 개체 속성과 인터페이스 표시를 동기적으로 변경할 수 있습니다.

3. 종속성 주입

다음과 같은 방법으로 필수 객체 $scope 또는 $loaction을 생성자에 주입할 필요가 없습니다. 이것이 의존성 주입입니다.

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

로그인 후 복사

4. Directives

프레임워크의 핵심 레이어에는 HTML 구문을 확장할 수 있는 강력한 DOM 변환 엔진이 있습니다. HTML의 ng-controller는 어떤 컨트롤러가 어떤 뷰를 제공할지 지정하는 데 사용되며 ng-model은 입력 상자를 모델 부분에 바인딩합니다. 우리는 이것을 HTML 확장 지시어라고 부릅니다. 5. ng-app

속성은

Angular

가 관리해야 할 페이지 부분을 알려줍니다.

html

요소에 넣었기 때문에

Angular
에게 전체 페이지를 관리하라고 지시합니다. 페이지를 관리하기 위해 다른 방법을 사용하는 기존 애플리케이션과

Angular를 통합하는 경우 이를 애플리케이션의 p

에 배치해야 할 수도 있습니다. 2) Angular 에서는 JavaScript 클래스로 관리하는 페이지 영역을 컨트롤러라고 합니다. body 태그 내에 컨트롤러를 포함하면 선언된 CartController

가 body 태그 사이에 있는 모든 항목을 관리합니다.

ng-repeat 는 items을 나타냅니다. 배열의 각 요소는 이 p의 DOM에 한 번 복사됩니다. p의 각 복사본에는 item이라는 속성도 현재 요소를 나타내도록 설정되어 있으므로 템플릿에서 사용할 수 있습니다. 보시다시피 각 p에는 제품 이름, 수량, 단가, 총 가격 및 제거 버튼이 포함되어 있습니다.

4) {{item.title}}

'Hello World' 예시에서 볼 수 있듯이 데이터 바인딩은 {{ }}페이지의 특정 부분에 변수 값을 삽입하고 동기화를 유지하세요. 완전한 표현식 {{item.title}}은 반복에서 현재 항목을 검색한 다음 현재 항목의 titile 속성 값을 DOM에 삽입합니다.

ng-model Definition은 입력 필드와 item.Quantity 사이에 데이터 바인딩을 생성합니다. span 태그 {{ }}단방향 연결을 설정합니다. 여기에 값을 입력하세요. 하지만 애플리케이션은 사용자가 수량을 변경하면 우리가 원하는 대로 총 가격이 변경될 수 있다는 것을 알아야 합니다. ng-model을 사용하면 변경 사항이 모델과 동기화됩니다. ng-model은 item.Quantity 값이 입력 상자에 삽입되고 사용자가 새 값을 입력할 때마다 item.Quantity가 자동으로 업데이트됨을 선언합니다.

6) {{item.price | 통화}}

단가를 미국 달러 형식으로 지정하겠습니다. Angular 에는 텍스트를 변환할 수 있는 필터라는 기능이 있으며, 이 달러 형식 서식을 지정하는 currency 라는 필터가 있습니다. &7

) l & lt; Button ng-click = "Remove ($ Index)" & GT; Remove & LT;/Button & GT;

Remove () 기능을 호출하려면 이 버튼을 클릭하세요.

$index도 전달되는데, 여기에는 ng-repeat의 반복 순서가 포함되어 있어 제거할 항목을 알 수 있습니다. 8)function CartController($scope) {

CartController

이 장바구니의 논리를 관리합니다. 이를 통해 Angularcontroller

에 $scope 라는 개체가 필요함을 알립니다. $scope

는 인터페이스의 요소에 데이터를 바인딩하는 데 사용됩니다.

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

로그인 후 복사

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<p>{{someText.message}}</p>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>

로그인 후 복사

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在