使用Meteor + Angular + Jade + CoffeeScript构建的JS全栈框架

1 年 ago

文, 翔

1 minute

有事者，请从这边来

git clone https://github.com/endows/meteor_angular_jade_coffee myapp
cd myapp
meteor
=>http://localhost:3000

第一步，使得可以使用Angular。

meteor create myapp
cd myapp
meteor add urigo:angular

直接开始，我将删除已创建的文件，并创建以下文件。

rm myapp*
touch app.js
touch index.html
touch posts.ng.html

请将posts.ng.html重命名为您喜欢的名称。虽然在官方网站上将其命名为index.ng.html，但是因为后续步骤会出现错误，所以推荐使用其他名称。文件内容如下：

if (Meteor.isClient) {
  var myModule = angular.module('posts', ['angular-meteor']).controller('postsCtrl', function($scope) {
    $scope.name = 'world';
  });
}

<body>
  <ng-include ng-app='posts' src="'posts.ng.html'"></ng-include>
</body>

<div ng-controller='postsCtrl'>
  Hello {{name}}
</div>

不细致解释，总之，在index.html中加载Angular。然后可以像编写Angular应用程序一样进行编码。

使Jade库可用

如果您正常安装Jade库，会出现错误。因此，您需要安装专用的jade库。

meteor add civilframe:angular-jade
rm posts.ng.html
touch posts.ng.jade

div(ng-controller='postsCtrl')
  h1 Hello{{name}}

<body>
  <ng-include ng-app='channel' src="'channel.html'"></ng-include>
</body>

请注意，civilframe：angular-jade会将*.ng.jade文件编译为*.html。

将步骤3改为使CoffeeScript可用。

这件事我可以正常地做。

meteor add coffeescript
rm app.js
touch app.coffee

if Meteor.isClient
  myModule = angular.module('posts', [ 'angular-meteor' ]).controller('postsCtrl', ($scope) ->
    $scope.name = 'world!!!'
    return
  )

以上是以上内容，那么，祝你过上愉快的Meteor生活。

关于作者

遠藤孝志（えんどうたかし）。福島県出身の２２歳です。
私はオンライン観戦アプリやパブリックビューイングの運営者です。主にNode.js、Rails、Angular、Meteorといった言語を使用しています。現在、協力者を募集しています。
Twitter : @kyouzyuuuuuuuu1
github : https://github.com/endows/
メール : endotakashi1992@gmail.com