Angularjs와 관련된 자세한 예시 공유
이번 주말에 이틀 동안 집에 있었기 때문에 점심 시간에도 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 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)
뜨거운 주제
7530
15
1378
52
82
11
54
19
21
76
wapi가 무엇인지에 대한 자세한 소개
Jan 07, 2024 pm 09:14 PM
사용자들은 인터넷을 사용하면서 와피(wapi)라는 용어를 접했을 수도 있지만, 와피가 무엇인지 모르는 사람들도 있을 것입니다. 다음은 모르는 사람들의 이해를 돕기 위해 자세히 소개한 것입니다. wapi란 무엇입니까? 답변: wapi는 무선 LAN 인증 및 기밀 유지를 위한 인프라입니다. 이는 일반적으로 사무실 건물과 같은 장소 근처에서 보호되는 적외선 및 블루투스와 같은 기능과 같습니다. 기본적으로 소규모 부서가 소유하므로 이 기능의 범위는 불과 몇 킬로미터에 불과합니다. wapi 관련 소개: 1. Wapi는 무선 LAN의 전송 프로토콜입니다. 2. 이 기술은 협대역 통신의 문제를 방지하고 더 나은 통신을 가능하게 합니다. 3. 신호를 전송하는 데는 하나의 코드만 필요합니다.
win11이 PUBG 게임을 실행할 수 있는지에 대한 자세한 설명
Jan 06, 2024 pm 07:17 PM
PlayerUnknown's Battlegrounds라고도 알려진 Pubg는 2016년 인기를 얻은 이후 많은 플레이어를 끌어모은 매우 고전적인 슈팅 배틀 로얄 게임입니다. 최근 win11 시스템이 출시된 후 많은 플레이어들이 win11에서 플레이하고 싶어합니다. win11이 pubg를 플레이할 수 있는지 편집기를 따라가 보겠습니다. win11이 pubg를 플레이할 수 있나요? 답변: Win11은 pubg를 플레이할 수 있습니다. 1. win11 초기에는 win11에서 tpm을 활성화해야 했기 때문에 많은 플레이어가 pubg에서 금지되었습니다. 2. 하지만 플레이어 여러분의 피드백을 바탕으로 블루홀에서는 이 문제를 해결하였고, 이제 win11에서도 정상적으로 pubg 플레이가 가능해졌습니다. 3. 술집을 만난다면
i5 프로세서에 win11을 설치할 수 있는지 여부에 대한 자세한 소개
Dec 27, 2023 pm 05:03 PM
i5는 인텔이 보유한 프로세서 시리즈로, 11세대 i5의 다양한 버전이 있으며, 세대마다 성능이 다릅니다. 따라서 i5 프로세서가 win11을 설치할 수 있는지 여부는 어떤 세대의 프로세서인지에 따라 별도로 알아보겠습니다. i5 프로세서를 win11과 함께 설치할 수 있습니까? 답: i5 프로세서는 win11과 함께 설치할 수 있습니다. 1. 8세대 및 후속 i51, 8세대 및 후속 i5 프로세서는 Microsoft의 최소 구성 요구 사항을 충족할 수 있습니다. 2. 따라서 Microsoft 웹 사이트에 들어가서 "Win11 설치 도우미"만 다운로드하면 됩니다. 3. 다운로드가 완료된 후 설치 도우미를 실행하고 프롬프트에 따라 Win11을 설치합니다. 2. i51 8세대 이전과 8세대 이후
최신 Win 11 사운드 튜닝 방법 소개
Jan 08, 2024 pm 06:41 PM
최신 win11로 업데이트한 후 많은 사용자가 시스템 사운드가 약간 변경되었지만 이를 조정하는 방법을 알지 못합니다. 따라서 오늘 이 사이트에서는 컴퓨터의 최신 win11 사운드 조정 방법을 소개합니다. 작동 방법도 어렵지 않습니다. 선택 사항도 다양합니다. 와서 다운로드하여 사용해 보세요. 최신 컴퓨터 시스템 Windows 11의 사운드 조정 방법 1. 먼저 바탕 화면 오른쪽 하단의 사운드 아이콘을 마우스 오른쪽 버튼으로 클릭하고 "재생 설정"을 선택합니다. 2. 그런 다음 설정을 입력하고 재생 표시줄에서 "스피커"를 클릭합니다. 3. 그런 다음 오른쪽 하단의 "속성"을 클릭하십시오. 4. 속성에서 "향상" 옵션 표시줄을 클릭하세요. 5. 이때 '모든 음향효과 비활성화' 앞의 √가 체크되어 있으면 취소해 주세요. 6. 그 후 아래에서 설정할 음향 효과를 선택하고 클릭하세요.
PyCharm 초보자 가이드: 대체 함수에 대한 종합 분석
Feb 25, 2024 am 11:15 AM
PyCharm은 개발 효율성을 크게 향상시킬 수 있는 풍부한 기능과 도구를 갖춘 강력한 Python 통합 개발 환경입니다. 그 중 교체 기능은 개발 과정에서 자주 사용되는 기능 중 하나로, 개발자가 코드를 빠르게 수정하고 코드 품질을 향상시키는 데 도움을 줄 수 있습니다. 이 기사에서는 초보자가 이 기능을 더 잘 익히고 사용할 수 있도록 특정 코드 예제와 함께 PyCharm의 대체 기능을 자세히 소개합니다. 대체 기능 소개 PyCharm의 대체 기능은 개발자가 코드에서 지정된 텍스트를 빠르게 대체하는 데 도움이 될 수 있습니다.
컴퓨터의 프린터 드라이버 위치에 대한 자세한 정보
Jan 08, 2024 pm 03:29 PM
많은 사용자가 컴퓨터에 프린터 드라이버를 설치했지만 이를 찾는 방법을 모릅니다. 그래서 오늘은 컴퓨터에서 프린터 드라이버의 위치에 대해 자세히 소개하겠습니다. 아직 모르시는 분들을 위해 원래 의미를 바꾸지 않고 내용을 다시 작성할 때 프린터 드라이버를 찾을 수 있는 위치를 살펴보겠습니다. 언어를 중국어로 다시 작성해야 하며 원래 문장이 표시될 필요는 없습니다. 먼저 타사 소프트웨어를 사용하여 검색하는 것이 좋습니다. 2. 오른쪽 상단에서 "도구 상자"를 찾습니다. 아래의 "장치 관리자"를 클릭하세요. 다시 쓴 문장: 3. 하단의 "장치 관리자"를 찾아 클릭합니다. 4. 그런 다음 "인쇄 대기열"을 열고 프린터 장치를 찾습니다. 이번에는 프린터 이름과 모델입니다. 5. 프린터 장치를 마우스 오른쪽 버튼으로 클릭하면 업데이트하거나 제거할 수 있습니다.
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
도지코인이란 무엇인가요?
Apr 01, 2024 pm 04:46 PM
Dogecoin은 고정된 공급 한도가 없고, 빠른 거래 시간, 낮은 거래 수수료, 대규모 밈 커뮤니티가 있는 인터넷 밈을 기반으로 만들어진 암호화폐입니다. 용도로는 소액 거래, 팁, 자선 기부 등이 있습니다. 그러나 무제한 공급, 시장 변동성, 조크 코인으로서의 지위 역시 위험과 우려를 불러일으킵니다. 도지코인이란 무엇입니까? Dogecoin은 인터넷 밈과 농담을 기반으로 만들어진 암호화폐입니다. 기원과 역사: Dogecoin은 2013년 12월 두 명의 소프트웨어 엔지니어 Billy Markus와 Jackson Palmer에 의해 만들어졌습니다. 당시 인기 있었던 "Doge" 밈에서 영감을 받아, 영어가 서툰 시바견이 등장하는 코믹한 사진입니다. 특징 및 이점: 무제한 공급: 비트코인과 같은 다른 암호화폐와는 달리
