나는 Angularjs에 관한 비디오를 보았다. 비디오 컨텐츠는 TODO 목록 (간단한 페이지 응용 프로그램) 형태로 스파를 만드는 방법을 설명합니다. 이해를 향상시키기 위해 기사는 아래에 작성되어 검토 및 통합입니다.
준비하다
Angularjs 다운로드
이를 다운로드라고하지만 실제로 우리 페이지에서 AngularJ를 참조 할 수있는 한. 다음 방법이있을 수 있습니다.
CDN 가속도
국내 CDN 가속 서비스를 사용할 수도 있습니다.
다음과 같이 코드를 복사하십시오. <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
NPM 방법
또한 Nodejs의 패키지 관리 도구를 사용하는 것이 매우 편리합니다. 기본적으로 두 단계로 수행 할 수 있습니다.
먼저 코드를 작성할 폴더를 입력하십시오.
• AngularJS를 설치하십시오 : NPM angular 설치
• 페이지에서 사용하기 위해 소개 :
<!-이 SRC 주소는 자신의 상황에 따라 다릅니다
<script src = "node_modules/angular/angular.js"> </script>
기존의 방법
기존의 방법은 관련 파일을 수동으로 다운로드 한 다음 수동으로 소개하는 것입니다. 여기에는 더 이상 이야기가 없습니다.
부트 스트랩 다운로드
매우 인기 있고 현대적인 프론트 엔드 프레임 워크로서 Bootstrap은 히트작입니다. 주소를 다운로드하십시오
지식 보호 구역
MVC 아키텍처
AngularJS Core는 MVC 아키텍처 및 이벤트 중심 응용 프로그램을 채택합니다. 나는 단지 새로운 것이므로 잘 이해하지 못합니다. 실수가 있으면 블로거가 그것을 지적하기를 바랍니다.
ng-app
전체 단일 페이지의 집사로서 앱은 응용 프로그램과 응용 프로그램의 의미를 의미합니다. 우리의 단일 페이지 서비스는 앱 역할을합니다.
일반적으로 NG-APP은 NG-Controller의 모 컨테이너로 중첩되어야합니다. 그렇지 않으면 예상 결과가 나타나지 않을 수 있습니다
NG-Controller
컨트롤러, 오른손 인 페이지에 적용된 컨트롤러 및 컨트롤러의 존재는 모듈 간의 커플 링을 단순화하여 코드를보다 표준화하고 간단하게 만듭니다.
NG 모델
모델 처리 중에는 일반적으로 페이지 요소와 결합 및 출력하여 새로 고침이없는 페이지 효과를 달성합니다.
이벤트 기준
NG 클릭
단일 페이지 응용 프로그램 에서이 속성을 선언하는 요소는 클릭 이벤트의 기능이 있습니다. 호출되는 함수의 어떤 부분에 대해서는 실제로 요소가 위치한 컨테이너와 관련이 있습니다.
즉, 클릭 이벤트에 해당하는 기능은 특정 기능을 완료하기 위해 관련 컨트롤러에 작성된 코드입니다.
완전한 코드
이 예제의 세부 코드는 아래에 게시되어 있습니다
main.js
(function (window) {// 응용 프로그램 메인 모듈 var todoapp = wind $ scope.text = ''; // 양방향 바운드 데이터 유형은 페이지 디스플레이의 편의를 위해 $ scope.todolist를 수동으로 추가합니다. $ SCOPE.TEXT.TRIM () {텍스트 : 텍스트 : false}); delete it} // Get the number of completed events and implement it according to the selection of checkbox// Since the page is dynamically changed, you need to use functions, or simply use model binding, but that will be a little troublesome $scope.doneCount = function(){ // Use filter to implement var temp = $scope.todolist.filter(function(item){ return item.done;// Return true to indicate that the 현재 데이터는 조건을 충족하고 이벤트가 완료되었습니다});todolist.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> Angularjs bootstrap 구현 작업 목록 </title> <!-bootstrap 소개-> <link href = "http://apps.bdimg.com/libs/boottrap/3.3.0/css/css. rel = "스타일 시트"> <style> .Container {max-width : 720px; } .DONE {색상 : #CCA; } .checkbox {마진 오른쪽 : 12px; 마진 바닥 : 0; } .done> .checkbox> label> span {text-decoration : line-shrough; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <hod> <div ng-app = "todoapp"> <header> <h1> <hr> <</header> <! ng-controller = "maincontroller"> <!-잘 보이는 인터페이스를 달성하기 위해 양식 제어가 사용됩니다-> <form> <input type = "text"ng-model = "text"name = ""> <span> <버튼 ng-click = "add ()"> add </button> </span> <ul Style = "padding : 12px;"> <li; "> <li ng-class = "{ 'done': item.done}"ng-repeat = "todolist의 항목"> <버튼 유형 = "버튼"버튼 "aria-label"aria-label = "close"ng-click = "delete (item)"> <span aria-hidden = "true"> </span> <span> close> <div> <dabel> <input = "wepbox" ng-model = "item.done"> <span> {{item.text}} </span> </label> </div> </li> </ul> <p> <strong> {{todolist.length}} </strong> 작업이 완료되었습니다 </strong> </p> </div> </body> </html>페이지 효과
자세한 코드 설명
코드의 가장 바깥 쪽 코드 계층은 임시 공간으로서 좋은 효과를 가져오고 네임 스페이스 오염을 방지 할 수 있습니다.
(함수 (창) {// 무언가를 할 일}) (창)마지막 (창)은 필수 불가결합니다.
응용 프로그램을 만듭니다
// 응용 프로그램 기본 모듈을 등록합니다
var todoapp = window.angular.module ( 'todoapp', []);
컨트롤러를 만듭니다
todoapp.controller ( 'MainController'// 여기서 $ 스코프는 컨테이너의 역할을 수행하고 변수의 가시 범위를 선언합니다. 수동으로 $ scope.todolist = [{text : 'angularjs', done}, {text : 'bootstrap', done}];기능 기능을 향상시킵니다
// 상호 작용에 응답하기 위해 함수를 추가합니다. $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text : text, done : false}); $ scope.text = ''; }} // 응답 이벤트 $ scope.delete = function (todo) {var index = $ scope.todolist.indexof (todo) $ scope.todolist.splice (index, 1); // 완료된 이벤트의 수를 얻고 선택에 따라 결합하기 때문에, 단순히 사용해야하기 때문에, 또는 단순히 사용해야하기 때문에, 또는 단순히 사용해야합니다. 약간 귀찮은 $ scope.donecount = function () {// 필터를 사용하여 var temp = $ scope.todolist.filter (function (item) {return item.done; // 현재 데이터가 조건을 충족하고 이벤트가 완료되었음을 나타냅니다}); 리턴 온도 길이; }요약
코드와 심오한 생각은 많지 않습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.