AngularJS를 시작하기 위한 상식 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS를 시작하기 위한 상식 요약

巴扎黑

Jul 23, 2017 pm 03:07 PM

angularjsjavascript기본 지식

머리말

오늘 AngularJS를 배워봅시다...

AngularJS는 새로운 속성과 표현식으로 HTML을 확장합니다.

　 AngularJS는 단일 페이지 애플리케이션을 구축할 수 있습니다.

　 AngularJS는 배우기 매우 쉽습니다.

1. AngularJS 명령어 및 표현식

【AngularJS 공통 명령어】
1.ng-app: Angular가 관리하는 영역을 선언합니다. 일반적으로 본문이나 HTML로 작성되지만 원칙적으로 페이지당 하나만 있습니다.
2.ng-model: 요소 값(예: 입력 필드의 값)을 애플리케이션 변수에 바인딩합니다.
eg:
3.ng-bind: 애플리케이션 변수의 데이터를 HTML 보기에 바인딩합니다. 이는 표현식으로 대체될 수 있습니다.
예:

{{name}}
4.ng-init: AngularJS 애플리케이션 변수를 초기화합니다.
예:
5. 표현식: {{}} 텍스트, 연산자 및 변수를 포함할 수 있는 바인딩 표현식입니다.
하지만 웹페이지가 로드되면 표현식에 {{}}가 표시되므로 대신 ng-bind=""를 사용할 수 있습니다.
예:{{ 5 + "" + 5 + ',Angular' }}

[기본 개념]
지시문: AngularJS에서는 HTML의 속성을 확장하여 함수를 제공합니다.
따라서 ng-로 시작하는 새로운 속성을 우리는 지침이라고 합니다.

2. AngularJS의 MVC 범위

【MVC 3계층 아키텍처】
1. 모델:
데이터를 처리하는 데 사용되는 애플리케이션의 일부입니다. (데이터베이스, 변수 등에 데이터를 저장하거나 수정합니다.) AngularJS의 모델은 구체적으로 데이터를 나타냅니다.
View: 사용자가 데이터를 표시하기 위해 보는 페이지입니다.
컨트롤러: 사용자 상호 작용을 처리하는 애플리케이션의 일부입니다. 뷰에서 데이터를 읽고, 사용자 입력을 제어하고, 모델에 데이터를 보내는 일을 담당합니다.

2. 작동 원리:
사용자가 요청을 받은 후 컨트롤러는 이를 해당 모델로 전달하여 처리를 완료합니다.

3. ng-app이 바인딩되는 부분인 Angular 모듈을 생성합니다.
①모듈 이름: ng-app을 바인딩해야 하는 이름, ng-app="myApp"
②Array: 주입해야 하는 모듈의 이름이 필요하지 않은 경우 비어 있을 수 있습니다.
예:var app= angle.module("myApp",[]);

Angular 모듈에서 컨트롤러 컨트롤러를 만들고 두 개의 매개변수를 전달해야 합니다.
①컨트롤러 이름, 즉 ng-controller가 바인딩되어야 하는 이름입니다. ng-controller="myCtrl"
②Controllerd의 생성자: 생성자는 $scope/$rootScope 및 다양한 시스템 내장 개체를 포함한 여러 매개변수를 전달할 수 있습니다. : $scope에 선언된 로컬 범위, 속성 및 메서드는 현재 Controller

에서만 사용할 수 있습니다. ②$rootScope: $rootScope에 선언된 루트 범위, 속성 및 메서드,
ng에 포함된 모든 영역에서 사용할 수 있습니다. -app (Controller와 동일한지, Controller의 범위에 있는지 관계없음)
>>> 변수 선언에 $scope를 사용하지 않고 직접 사용하는 경우 HTML에서 ng-model에 바인딩된 변수 범위는
1입니다. ng-model이 ng-controller에 있는 경우 이 변수는 기본적으로 현재 컨트롤러의 $scope에 바인딩됩니다. ng -model이 ng-controller에 없으면 이 변수는 $rootScope에 바인딩됩니다.

3. AngularJS 필터

AngularJS에서는 파이프 문자(|)를 사용하여 표현식과 지시문에 필터를 추가할 수 있습니다.

>>> 시스템 내장 필터:
통화: 숫자를 통화 형식으로 지정합니다.
필터: 배열 항목에서 하위 집합을 선택합니다.
소문자: 문자열을 소문자로 포맷합니다.
orderBy: 표현식에 따라 배열을 정렬합니다.
대문자: 문자열을 대문자로 포맷합니다.

예:

4. AngularJS http && 선택 && DOM 작업

1. AngularJS의 http
$http는 원격 서버에서 데이터를 읽는 데 사용되는 AngularJS의 핵심 서비스입니다.

2. AngularJS에서 선택
① 배열을 데이터 소스로 사용합니다. 여기서 x는 배열의 각 항목을 나타냅니다.
기본적으로 x는 옵션 값에 직접 바인딩되며 옵션에 의해 표시되는 내용은 이전 x에 의해 결정됩니다....
예:

②객체를 데이터 소스로 사용합니다. 여기서 , (x, y)는 키-값 쌍을 나타내며, x는 키, y는 값입니다.
기본적으로 y 값은 옵션 값에 바인딩되며 옵션에 의해 표시되는 내용은 이전 x에 의해 결정됩니다....
예:

3.
①ng-disabled="true/false"
true가 전달되면 컨트롤이 비활성화됩니다. false가 전달되면 활성화됩니다.

동의하시나요?
샤오시 너무 귀여워요!

②ng-show
true가 전달될 때 표시되도록 기본적으로 숨겨짐

쇼?

> ;

3ng-hide
기본 표시는 true가 전달되면 숨기는 것입니다

> ;

4ng-click
은 AngularJS의 클릭 이벤트를 정의합니다.
Angular 범위에 바인딩된 속성과 메서드만 트리거될 수 있습니다.

DOM操作附录：
eg:
先导入JS文件angular.js！！！

<script></script>

JS代码：

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

六、AngularJS中的动画

AngularJS에서 애니메이션 사용:
애니메이션 효과를 제공하며 CSS와 함께 사용할 수 있습니다.

1. AngularJS에서 애니메이션을 사용하려면 angle-animate.js 라이브러리를 도입해야 합니다!

2.페이지에 커스텀 모듈(ng-app)이 없으면 시스템 모듈 ng-app="ngAnimate"를 직접 바인딩할 수 있습니다.
페이지에 커스텀 모듈이 있으면 모듈 뒤에 "ngAnimate" 모듈을 삽입합니다.
eg:angular.module("app",["ngAnimate"])

3. 요소 표시 및 숨기기를 제어하기 위해 관련 명령을 호출하면 해당 클래스가 자동으로 추가됩니다. -show/ ng-hide는 ng-hide
ng-if/ng-switch/ng-repeat 및 기타 지침을 제거/추가합니다. 표시되는 클래스 스타일과 숨겨진 클래스 스타일을 각각 설정해야 합니다.
표시된 후: . ng- enter-active,.ng-leave{}
숨긴 후: .ng-enter,.ng-leave-active{}

1. 라우팅을 구현하는 js 파일(angular-route.js)을 로드합니다.

2. ngRoute 모듈을 기본 애플리케이션 모듈의 종속 모듈로 포함합니다.
eg:angular.module("app",["ngRoute"])

3. 하이퍼링크를 경로 형식으로 변경합니다:
eg:

4. 구성에서 라우팅 구성을 위해 $routeProvider를 삽입합니다.
$routeProvider
.when('/',{template:'This is the home page'})
.when('/page1',{template:'페이지1입니다'})
.when('/page2',{template:'페이지2입니다'})
.when( '/page3' ,{template:'page3 페이지입니다'})
.otherwise({redirectTo:'/'});
})
5. 페이지 보기의 적절한 위치에 ng-를 추가하세요. , 열린 페이지를 호스팅하는 데 사용됨

[라우팅 매개변수 객체의 선택적 속성]
1.tempalte: ng-view에 로드될 사용자 정의 HTML 템플릿
2.tempalteUrl: 외부 HTML 템플릿을 가져옵니다. 외부 HTML과의 충돌을 방지하려면 본문 내부에 코드만 유지하면 됩니다. 3.redirectTo: 일반적으로 .otherwise()에서 사용되는 특정 페이지로 리디렉션합니다.
4.controller: 현재 템플릿에서 실행되는 컨트롤러 함수는 새로운 범위를 생성합니다.