如何在本地设置角度？

Question

我已经使用 CDN 链接设置了 mamp 的角度。

一切正常，我已经能够使用 flex 等。 但是，我正在尝试使用此处找到的底部演示：

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>

如果有人能告诉我为什么这不起作用，我永远欠你的债。

谢谢！

Answer 1

它的工作肯定。

一步一步

1. 从此链接下载 zip 文件：- https://www.dropbox.com/s/ng97xnupazki052/laravel-angular.zip?dl=0

2. 在 html 文件夹中提取 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. 打开浏览器并输入“localhost:8080”（在网址栏中）
8. 输入邮箱和密码： 电子邮件：-admin@example.com 密码：-密码

=======================设置完成=====================

Answer 2

您的BottomSheetExample 控制器是bottomSheetDemo1 模块的一部分，但您没有在任何地方包含该模块。将BottomSheetExample 和GridBottomSheetCtrl 控制器移动到StarterApp 模块中，或者将bottomSheetDemo1 模块作为依赖项包含在内，例如

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

Codepen

Answer 3

这里可能有不止一个答案。

我能够在本地重新创建您的错误，并且使用 Angular 的开发版本，我发现它抱怨 ng-app 名称与 angular.module 名称不匹配，以及控制器“AppCtrl”（其中来自示例）也不匹配。阅读那里的错误，看看您的命名约定是否导致问题。

其次，您需要使用 npm 来安装（至少）一个轻量级的本地服务器。这是必要的，因为您正在向 HTML 模板文件发出跨域请求。这是一个不错的选择：

npm install -g http-server

然后在您的站点根目录中运行它：

http-server .

应该在 localhost:8080 为您提供本地服务器

我认为另一种方法是将您的模板全部存储在同一个 JavaScript 文件中，但我不能肯定地说。两个都试试？

编辑：根据您的错误，Angular 似乎在抱怨 BottomSheetExample 不是函数（未定义）。

看看你的控制器是如何被调用的BottomSheetExample，确保你的控制器在主JS文件中被调用。

现在对ng-app 属性做同样的事情。这一行：

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

应该与前者共享命名约定。如果您已经声明了ng-app 属性，请考虑使该控制器成为该模块的子控制器，或者完全是一个单独的模块。 （如果我使用了错误的术语，请原谅我）。

例如，如果您的ng-app 属性等于starterApp，那么您应该改为声明：

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