지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

AngularJS 기본_AngularJS

WBOY
풀어 주다： 2016-05-16 16:25:23
원래의
983명이 탐색했습니다.

angularJS 정의 및 기능

1.google 프런트엔드 오픈소스 프레임워크

2. MVVM(모델 뷰 뷰-모델) 디자인 패턴: 모델은 $scope 객체를 통해 ViewModel과 상호 작용하고 모델의 변경 사항을 모니터링합니다. HTML을 사용하여 코드를 표시하여 보기를 통해 전송하고 렌더링할 수 있습니다

3. 편리한 REST

4. 데이터 바인딩 및 종속성 주입

5. AngularJS는 자체 컴파일러와 지시어를 통해 관련 설정을 완료하는 것처럼 HTML을 작동할 수 있습니다

6. 템플릿은 DOM 요소로 Angular 컴파일러에 전달됩니다.

7.AngularJS는 지시어를 통해 HTML을 확장하고 표현식을 통해 데이터를 HTML에 바인딩합니다.

AngularJS 애플리케이션 빌드

Angular의 <script> 태그를 <head> 태그에 추가하세요. </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="63312" class="copybut" id="copybut63312" onclick="doCopy('code63312')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code63312"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

태그에 ng-app 지시어 추가

코드 복사 코드는 다음과 같습니다.
<본문
ng-app="guetonline"
ng-controller="메인컨트롤러"
>

새 디렉토리 스크립트와 app.js 파일을 생성하고 app.js의 모든 모듈과 종속성을 정의 및 구성합니다

코드 복사 코드는 다음과 같습니다.
var app = angle.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);

모듈 앱에서 컨트롤러, 서비스 및 지침 정의

코드 복사 코드는 다음과 같습니다.
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //컨트롤러
app.service( 'MainSevicel', function() {} ) //서비스
app.directive( 'dragToDismiss', function() {} ) //지시문

모듈 앱에서 경로 정의

코드 복사 코드는 다음과 같습니다.
app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'index/home', reloadOnSearch: false});
$routeProvider.when('/scroll', {templateUrl: 'scroll.html', reloadOnSearch: false})
$routeProvider.when('/toggle', {templateUrl: 'toggle.html', reloadOnSearch: false})
$routeProvider.when('/tabs', {templateUrl: 'tabs.html', reloadOnSearch: false})
$routeProvider.when('/accordion', {templateUrl: 'accordion.html', reloadOnSearch: false})
$routeProvider.when('/overlay', {templateUrl: 'overlay.html', reloadOnSearch: false})
$routeProvider.when('/forms', {templateUrl: 'forms.html', reloadOnSearch: false});
$routeProvider.when('/dropdown', {templateUrl: 'dropdown.html', reloadOnSearch: false});
$routeProvider.when('/drag', {templateUrl: 'drag.html', reloadOnSearch: false});
$routeProvider.when('/carousel', {templateUrl: 'carousel.html', reloadOnSearch: false});
$routeProvider.when('/news/official_view', {templateUrl: '/news/official_view', reloadOnSearch: false});
});

계속됩니다. . 다음 단계는 4.5단계와 필터에 대해 자세히 알아보는 것입니다

관련 라벨：
angularjs
원천：php.cn
이전 기사：자바스크립트 문자열 조작의 기본 방법_기본 지식 다음 기사：javascript에서 for loop를 사용하여 일괄적으로 등록한 이벤트가 index value_javascript 스킬을 제대로 획득하지 못하는 문제 해결
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1914
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2088
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1756
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1656
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1666
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿