Meteor+AngularJs 示例

Posted 2023-03-08

【中文标题】Meteor+AngularJs 示例

【英文标题】：Meteor+AngularJs example

【发布时间】：2013-03-21 14:06:05

【问题描述】：

我是 Meteor 和 AngularJs 的新手。我正在尝试关注https://github.com/lvbreda/Meteor_angularjs 上的示例应用程序，但到目前为止我还没有让它工作。

我在这段代码中收到错误“未定义应用程序”：

app.controller('MeteorCtrl', ['$scope', '$meteor', function ($scope, $meteor) 
Uncaught ReferenceError: app is not defined
    $scope.todos = $meteor("todos").find();
    $meteor("todos").insert(
        name: "Do something",
        done: false
    );

我尝试将上面的内容重写为：

var MeteorCtrl = function ($scope, $meteor) 
    $scope.todos = $meteor("todos").find();
    $meteor("todos").insert(
        name: "Do something",
        done: false
    )
;

仍然抛出错误'错误：未知提供者：$meteorProvider

https://github.com/bevanhunt/meteor-angular-leaderboard 上唯一的其他meter+angularjs 示例似乎已过时。

有人可以使用https://github.com/lvbreda/Meteor_angularjs 的包发布一个简单但完全有效的可下载meteor+angularjs 示例吗？

【问题讨论】：

我自己的应用程序遇到了同样的问题，通过将我的应用程序基于 github.com/Urigo/meteor-angular-socially 的代码修复。我的文件扩展名为 .tpl 而不是 .ng.html，文件夹结构略有不同，并且使用了一些 npm 模块，所以不确定是什么真正为我解决了问题。

【参考方案1】：

我显然有偏见，但我们的团队编写并维护了这个库 - angular-meteor，我们还发布了一个将两者结合起来的教程 - angular-meteor tutorial

【参考方案2】：

我的答案很简单：不要把流星和角混在一起！

你为什么要这样做？ 对于数据绑定能力？ Meteor 为你做的比 Angular 的帮助器和发布/订阅机制简单得多。

要建立你自己的指令？ Meteor 模板和 Blaze 也可以为您做到这一点。

在使用 angular 很长一段时间后，我最近使用了流星，发现它非常简单：实现相同的代码更少，指令声明更简洁，后台为您完成了很多工作，尤其是用于提取数据子集。

流星不需要使用角度，只需使用流星。我还没有找到需要 Angular 的案例。

meteor 中最难掌握的概念是发布订阅模型，但是一旦掌握了它，它就非常强大，因为您可以通过参数定义将哪些数据推送到客户端。那么你只需要一个模板来渲染它。

查看这篇文章了解更多详情 https://www.discovermeteor.com/blog/understanding-meteor-publications-and-subscriptions/

编辑：2016 年 1 月

查看 Meteor 中 Angular 2 的基准测试，我现在可以看到使用它的原因。以前的版本绝对不是这种情况：

见文章： http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor

Angular 1.x 比 6 个月前的 Blaze 和 React 慢得多。 Angular 2 看起来好多了，但我仍然不喜欢过于复杂。

为了简单和快速，还可以查找由前 Angular 负责人构建的 Aurelia.io，它旨在与 javascript 框架本身保持一致。

【讨论】：

就我而言？因为离子。

【参考方案3】：

我自己一直在解决这个问题，并为 angural 制作了一个包。 示例代码位于：https://github.com/bramtervoort/meteor-angular-stack/tree/example 例如：http://bramtervoort-todo.meteor.com

非常简单，只需安装流星并运行：mrt add angular-stack

【参考方案4】：

虽然我没有使用 lvbreda 的 Angular 包，但我已经能够以相对简单的方式将 Angular 与 Meteor + Blade 集成为 HTML 模板语言。我从 Daniel Olano 的 Ng-Meteor 包开始，最终实现了我自己的 Meteor/Angular 桥接器。我是 Meteor 和 Angular 的新手，但它似乎运行良好，我喜欢代码非常透明，因此我非常了解它是如何工作的。

我编写了以下 CoffeeScript 模块，命名为 client/ngMeteor.coffee，它定义了 Meteor 和 Angular 之间的桥梁：

define("ngMeteor", [], ->
  angular.module('ngMeteor.directives', [])

  angular.module('ngMeteor.services', [])

  angular.module('ngMeteor.blade', []).run(['$templateCache', '$rootScope', '$compile',
    ($templateCache, $rootScope, $compile) ->
      bodyTemplate = Template.body
      if !bodyTemplate
        throw new Error("A body template must be defined ('body.blade')")

      # Render each template and place in Angular's template cache
      $templateCache.put "#key.blade", render() for own key, render of Template

      # Render the body template and have Angular compile it, then inject it into the DOM's body element
      Meteor.startup(()->
        # Necessary?
        Spark.finalize(document.body)
        $('html').attr('data-ng-app', '')
        $('body').html($compile(bodyTemplate())($rootScope))
        $rootScope.$apply()
      )
  ])
  angular.module 'ngMeteor', ['ngMeteor.blade', 'ngMeteor.services', 'ngMeteor.directives']
)

有关完整的工作示例，请参阅this example project of mine。非常感谢您的反馈。

【讨论】：

很高兴看到它对某人有用，我开始它是为了一个个人项目，但后来我不得不从事其他工作。我想我会尽快恢复这个项目，以便它可以拥有更多功能。

【参考方案5】：

我刚刚创建了一个简单的示例，展示了如何创建一个简单的 angular-meteor 应用程序。

该应用程序显示来自 mongo 集合的一些项目，并且可以通过浏览器控制台实时更新集合。 （只是 angular-js 的默认流星功能）

可以在github上找到：https://github.com/tom-muhm/angular-meteor-example。

【参考方案6】：

我也是 Meteor 和 Angular 的新手——我也很难完成这项工作。但我想我设法让基本的 Angular 功能运行起来。

我把发现的东西放到了github上：https://github.com/dirkk0/angularjs-meets-meteorjs

我希望这对你也有用。

【参考方案7】：

刚刚遇到同样的问题。通过添加meteor依赖解决

angular.module('meteorapp', ["meteor"]) # <------------------- Here
.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)
  $routeProvider.when '/',
   controller: 'home'
]

【参考方案8】：

您可以在不同的分叉中找到一些示例 https://github.com/alex-okrushko/Meteor_angularjs

我在 https://github.com/linepos/linepos 中构建了一个应用程序，但现在它无法正常工作，因为 lvbreda 更改了代码

您可以使用不同的方法https://github.com/kievechua/flame-on

【讨论】：

是的，大多数例子都已经很老了。如果有一个当前的工作示例，那就太好了。你能修复你的 linepos 例子吗？