이 글의 내용은 angularjs에 대한 기본 소개입니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.
핵심 포인트:
프론트엔드 JS 프레임워크: 프론트엔드 반복 기능 개발을 위한 JS 사용을 캡슐화하고 HTML을 확장하며 주로 페이지 작업 및 표시에 사용됩니다.
핵심: MVC, 모듈화, 양방향 데이터 바인딩, 종속성 주입, 의미 체계 태그, 표현식 등 [추천 관련 동영상 튜토리얼: angularjs 동영상 튜토리얼]
양방향 데이터 바인딩
관련 js 파일 소개
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--匿名应用模块-->
<p ng-app="">
<input ng-model="username" name="username"/>
<input ng-model="username"/>
<p>{{username}}</p>
<p ng-bind="username"></p>
</p>
</body>
</html>로그인 후 복사
|
ng-app=”An 익명의 애플리케이션 모듈 , 일반적으로 후속 초기화를 용이하게 하기 위해 이름을 작성해야 합니다.
ng-model: form 요소의 값을 Angularjs 내부 변수에 자동으로 바인딩합니다.
ng-bind: 표현식과 기능은 동일하지만 사용법이 다릅니다. 일반적으로 비양식 요소를 바인딩하고 변수를 표시하는 데 사용됩니다.
ng-bind와 {{}}의 차이점: 전자는 레이블 하위 태그의 모든 내용을 변수의 내용으로 바꾸는 반면, 후자는 현재 위치에 있는 변수의 내용만 표시합니다.
모듈형 MVC(MVVM) 기반
View: 주로 HTML 정적 페이지 데이터 태그를 나타내며 주로 표시에 사용됩니다.
모델: 주로 보기 및 논리적 처리를 위한 일부 데이터만 채웁니다. 예를 들어 json, 변수
제어: 일부 js 코드, 로직 작성. 주로 모델을 가져오고, 뷰를 채우고, 뷰에서 데이터를 가져오고, 모델을 채우는 것입니다.
m과 vm 간의 변환:
예를 들어 변수:
var username=”XiaoQi”;
$scope.username=username;
로그인 후 복사
vm의 변수는 실제로 전역 변수 $scope의 속성에 바인딩됩니다.
페이지: {{username}}
참고: Angularjs 변수는 페이지의 $scope에 추가할 수 없습니다.
타이머 등 내부 js에 의해 변수가 변경된 경우 기본적으로 Angularjs는 양방향 데이터 바인딩 및 표시를 구현할 수 없으며 강제 알림(새로 고침)을 수행하려면 $.digest를 사용해야 합니다. 페이지가 열립니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--<p ng-app="myApp" ng-controller="myCtrl" ng-init="username='Jack'">-->
<p ng-app="myApp" ng-controller="myCtrl">
<input ng-model="username"/>
<p>{{username}}</p>
</p>
<!--控制器-->
<script type="text/javascript">
//初始化应用模块
//参数1：应用模块的名字
//参数2：使用扩展模块，这里没有
var myApp=angular.module("myApp",[]);
//初始化控制器：认为控制器绑定了一堆js
//参数1：控制器的名字
//参数2：js函数
myApp.controller("myCtrl",["$scope",function ($scope) {
//初始化变量
$scope.username="XiaoQi";
//可以写任何的js
}]);
</script>
</body>
</html>로그인 후 복사
|
참고:
이름이 지정된 애플리케이션 모듈과 컨트롤러를 정의하는 경우, 초기화하려면 js를 사용해야 합니다. !
종속성 주입 DI
버튼 이벤트 바인딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--视图-->
<p ng-app="myApp" ng-controller="myCtrl">
<input ng-model="username"/>
<input type="button" value="清空数据1" ng-click="clearMsg()"/>
<input type="button" value="清空数据2" ng-click="username=''"/>
<p>Hello {{username}}</p>
</p>
<!--控制器-->
<script type="text/javascript">
//初始化应用模块
var myApp=angular.module("myApp",[]);
//初始化控制器
myApp.controller("myCtrl",["$scope",function($scope){
//初始化一个angularjs的事件
$scope.clearMsg=function(){
//清空数据
$scope.username="";
};
}]);
</script>
</body>
</html>로그인 후 복사
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--视图-->
<p ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</p>
<!--控制器-->
<script type="text/javascript">
angular.module("myApp",[])
.controller("myCtrl",["$scope",function($scope){
//json数组
$scope.products=[
{"id":1001,"name":"电视机","price":998},
{"id":1002,"name":"洗衣机","price":988898}
];
}])
</script>
</body>
</html>로그인 후 복사
|
product: 원하는 대로 각 순회에 대한 임시 anglejs 개체를 작성합니다. 여기서는 각 json 개체를 나타냅니다.
라우팅 메커니즘
이전: 포함에는 단지 재사용된 페이지인 페이지가 포함되어 있지만 재사용된 페이지도 전체적으로 새로 고쳐집니다.
Angularjs 라우팅을 통해 부분 새로고침이 가능하며, 반복되는 머리와 꼬리가 새로고침 없이 구현될 수 있습니다. 그리고 다중 보기 단일 페이지 효과.
기본 구현: html에서 #(앵커)를 통해 구현됩니다.
공식 예시:
작성: url+#+subpath (가운데 표시)
라우팅 모듈 소개:
<!--引入路由模块-->
<script type="text/javascript" src="../js/angular-route.min.js" ></script>로그인 후 복사
|
ng-view: 라우팅 결과의 내용을 표시하는 데 사용
when: 판단문
template: html의 결과, html 태그 지원
templateUrl: 다른 페이지 로딩 지원
관련 권장 사항:
AngularJS의 모든 버전을 다운로드하세요
AngularJS 학습 요약
Angularjs와 Angle4의 차이점. Angle4를 사용하는 이유
angular 입문 튜토리얼
위 내용은 AngularJS의 기본 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
