우리는 AngularJS와 부트 스트랩을 사용하여 프론트 엔드 애플리케이션 예제를 개발합니다. 이 간단한 프로젝트 연습을 통해 우리는 모든 사람들을 AngularJS 프론트 엔드 개발의 궁전으로 인도하고 몇 가지 지식 포인트를 소개합니다.
1.MVC 기본 사항은 프로젝트 예를 통해 모든 사람이 MVC 설계 모델의 적용에 대한 예비 이해를 갖도록합니다.
2. 첫 번째 AngularJS 응용 프로그램을 구축하십시오. 실용적인 사용 사례의 개발을 통해 모든 사람은 프론트 엔드 개발에 대한 특정 지각 이해를 얻을 수 있습니다.
3. AngularJS의 세 가지 가장 중요한 구성 요소, 즉 모델,보기 및 컨트롤러에 대한 예비 이해.
4. AngularJS 범위 객체의 사용에 대한 예비 이해.
MVC 모드에 대한 기본 소개 :
MVC는 UI 아키텍처 모델입니다. 그 목적은 응용 프로그램의 기능을 특수 모듈로 분해하고 모듈의 재사용 가능성을 실현하고 모듈 간의 커플 링을 줄이며 시스템의 견고성을 향상시키는 것입니다. MVC 모드는 주로 세 부분으로 나뉩니다.
모델 : 시스템 데이터를 저장하는 데 사용됩니다
보기 : 시스템의 UI 인터페이스를 구현하는 데 사용됩니다
컨트롤러 : 모델과보기를 연결하는 데 사용됩니다.
제 생각에는 배우는 가장 좋은 방법은 연습입니다. 프론트 엔드 애플리케이션 예제를 개발할 것입니다. 이 예를 통해 한편으로는 AngularJS 프레임 워크에 대한 이해를 심화시킬 수 있으며 동시에 MVC 모델이 개발 프로세스에 어떻게 포함되어 있는지 느낄 수도 있습니다.
응용 프로그램 소개 (코드 경로 : http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(Vevb.com).rar)
인터페이스와 함께 다음과 같이 숫자를 추측하는 웹 응용 프로그램을 만들 것입니다.
응용 프로그램 배경은 1에서 1000 범위의 범위를 가진 임의의 숫자를 무작위로 생성합니다. 사용자는 텍스트 상자에 묻는 숫자를 입력합니다. 입력이 올바른 경우 애플리케이션이 아래에 녹색 프롬프트가 나타납니다. 예를 들어 잘못된 경우 입력 번호가 배경에서 생성 된 숫자보다 크거나 작 으면 응용 프로그램이 해당 프롬프트가 나타납니다.
맨 아래에 표시된 숫자는 우리가 추측 한 횟수를 나타냅니다.
전체 응용 프로그램의 코드 디렉토리 구조는 다음과 같습니다.
현재 간단한 응용 프로그램 예제 작업을 수행하고 있으므로 각 모듈의 코드를 구성합니다. 앞으로 대규모 프론트 엔드 애플리케이션을 구축 할 때 전체 프로젝트의 코드 디렉토리 구조를 정리하는 데 매우주의를 기울일 것입니다.
위 그림에 표시된 파일 구성에서 Angular.js는 응용 프로그램을 개발하기 위해 의존하는 프레임 워크 파일입니다. bootstrap.min.css는 UI 인터페이스를 설계하는 데 사용되는 인터페이스 라이브러리 파일이며 NumberGuessing.html은 개발하려는 기본 응용 프로그램 파일입니다. 다음으로 NumberGuessing.html에 단계적으로 코드를 추가하고 응용 프로그램의 기능을 점차적으로 증가시킵니다.
우선, 우리가해야 할 일은 간단한 HTML 템플릿을 구축하는 것입니다. 이 템플릿에서는 기능을 천천히 추가 할 수 있습니다. 템플릿 코드는 다음과 같습니다.
<! docType html> <html> <head> <메타 http-equiv = "content-type"content = "text/html; charset = utf-8"> <title> 숫자를 추측! </title> <link href = "bootstrap.min.css"rel = "scrip> </head> </head> </head> src = "angular.js"> </script> </body> </html>
위의 템플릿 코드에는 "meta ... charset ="utf = 8 "라인이 있습니다.
이 라인의 목적은 브라우저가 중국어를 올바르게 표시 할 수 있도록하는 것입니다. 이 라인을 사용할 수 없으면 브라우저에 중국어가 표시됩니다. 템플릿에서 먼저 나중에 사용할 프레임 워크 코드 및 UI 인터페이스 라이브러리 코드를 소개합니다. 완료되면 브라우저에로드하여 오류가 있는지 확인합니다. 그것이 맞다면, 우리가 현재보고있는 것은 공란입니다.
다음으로 응용 프로그램의 배경 논리 코드를 개발하고 먼저 사용할 몇 가지 변수를 결정합니다.
OriginalVal, 생성 된 랜덤 숫자를 저장하는 데 사용됩니다
Userguess, 현재 사용자가 입력 한 추측 번호를 저장하십시오.
numoftries, 사용자가 시도한 횟수를 기록하십시오
편차 : 사용자가 입력 한 숫자와 배경 임의 숫자의 차이를 기록하십시오. 사용자가 입력 한 숫자가 크면 정의> 0; 입력은 작고 정의 <0; 입력이 올바른 경우 정의 == 0
컨트롤러 모듈의 구현
컨트롤러는 모델과 뷰의 두 모듈을 연결하는 데 사용되며 시스템의 비즈니스 로직은 컨트롤러에서도 구현됩니다. 사용자가 버튼을 클릭하고 컨텐츠를 입력하는 등의 인터페이스에서 일부 작업을 수행하면 컨트롤러는 뷰 측에서 해당 정보를 수신 한 다음 컨트롤러가 해당 이벤트 처리 로직을 트리거합니다. 예를 들어, 사용자가 인터페이스에 숫자를 입력하고 OK 버튼을 클릭하면 컨트롤러가 뷰에서 입력 값을 가져온 다음 모델에서 응용 프로그램에 의해 생성 된 임의 숫자를 가져 와서 두 해치백과 비교하고 비교 결과를 뷰로 리턴합니다. 뷰는 반환 된 편차 값에 따라 해당 인터페이스 변경을 표시합니다. 컨트롤러의 논리 본문이 어떻게 구현되는지 봅시다.
function thethenumberController ($ scope) {$ scope.Verifyguess = function () {$ scope.deviation = $ scope.originalVal - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function () {$ scope.numoftries = 0; $ SCOPE.ORIGINALVAL = MATH.FLOOR ((Math.Random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); }guessThenumberController 함수는 모델 객체의 숫자 속성을 설정합니다. 이 값의 의미는 앞에서 언급되었습니다. 동시에이 컨트롤러 기능은 두 개의 인터페이스 호출을 도출합니다. 하나는 verifyguess입니다. 인터페이스의 확인 버튼이 클릭되면보기 모듈은 인터페이스를 호출하여 사용자가 입력 한 데이터가 올바른지 여부를 결정합니다. 동시에, 호출은 두 속성, 편차 및 numoftries의 값을 업데이트합니다.
InitializeGame은 전체 시스템 응용 프로그램을 초기화하고 먼저 임의 숫자를 생성 한 다음 일부 변수를 비어 놓는 데 사용됩니다.
컨트롤러 본문 함수에서 매개 변수 $ 스코프가 전달됩니다.이 매개 변수는 AngularJS에 의해 우리에게 전달됩니다. 기본적으로 모델 인 MVC 모드에서 M과 동일합니다. 응용 프로그램 데이터 및 논리 코드를 저장하는 데 특별히 사용되는 데이터베이스와 유사합니다. 보시다시피, 초기화 게임 호출에서 컨트롤러는 NumOfTries, OriginalVal 및 기타 데이터를 $ SCOPE 객체에 넣습니다. VerifyGuess 호출에서 그는 계산 및 수정을 위해 $ 범위에서 이러한 데이터를 얻습니다.
위의 컨트롤러 코드가 템플릿 파일 번호 Guessing.html에 추가되면 결과는 다음과 같습니다.
<! docType html> <html> <head> <메타 http-equiv = "content-type"content = "text/html; charset = utf-8"> <title> 숫자를 추측! </title> <link href = "bootstrap.min.css"rel = "scrip> </head> </head> </head> src = "angular.js"> </script> <script type = "text/javaScript"> function guestenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalVal -$ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializegame = function () {$ scope.numoftries = 0; $ SCOPE.ORIGINALVAL = MATH.FLOOR ((Math.Random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); } </script> </body> </html>앱보기 응용 프로그램 인터페이스 디자인
즉, MVC에서보기는 실제로 그래픽 인터페이스를 통해 모델의 데이터를 표시하는 것입니다. 우리의 현재 응용 프로그램은 간단하고 단순성의 원칙을 기반으로 인터페이스 디자인의 사용자 경험이 그리 좋지 않을 수도 있지만 AngularJS와 부트 스트랩을 사용하여 프로그램의 프론트 엔드 인터페이스를 신속하게 구축하는 방법을 빠르게 이해하는 것으로 충분합니다.
인터페이스 구성을 살펴보고 컨트롤러 및 인터페이스 로직을 통합하겠습니다.
<body ng-app = "app"> <div ng-controller = "guestenumbercontroller"> <h2> 숫자를 추측하십시오! </h2> <p> 컴퓨터에서 생성 된 랜덤 숫자는 1에서 1000까지 범위를 추측하십시오. ng-click = "verifyguess ()"> 확인 </button> <button ng-click = "initializegame ()"> return </button </button> <p> <p ng-show = "편차 <0"> Mr. </p> <p ng-show = "deviation> 0"> 내 남자, 당신이 더 적은 점이 있다면, 더 많은 점을 추가하고, 더 많은 점을 추가하고, 더 많은 점을 추가하십시오.
C의 C, 즉 컨트롤러는 인터페이스 (보기)와 데이터 (모델) 사이의 브리지입니다. 이 세 가지를 연관시키기 위해서는 세 가지를 모두 AngularJS 프레임 워크에 포함시킨 다음 AngularJS 프레임 워크 메커니즘에 의존하여 세 가지 사이의 상호 연결을 달성해야합니다.
AngularJS에보기를 포함시키기 위해 위의 코드 문은 다음과 같습니다.
<body ng-app = "app">
NG-APP이 속성은 BODY 태그의 HTML 코드가 AngulaJS 프레임 워크에 뷰 부분으로 내장 될 것이며 "APP"는 AngularJS 프레임 워크에 "APP"라는 모듈을로드하기 위해 NG-APP 속성 값으로 사용될 것이라고 Angular에게 알려줍니다. 이 모듈은 스토리지 창고와 같습니다. 우리는 프론트 엔드 애플리케이션의 다양한 기능을 다양한 단위로 분류합니다. 이 장치는 App이라는 모듈에 저장됩니다. 컨트롤러와 모델도 기능 단위입니다. 나중에 우리는 그것들이 App이라는 모듈에 추가 될 것임을 알게 될 것입니다. AngularJS 프레임 워크는 사용하기 위해이 모듈에서 ControlLerre의 두 단위와 모델을 꺼낼 것입니다.
다음으로, 우리는 먼저이 모듈을 AngularJS 프레임 워크에 넣습니다. 코드는 다음과 같습니다.
<script type = "text/javaScript"> Angular.Module ( 'app', []) 함수 guestenumberController ($ scope) {....} <cript>이러한 방식으로 AngularJS 프레임 워크에 App이라는 모듈이 있으며 NG-App = "App"를 통해 모듈을 인터페이스와 연결합니다. 다음으로 컨트롤러 장치를 앱 모듈에 넣어야합니다. 코드는 다음과 같습니다.
<script type = "text/javaScript"> Angular.Module ( 'app', []) .Controller ( 'guestTheNumberController', guestEnumberController); function thethenumberController ($ scope) {....} </script>Angular.Module 함수는 모듈 객체를 생성하고 반환합니다. 이 객체에는 컨트롤러라는 인터페이스가 포함되어 있습니다. 이 인터페이스를 통해 개발 한 컨트롤러 기능 장치를 모듈에 배치 할 수 있습니다. 위의 코드에서 컨트롤러 장치를 모듈에 넣는 것을 알 수 있습니다. 이 장치의 이름은 컨트롤러 함수의 첫 번째 입력 매개 변수입니다. 두 번째 입력 매개 변수는 컨트롤러 유닛의 기능적 로직 바디이며, 이는 이전에 개발 한 wesomenumberController 함수입니다.
위의 단계를 완료하면 응용 프로그램이 개발되었습니다. 현재 HTML을 브라우저에서로드 할 수 있으므로 특정 효과를 볼 수 있습니다.
끝나기 전에 AngularJS가 다양한 모듈을 통합하여 완전한 프론트 엔드 애플리케이션을 형성하는 방법을 살펴 보겠습니다. 코드에는 {{}}와 같은 특수 기호와 특수 기호가 있습니다. {{}} 및 다음과 같은 특수 속성이 있습니다. Angular 변환 변수는 {{and}}에 샌드위치 된 변수를 다음 코드 스 니펫과 같은 변수에 해당하는 값으로 변환합니다.
<p> 당신이 추측 한 횟수는 다음과 같습니다. <span> {{numoftries}} </span> <p>
Numoftries는 사용자가 추측하려고 시도한 횟수를 의미합니다. NumoFTries의 값이 0이면 AngularJS는 위의 코드를 피합니다.
<p> 당신이 추측 한 횟수는 다음과 같습니다. <span> 0 </span> <p>
브라우저는 인터페이스를 다음 상황으로 렌더링합니다.
AngularJS 지침은 복잡한 기술 지식 지점입니다. 후속 토론에서 우리는 그것을 자세히 논의 할 것입니다. 여기서 우리는 주로 HTML의 구문 함수를 확장하는 AngularJS 지침의 역할을 간단히 소개합니다. 지시문은 AngularJS 프레임 워크에서 가장 강력한 부분입니다. 코드에 사용 된 AngularJS 지침을 간단히 소개하겠습니다.
NG-Controller :이 지침은 컨트롤러와 HTML로 표시되는보기를 연결합니다. 이 지침만으로도 View는 컨트롤러가 설정 한 변수 및 인터페이스에 액세스 할 수 있습니다. 코드에 넣을 수 있습니다.
ng-model = ng-controller = "guessthenumbercontroller"
이 문장을 제거하고 결과가 무엇인지 확인하십시오.
ng-model : 예를 들어, 제어가있는 모델의 양방향 바인드 변수 : 예를 들어.
<입력 유형 = "number"ng-model = "userguess"/>
이 명령문은 모델의 변수 Userguess를 인터페이스의 입력 텍스트 상자에 바인딩합니다. 텍스트 상자의 값이 변경되면 해당 Userguess의 해당 값도 변경됩니다. 반대로, 추측의 가치가 백그라운드에서 변경되면 텍스트 상자의 내용도 그에 따라 변경됩니다.
NG-CLICK : 인터페이스에서 생성 된 클릭 이벤트를 컨트롤러의 처리 로직과 연결합니다.
<button ng-click = "verifyguess ()"> 확인 </button>
위의 코드는 "OK"버튼 클릭 이벤트를 컨트롤러의 VerifyGuess () 함수와 연결합니다. 버튼을 클릭하면 함수가 실행됩니다.
NG-SHOW : 컨트롤이 표시 될 뷰를 제어하는 데 사용되는지 여부를 제어하는 데 사용됩니다. NG-SHOW의 해당 표현식의 값이 참이면, 제어가 표시됩니다. 거짓 인 경우 컨트롤이 표시되지 않습니다. 예를 들어:
<p ng-show = "편차 <0"> Mr., 입찰이 너무 높습니다! </p>
위 코드의 기능은 변수 정의의 값이 0보다 작을 때 단락 요소 P의 내용이 인터페이스에 표시된다는 것입니다.
AngularJS는 강력하지만 비교적 복잡한 프론트 엔드 개발 프레임 워크입니다. 이 예제의 역할은 모든 사람이 AngularJS의 강력한 기능을 이해하고 먼저 특정 지각 적 이해를 얻도록 돕기 위해 앞으로도 전체 AngularJS 프론트 엔드 개발 기술을 합리적으로 분석하고 마스터 할 수있는 확실한 기초를 세우기 위해 먼저 지각적인 이해를 얻는 것입니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.