웹앱 프레임워크 AngularUI_AngularJS의 데모 변환을 위한 길

목적: 기존 프로젝트에 AngularUI 템플릿 적용

단계는 다음과 같습니다.

데모 인터페이스를 수정하려면 메뉴를 클릭하세요

angularUI가 모든 페이지를 로드하는 방법을 알아보세요. 사용자 정의 로딩 템플릿을 설정하려면 데모/demo.js에서 이 단락을 찾으세요

코드 복사 코드는 다음과 같습니다.

//#이 /, /scroll 등인 경우 index.html에서 app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', 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});
});

demo.js 실행 스크립트를 계속 읽어보세요

드래그 항목이 사라집니다

드래그 앤 드롭으로 사진을 전환하세요
메인 컨트롤러

L195 $rootScope.$on('$routeChangeStart', function(){}) 및 L199 $rootScope.$on('$routeChangeSuccess', function(){}); 바인딩 이벤트와 해시 이벤트 변경은 여기에서 코드를 트리거할 수 있으며, 비교 후 두 가지 기본 방법이 동일하다는 것을 알았습니다. 차이점은 RouteChangeStart가 먼저 트리거된 다음, RouteChangeSuccess가 트리거된다는 것입니다.

​​​​​ 스크롤 목록 페이지: 스크롤 막대가 데이터를 로드합니다. $scope.scrollItems = scrollItems는 목록 배열입니다(풀다운 새로 고침 필요). 오른쪽 채팅 사이드바의 json 데이터는 온라인 상태인지 아닌지를 보여줍니다. 저는 당분간 채팅 기능을 사용할 수 없습니다.
양식 페이지

원본 부트스트랩 템플릿 변경

1. 위의 2단계에서 페이지 로딩은 두 가지 요소에 의해 결정된다는 것을 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

1개의 기본 경로 => base_url()

2 해시에 해당하는 페이지 경로 => 컨트롤러/메서드
3 index.php 숨기기
/config/config.php $config['index_page'] = ''; //L29가 비어 있음
.htaccess

의 RewriteEngine RewriteCond $1 !^(lightapp|lightapp.php|index.php|public|robots.txt) #lightapp|lightapp.php에 액세스하도록 허용
RewriteRule ^(.*)$ /index.php/$1 [L]
구성.yaml
- 다시 작성: if( !is_file() && !is_dir()) goto "index.php?%{QUERY_STRING}"
# URL이 파일도 디렉토리도 아닌 경우 index.php?%{QUERY_STRING}으로 점프하고 cron 뒤에 위치할 수 없습니다
4 Demo.js에서 메뉴 라우팅 수정


2. 리소스 경로 를 교체하고 js 파일 2개와 css 파일 3개를 복사합니다

3. 프로젝트의 js 및 css를 저장할 새 스타일 및 스크립트 디렉터리를 만듭니다

4. 글꼴 디렉토리 글꼴을 공개로 복사합니다

5. home.html 및 sidebar.html 페이지를 보기 디렉토리에 복사합니다

요약: 이 시점에서 프로젝트 템플릿에는 angleUI가 적용되었습니다.