-1

I have setup angular with mamp using the CDN links.

everything has been working fine and I have been able to use flex etc.. however, I am trying to use the bottomsheet demo found here:

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

I have tried building it myself as well as taking the code directly from the demo and when I run it, none of the buttons are showing up, theyre just displayed as text and I am seeing {{alert}}

Attached is a screenshot of the results 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>

If ANYONE can tell me why this isn't working I am forever in your debt.

Thanks!

Brian Quach
  • 21
  • 1
  • 8
  • 1
    Check your console. Are you sure you're loading the templates as well as the JS provided in the example? – bazeblackwood Mar 03 '15 at 02:22
  • Yep i'm 100% sure i'm loading the templates in properly. However I do have two console errors. But they both seem to be related to files I have not touched Here is a screenshot http://imgur.com/Nlo3J6h – Brian Quach Mar 03 '15 at 02:44
  • Sorry, I missed that you were using MAMP already, so no need for my first recommendation. But see my edit, and let me know if that helps. – bazeblackwood Mar 03 '15 at 02:59
  • First, switch to the unminified versions of angular (use `angular.js` instead of `angular.min.js`). You will get better error messages then. Second, edit your question with the actual error messages. If there are links in the messages (as there always are with Angular), add those (in full, not the truncated versions) as well. – Phil Mar 03 '15 at 04:41

3 Answers3

1

Your BottomSheetExample controller is part of the bottomSheetDemo1 module but you aren't including that module anywhere. Either move your BottomSheetExample and GridBottomSheetCtrl controllers into the StarterApp module or include the bottomSheetDemo1 module as a dependency, eg

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

Codepen

Phil
  • 157,677
  • 23
  • 242
  • 245
0

There may be more than one answer here.

I was able to recreate your error locally, and using the development version of Angular, I found it was complaining both about the ng-app name not matching the angular.module name, as well as the controller 'AppCtrl' (which came right from the example) not matching as well. Read the errors there to see if your naming convention is causing issues.

Secondly, you'll need to use npm to install (at least) a lightweight local server. This is necessary because you're making cross-origin requests to your HTML template files. Here's a great option:

npm install -g http-server

Then run this in your site root:

http-server .

Which should give you a local server at localhost:8080

I think the alternative is to store your templates all in the same JavaScript file, but I can't say for certain. Maybe try both?

EDIT: Based on your error, it looks like Angular is complaining that BottomSheetExample is not a function (got undefined).

Seeing as how your controller is already called BottomSheetExample, make sure that's what your controller is called in the main JS file.

Now do the same thing with the ng-app attribute. This line:

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

Should share the naming convention with the former. If you already have declared an ng-app attribute, think about making this controller a subcontroller of that module, or a separate module entirely. (Pardon me if I'm using the wrong terminology).

For example if your ng-app attribute is equal to starterApp then you should declare this instead:

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

bazeblackwood
  • 1,127
  • 6
  • 16
  • What an awesome response. Thanks so much for typing it up pizza (dig the username as well). I stored the template in the same javascript file and it worked! Only issue is I was able to get the demo working on codepen but when I tried placing it into my current project I am still getting the same error. Here is the working version on codepen: http://codepen.io/H0BB5/pen/JoBYxX Here is the non working version when I tried putting it into my site ( I am trying to place it in the green and red box's on the side) http://codepen.io/H0BB5/pen/qEyOLZ really hope it's something small to fix – Brian Quach Mar 03 '15 at 03:48
  • I think the problem is that you're declaring two different angular apps. See this answer: http://stackoverflow.com/a/12864137/2694851 . – bazeblackwood Mar 03 '15 at 16:21
  • Here's a forked pen. I removed the reference to a module called "StarterApp", as well as the ng-app directive in the HTML, since modules can't be nested (one 'app'/module per page). http://codepen.io/anon/pen/YPjpQM – bazeblackwood Mar 03 '15 at 16:22
-1

Its work definitely.

step by step

  1. Download zip file from this link:- https://www.dropbox.com/s/ng97xnupazki052/laravel-angular.zip?dl=0

  2. Extract zip file inside html folder.

  3. Open terminal and run command – “php artisan serve –port=8080”.
  4. Create database in mysql. 5 Set infomation of database in .env file (.env file present in root folder). Like:- database name , username , password
  5. Run again command – “php artisan serve –port=8080”. (In new terminal)
  6. Run another command - “php artisan migrate:refresh –seed”.(For fetching database).
  7. Open browser and type “localhost:8080” (in url bar)
  8. Enter email and password : email:-admin@example.com password:-password

======================setup finish=====================

ajeet
  • 21
  • 4