목적 : 기존 프로젝트에 angularui 템플릿을 적용하십시오
단계는 다음과 같습니다.
메뉴를 눌러 데모 인터페이스를 수정하십시오
Angularui가 모든 페이지를로드하는 방법에 대해 알아보십시오. 사용자 정의로드 템플릿을 설정하려면이 단락을 Demo/Demo.js에서 찾으십시오.
코드 사본은 다음과 같습니다.
// #이/,/scroll 등이있을 때 <base href = ""> + home.html in Index.html의 페이지를 요청합니다.
app.config (function ($ loureprovider) {
$ loureprovider.when ( '/', {templateUrl : 'home.html', reloadonSearch : false});
$ loureprovider.when ( '/scroll', {templateUrl : 'scroll.html', repoadonSearch : false});
$ loureprovider.when ( '/toggle', {templateUrl : 'toggle.html', repoadonSearch : false});
$ loureprovider.when ( '/tabs', {templateUrl : 'tabs.html', repoadonSearch : false});
$ lourepRovider.when ( '/asticion', {templateUrl : 'Actionion.html', reloadonSearch : false});
$ lourepRovider.when ( '/Orday', {templateUrl : 'Overlay.html', repoadonSearch : false});
$ loureprovider.when ( '/forms', {templateUrl : 'forms.html', repoadonSearch : false});
$ loureprovider.when ( '/dropdown', {templateUrl : 'dropdown.html', repoadonSearch : false});
$ loureprovider.when ( '/drag', {templateUrl : 'drag.html', repoadonSearch : false});
$ loureprovider.when ( '/carousel', {templateUrl : 'carousel.html', reloadonSearch : false});
});
Demo.js의 실행 스크립트를 계속 읽으십시오
드래그 항목이 사라집니다
사진을 전환하려면 드래그 앤 드롭
메인 컨트롤러
l195 $ RootScope. $ on ( '$ llurchangestart', function () {}); 및 L199 $ RootScope. $ on ( '$ llurchangesuccess', function () {}); 이벤트를 바인딩하고 해시 이벤트를 변경하기 위해. $ on ()을 사용하는 법을 배우면 여기에서 코드가 트리거 될 수 있습니다. 비교 후, 나는 두 가지 기본 방법이 동일하다는 것을 알았습니다. 차이점은 lourchangestart가 먼저 트리거되고 LourChangesuccess가 나중에 트리거된다는 것입니다.
스크롤 목록 페이지 : 스크롤 막대는 데이터 $ scope.scrollitems = scrollitems; Scrollitems는 목록의 배열입니다. 하단 이벤트로 스크롤 (풀다운 새로 고침이 필요합니다)
오른쪽 채팅 사이드 바의 JSON 데이터는 온라인인지 아닌지를 보여줍니다. 나에게는 당분간 채팅 기능을 수행 할 수있는 능력이 없습니다.
양식 페이지
원래 부트 스트랩 템플릿을 변경하십시오
1. 위 2 단계에 따르면 페이지의 로딩을 결정하는 두 가지 요소가 있습니다.
코드 사본은 다음과 같습니다.
1 기본 경로 => base_url ()
2 해시 해당 페이지 경로 => 컨트롤러/메소드
3 index.php를 숨 깁니다
/config/config.php $ config [ 'index_page'] = ''; // l29가 비어 있습니다
.htaccess
rewriteEngine on
REWRITECOND $ 1!^(lightApp | lightApp/.php | index/.php | public | robots/.txt) #Lown lightApp | lightApp.php 액세스
rewriterule ^(.*) $ /index.php/$1 [l]
config.yaml
- 다시 작성 : if (! is_file () &&! is_dir ()) goto "index.php?%{query_string}"
# URL이 파일이나 디렉토리가 아닌 경우 index.php?%{query_string}으로 이동하고 CRON 뒤에 배치 할 수 없습니다.
4 demo.js에서 메뉴 경로를 수정하십시오
2. 자원 경로 교체 <? = __ public __?>, 복사 2 JS 및 3 CSS 파일을 복사하십시오.
3. 프로젝트의 JS 및 CSS를 저장하기 위해 새로운 스타일 및 스크립트 디렉토리 만들기
4. 글꼴 디렉토리 글꼴을 공개적으로 복사하십시오
5. HOME.html, sidebar.html 페이지를 뷰 디렉토리에 복사하십시오.
요약 :이 시점에서 프로젝트 템플릿에는 각도가 적용됩니다.