Angularuiダウンロードアドレス:https://github.com/clouda-team/blendui
ダウンロードと減圧後、デモはルートディレクトリにあります
公式ウェブサイトでデモの使用をテストしました
ブラウザを使用してMobile-Angular-UI-Master/demo/index.htmlを開き、読み込みスタイルやJSがないことを確認します。次に、要素を確認した後、ローディングパスが間違っていることがわかりましたので、次の変更を加えました
5行目:<ベースhref = "/mobile-angular-ui-master/"/>
すべて/サイトルートディレクトリパスを削除し、相対パスに変更します
demo.jsおよびdemo.cssはdemo directory <script src = "demo/demo.js"> </script>、<link rel = "styleSheet" href = "demo/demo.css"/>にあります。
行30,34:<div ng-include = "'demo/sidebar.html'"、<div ng-include = "'demo/sidebarright.html'"
変更されたindex.html
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<Meta charset = "utf-8" />
<base href = "/mobile-angular-ui-master/"/>
<Title>モバイルAngular UI Demo </title>
<meta http-equiv = "x-ua-compatible" content = "ie = edge、chrome = 1" />
<Meta name = "Apple-Mobile-Web-App-capable" content = "yes" />
<Meta name = "Viewport" content = "user-scalable = no、initial-scale = 1.0、maximing-scale = 1.0、minimut-ui" />
<Meta name = "Apple-Mobile-Web-App-Status-Bar-Style" content = "yes" />
<link rel = "ショートカットアイコン" href = "favicon.png" type = "image /x-icon" />
<link rel = "styleSheet" href = "dist/css/mobile- angular-ui-hover.css"/>
<link rel = "styleSheet" href = "dist/css/mobile- angular-ui-base.css"/>
<link rel = "styleSheet" href = "dist/css/mobile- angular-ui-desktop.css"/>
<link rel = "styleSheet" href = "demo /demo.css" />
<スクリプトsrc = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/Angular.min.js"> </script>
<スクリプトsrc = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/Angular-route.min.js"> </script>
<Script src = "// cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-touch.min.js"> </script>
<Script src = "dist/js/mobile-angular-ui.js"> </script>
<スクリプトsrc = "demo/demo.js"> </script>
</head>
<ボディ
ng-app = "mobileangularuiexamples"
ng-controller = "maincontroller"
>
<! - サイドバー - >
<div ng-include = "'demo/sidebar.html'"
ui-track-as-search-param = 'true'
>/div>
<div ng-include = "'demo/sidebarright.html'"
>/div>
<div>
<! - navbars->
<div>
<div ui-yield-to = "title">
モバイルAngular UI
</div>
<div>
<div ui-toggle = "SideBarleft">
<i> </i>メニュー
</div>
</div>
<div ui-yield-to = "navbaraction">
<div ui-toggle = "SideBarright">
<i> </i>チャット
</div>
</div>
</div>
<div>
<div>
<a href = "http://mobileangularui.com/"> <i> </i> docs </a>
<a href = "https://github.com/mcasimir/mobile-angular-ui"> <i> </i>ソース</a>
<a href = "https://github.com/mcasimir/mobile-angular-ui/issues"> <i> </i>問題</a>
</div>
</div>
<! - app body->
<div ng-class = "{loading:loading}">
<div ng-show = "Loading">
<i> </i>
</div>
<div>
<ng-view> </ng-view>
</div>
</div>
</div> <! - 〜.app->
<div ui-yield-to = "modals"> </div>
<スクリプト>
(function(i、s、o、g、r、a、m){i ['googleanalyticsobject'] = r; i [r] = i [r] || function(){
(i [r] .q = i [r] .q || [])。push(arguments)}、i [r] .l = 1*new date(); a = s.createelement(o)、
m = s.getElementsBytagname(o)[0]; async = 1; a.src = g; m.parentnode.insertbefore(a、m)
})(window、document、 'script'、 '// www.google-analytics.com/analytics.js'、'ga');
ga( 'create'、 'ua-48036416-1'、 'mobileangularui.com');
ga( 'send'、 'pageview');
</script>
</body>
</html>
この時点で問題はまだ存在し、home.htmlが正常にロードされなかったことがわかりました
http://gdzx.com/mobile-angular-ui-master/home.html、ディレクトリはデモの下にある必要があります。ソースコードをチェックするときにhome.htmlが導入された場所が見つかりません。 Angularでロードされたと思います。 Angularuiを学んだとき、この問題を解決します。
今日(2014/12/20)が最終的に完了しました。プロジェクト全体をWebサイトルートディレクトリに入れてから、Demo/index.htmlにアクセスして、すべてのCSSスタイルとJSスクリプトを正常にロードします。