如何在本地设置 angular？

Question

我已经使用 CDN 链接为 mamp 安装了 angular。

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

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

我尝试自己构建它并直接从演示中获取代码，当我运行它时，none 按钮出现了，它们只是显示为文本，我我看到了{{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

这里可能有多个答案

我能够在本地重现您的错误，并且使用 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'])

Answer 2

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

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

Codepen

Answer 3

绝对有效。

循序渐进

从此 link 下载 zip 文件：- https://www.dropbox.com/s/ng97xnupazki052/laravel-angular.zip?dl=0
解压缩 html 文件夹中的 zip 文件。
打开终端和运行命令-“php artisan serve –port=8080”。
在 mysql 中创建数据库。 5 在 .env 文件中设置数据库信息（.env 文件存在于根文件夹中）。比如：- 数据库名称，用户名，密码
运行再次命令 – “php artisan serve –port=8080”。（在新终端）
运行另一个命令 - “php artisan migrate:refresh –seed”。（用于获取数据库）。
打开浏览器并输入“localhost:8080”（在url栏中）
输入电子邮件和密码：电子邮件：-admin@example.com 密码：-密码

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

如何在本地设置 angular？

How to setup angular locally?

javascript

angularjs

material-design