2015-03-03 74 views
-1

我有使用CDN鏈接的mamp設置角度。如何在本地設置角度?

一切都已經工作的很好,我已經能夠使用柔性等。 不過,我想使用這裏找到bottomsheet演示:

https://material.angularjs.org/#/demo/material.components.bottomSheet

我試圖建立它自己的以及直接從演示中獲取代碼,當我運行它時,沒有任何按鈕顯示出來,它們只是顯示爲文本,而且我看到{{alert}}

附加是結果imgur的屏幕截圖。 com/9t5I5SY

<div ng-controller="BottomSheetExample"> 
    <p style="padding-left: 20px;"> 
    Bottom sheet can be dismissed with the service or a swipe down. 
    </p> 
    <div class="bottom-sheet-demo inset" layout="column" layout-sm="row" layout-align="center"> 
    <md-button class="md-primary" ng-click="showListBottomSheet($event)"> 
     Show as List 
    </md-button> 
    <div style="width:50px;"></div> 
    <md-button class="md-primary" ng-click="showGridBottomSheet($event)"> 
     Show as Grid 
    </md-button> 
    </div> 
    <br/> 
    <b layout="row" layout-align="center center" layout-margin> 
    {{alert}} 
    </b> 
</div> 

如果任何人都可以告訴我爲什麼這不起作用我永遠在你的債務。

謝謝!

+1

檢查您的控制檯。你確定你正在加載模板以及示例中提供的JS嗎? – pizzasynthesis 2015-03-03 02:22:01

+0

是的,我100%確定我正在加載模板。 但是我確實有兩個控制檯錯誤。但他們似乎都與我沒有觸及的文件有關 這裏是一個截圖http://imgur.com/Nlo3J6h – 2015-03-03 02:44:25

+0

對不起,我錯過了你已經使用MAMP,所以不需要我的第一個建議。但看到我的編輯,並讓我知道,如果這有幫助。 – pizzasynthesis 2015-03-03 02:59:03

回答

0

這裏可能有多個答案。

我能夠在本地重新創建錯誤,並且使用Angular的開發版本,我發現它抱怨ng-app名稱與angular.module名稱不匹配,以及控制器的'AppCtrl'(這個例子是正確的)不匹配。閱讀那裏的錯誤,看看你的命名約定是否導致問題。

其次,你需要使用npm來安裝(至少)一個輕量級本地服務器。這是必要的,因爲您正在向HTML模板文件發出跨源請求。這裏有一個很好的選擇:

npm install -g http-server

然後在你的站點根目錄運行以下命令:

http-server .

這應該給你在本地主機本地服務器:8080

我認爲替代是將你的模板全部保存在同一個JavaScript文件中,但我無法確定。也許試試兩個?

編輯:根據你的錯誤,它看起來像Angular抱怨BottomSheetExample不是一個函數(得到未定義)。

看到您的控制器已被調用BottomSheetExample,請確保這是您的控制器在主JS文件中調用的內容。

現在用ng-app屬性做同樣的事情。這條線:

angular.module('bottomSheetDemo1', ['ngMaterial'])

應該分享與前者的命名約定。如果您已經聲明瞭ng-app屬性,請考慮將此控制器作爲該模塊的子控制器,或完全使用單獨的模塊。 (如果我使用錯誤的術語,請原諒我)。

例如,如果你ng-app屬性等於starterApp那麼你應該代替聲明如下:

var app = angular.module('starterApp', ['ngMaterial'])

+0

什麼是真棒迴應。非常感謝您輸入比薩(挖掘用戶名)。 我將模板存儲在同一個JavaScript文件中,它工作正常! 唯一的問題是我能夠得到演示在codepen上工作,但是當我嘗試將它放到我當前的項目中時,我仍然得到相同的錯誤。 以下是codepen的工作版本:http:// codepen。io/H0BB5/pen/JoBYxX 這裏是非工作版本,當我嘗試把它放到我的網站(我試圖把它放在綠色和紅色框的一側) http://codepen.io/H0BB5/筆/ qEOLOLZ真的希望它是一個小的修復 – 2015-03-03 03:48:19

+0

我認爲問題是你聲明兩個不同的角應用程序。看到這個答案:http://stackoverflow.com/a/12864137/2694851。 – pizzasynthesis 2015-03-03 16:21:43

+0

這是一支筆。由於模塊不能嵌套(每個頁面有一個'app'/模塊),因此我刪除了對稱爲「StarterApp」的模塊的引用,以及HTML中的ng-app指令。 http://codepen.io/anon/pen/YPjpQM – pizzasynthesis 2015-03-03 16:22:35

1

BottomSheetExample控制器是bottomSheetDemo1模塊的一部分,但你不包括模塊的任何地方。無論是絕對移動你的BottomSheetExampleGridBottomSheetCtrl控制器到StarterApp模塊或包括bottomSheetDemo1模塊作爲依賴,如

var app = angular.module('StarterApp', ['ngMaterial', 'bottomSheetDemo1']); 

Codepen

+1

是的!就是這樣,就是這樣!啊,謝謝菲爾。現在我可以停止將我的頭撞到牆上了 – 2015-03-03 05:09:08

-1

工作。從這個鏈接

步步

  1. 下載zip文件 - HTML文件夾內 https://www.dropbox.com/s/ng97xnupazki052/laravel-angular.zip?dl=0

  2. 提取zip文件。

  3. 打開終端並運行命令 - 「php artisan serve -port = 8080」。
  4. 在mysql中創建數據庫。 5在.env文件(根文件夾中存在的.env文件)中設置數據庫的信息。 喜歡: - 數據庫名稱,用戶名,密碼
  5. 再次運行命令 - 「php artisan serve -port = 8080」。 (在新終端中)
  6. 運行另一個命令 - 「php artisan migrate:refresh -seed」(用於獲取數據庫)。
  7. 打開瀏覽器,輸入「本地主機:8080」(在地址欄)
  8. 輸入電子郵件地址和密碼: 電子郵件:[email protected] 密碼:-password

===== =================安裝完成=====================