Angularjs와 관련된 자세한 예시 공유
- 零下一度원래의
- 2017-07-03 14:14:551105검색
이번 주말에 이틀 동안 집에 있었기 때문에 점심 시간에도 Angularjs 관련 내용을 계속 공유했습니다. 오늘은 주로 Angularjs에 대한 일반적인 소개와 데이터 바인딩 부분을 직접 공유하겠습니다.
angualrjs1.x: 현재 비교적 안정적인 버전입니다.
angularjs2.x: typescript를 기반으로 작성되었으며 1.x를 기반으로 많이 변경되었으며 모바일 개발에 편향되어 있으며 ES6 표준으로 작성되었습니다.
angularjs4.x 최신 버전
현재 버전 2.x는 1.x를 기반으로 하지 않음 업그레이드는 기본적으로 파괴적입니다. 2.x는 기본적으로 1.x 버전을 재구성하기 시작하고 이 점에서 Vue와 유사합니다. 그리고 반응.
3. 핵심 기능
MVC(또는 MVVM) 디자인 철학:
많은 사람들은 Angularjs가 프런트엔드 MVC 프레임워크라고 생각할 것입니다. 내부에는 MVVM의 그림자가 있다고 합니다. MVVM은 MVC를 기반으로 업그레이드되었기 때문에 양방향 데이터 바인딩 기능을 추가했지만 이는 단지 제 개인적인 의견이므로 정정해 주시기 바랍니다.
양방향 데이터 바인딩:
양방향 데이터 바인딩은 AngularJs에서 제안된 것이 아니지만 오랫동안 사용되어 왔던 Microsoft의 WPF는 MVVM 아이디어를 사용하며 프런트엔드 프레임워크인 Knockoutjs에는 2-방향 데이터 바인딩이라는 개념이 있습니다. 방법 데이터 바인딩.
모듈화 및 종속성 주입
모듈화 및 종속성 주입은 AngularJ의 핵심 콘텐츠이자 Angular의 하이라이트입니다.
명령 시스템
명령 시스템도 Angular의 핵심입니다. 명령 시스템은 내장 명령과 사용자 정의 명령으로 나뉘는데, 그중에서도 사용자 정의 명령이 매우 강력하고 많은 강력한 기능을 수행할 수 있다고 생각합니다. 자세한 내용은 명령어 설명 시 자세히 설명하겠습니다.
4. 전문 분야
1) 단일 페이지 애플리케이션(SPA)
2) CRUD 프로그램
일부 정원사는 단일 페이지 애플리케이션을 잘 이해하지 못할 수도 있습니다. 다음은 간단한 예입니다. 예를 들어 Iframe 프레임워크를 통한 기존 다중 페이지 애플리케이션 MPA는 다중 페이지 애플리케이션의 단점은 여러 페이지가 여러 번 로드되고 단일 페이지 애플리케이션이 Html 세그먼트를 통해 로드되거나 전환된다는 것입니다. 여기서는 MPA와 SPA에 대해 너무 많이 소개하지 않겠습니다. Baidu를 통해 이해할 수 있습니다.
AngularJs는 CRUD 애플리케이션 시스템에 적합하지만 페이지 상호 작용이 잦거나 그래픽 페이지가 있는 애플리케이션에는 적합하지 않으며 게임 시스템은 이 프레임워크에 적합하지 않습니다.
5. AngularJs 애플리케이션 구성
모든 ng 애플리케이션은 컨트롤러, 서비스, 지침, 경로, 필터 등과 같은 모듈 유형으로 구성됩니다. 관계를 표현하기 위해 다이어그램을 사용하겠습니다.
6. 모듈
AngularJS에서 모듈은 컨트롤러, 구성, 서비스, 팩토리, 지시문, 상수 등 여러 측면을 포함하는 핵심 존재입니다.
모듈 생성 방법:
angular.module('myApp',[]);
모듈 사용 방법:
필요한 곳에 ng-app 추가(특정 HTML 태그에)
모듈 사용의 이점:
1) 전역 네임스페이스의 청결성을 유지합니다.
2) 테스트 코드 작성이 더 쉽습니다.
3) 서로 다른 애플리케이션 간에 코드를 쉽게 재사용할 수 있습니다.
4) 사람들이 이해하기 쉽도록 선언을 사용하세요.
7. 애플리케이션에서 AngularJ 사용
1) 애플리케이션에서 Angular를 사용하는 경우 먼저 페이지에서 각도 프레임워크의 js 라이브러리 코드를 참조하세요.
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--引用AngularJs库 -->
<script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js?1.1.11"></script>
</head>2) Angular를 적용한 html 요소에 ng-app 모듈을 추가합니다. 컨트롤러를 추가해야 하는 경우 ng-controller를 추가합니다. 이는 반드시 body 요소에 있는 것은 아니며 모든 요소에 있을 수 있습니다. 이는 Angular 애플리케이션 경계의 사용을 나타냅니다.
<body ng-app="myapp" ng-controller="myCtrl">
<!-- 1、表达式绑定 -->
<h1>{{expression}}</h1>
<!-- 2、指令绑定-->
<h2>{{ngmodel}}</h2>
<input type="text" ng-model="ngmodel">
<!-- 3、ng-bind绑定-->
<h3 ng-bind="ngbind"></h3>
<h3 class="ng-bind:ngbind"></h3>
<!-- 4、ng-bind-html绑定-->
<h4 ng-bind-html="htmlbind"></h4>
<!-- 5、ng-bind-template -->
<h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>3. js 코드를 추가하고 모듈과 컨트롤러를 정의
<script>
//模块定义
// 第一个参数：应用名称，第二个参数：应用依赖模块
var app = angular.module('myapp', ['ngSanitize']);
// 控制器定义
// 第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
app.controller('myCtrl', function($scope) {
$scope.expression = "hello expression";
$scope.ngbind = "hello ng-bind";
$scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
$scope.subCtrl = "hello subCtrl";
});
</script>위의 코드 조각에서 모듈과 컨트롤러 메서드를 정의하는 방법을 확인할 수 있으며, 각 매개변수의 의미를 살펴보실 수 있습니다.
소스 코드는 해당 시점에 GitHub의 모든 사람과 공유되며 누구나 다운로드할 수 있습니다.
오늘은 최대한 많은 내용을 공유하겠습니다. 다음에는 데이터 바인딩 및 컨트롤러 관련 내용을 공유해 드리겠습니다. 지원해 주신 모든 분들께 감사드리며, 잘못된 점이 있으면 지적해 주시기 바랍니다.
위 내용은 Angularjs와 관련된 자세한 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!