搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 点融黑帮 > 初识Angular-Meteor(Angular-Meteor使实时全栈更简单)

初识Angular-Meteor(Angular-Meteor使实时全栈更简单)

点融黑帮 2017-11-28


什么是Meteor?


Meteor是一个用于开发现代Web和移动应用程序的完整的JavaScript平台。 Meteor包含一系列关键技术,用于构建连接客户端反应式应用程序,构建工具以及来自Node.js和一般JavaScript社区的一系列软件包。

Meteor能够实时的同步数据库和客户端之间的数据。

Meteor是一个基于nodejs、webSocket、mongoDB的整体开发框架,在它的实现中,前后端的数据模型已经几乎没有差别

 

Meteor包括什么?


命令行工具:meteor command

编译器:js,coffee,less,jade,sass

运行调试环境:meteor run

数据库:mongoDB

部署工具和平台:Galaxy,yourapp.meteor.com

内置移动编译平台:IOS,android

大量的社区贡献的程序包。最重要的,社区中一大批高水平的开发者。

 

Meteor的7大原则


1、数据线路(Data on the Wire):Meteor从不发送HTML到客户端,服务器只传送数据,由客户端来渲染页面。

2、同一种语言(One Language):Meteor在前后端使用同一种语言Javascript。

3、双端数据库(Database Everywhere):你的数据库不仅仅存在服务器端,还存在于你的浏览器端,你可以使用相同的代码获取数据。

4、延迟补偿(Latency Compensation):在客户端,Meteor预先取得数据来渲染页面,这使它看起来像立即从服务器获取结果一样。

5、全栈联动(Full Stack Reactivity):Meteor App都是实时App,从后台数据库到页面模板,全部都会随着数据的变化而自动更新。

6、拥抱社区(Embrace the Ecosystem):Meteor是开源框架,并和其他已有框架集成共存,比如一套代码同时编译成为Web App和IOS、Android等多平台的移动App。

7、简单即是高效(Simplicity Equals Productivity):使某事看起来简单的最佳方式就是确实让它变简单。Meteor的主要功能都有简洁优雅的API。

 

Meteor架构


初识Angular-Meteor(Angular-Meteor使实时全栈更简单)


搭建angular-meteor


第一步 :安装Meteor

打开你的命令行,然后张贴这行代码

$ curl https://install.meteor.com/ | sh

如果你是用Windows作为系统,那么请到https://www.meteor.com/install去找一个Meteor的安装包进行安装。


Meteor安装完成后,创建一个app:

$ meteor create myapp

作为替代,你也可以去用你的浏览器去访问下面这条链接:

https://github.com/bsliran/angular2-meteor-base


然后下载这个应用的例子,解压里面的文件,重命名文件夹为"myapp",然后把这个文件夹放到你的工作路径下。

现在让我们看看我们得到了什么。进入到这个新的文件夹中:

$ cd myapp

现在,我们安装一下npm的依赖包:

$ meteor npm install

(Meteor带有npm捆绑,所以你可以输入meteor npm,而不必担心自己安装。如果你愿意,你也可以使用全局安装的npm来管理你的软件包)

在本地运行app:

$ meteor

=> Started proxy
=> Started MongoDB.
=> Started your app.
>=> App running at: http://localhost:3000/

启动项目中,Meteor启动了mongoDB,这是因为Meteor默认的数据库就是mongoDB。

现在,你可以打开http://localhost:3000看一下这个神奇的应用已经跑在了你的电脑上了!


我们现在有一个功能齐全的应用程序,其中包括服务器和客户端! 默认的Meteor应用程序初始有四个文件,两个JS,一个HTML和一个CSS文件。

 

第二步 : 添加 Angular

然后创建一个新的index.html文件:

<body>
    <p>Hellow</p>
</body>

我们只写了body这个标签,而没有html和head标签,这是因为Meteor会扫描所有的HTML文件,然后把这些HTML文件中head标签内的内容合并,body中的内容合并,然后组成一个新的文件,再自动创建html标签、head标签和body标签,以及其他必须的代码。


运行项目:

$ meteor

启动成功后,打开浏览器访问http://localhost:3000,会看到页面上显示Hellow字样。

因为我们决定在客户端使用AngularJS,所以我们需要删除名为Meteor的默认UI包Blaze。

我们还需要删除名为ecmascript的Meteor的默认ECMAScript2015包,因为Angular-Meteor使用名为angular-babel的包来获取ECMAScript2015和AngularJS DI注解。

删除:

$ meteor remove blaze-html-templates
$ meteor remove ecmascript

将Angular添加到Meteor,回到命令行,启动这个命令

$ meteor npm install --save angular angular-meteor babel-runtime
$ meteor add angular-templates pbastowski:angular-babel

现在我们可以在我们的Meteor应用程序中使用Angular的强大功能。


Collections


这里应该注意到的是,Meteor对于数据的操作完全是标准的MongoDB语法。

Meteor在collections中存储数据,需要先使用new Mongo.Collection声明一个collection


初识Angular-Meteor(Angular-Meteor使实时全栈更简单)


发布和订阅


Meteor服务器可以使用Meteor.publish发布文档集,客户端可以使用Meteor.subscribe订阅这些出版物。客户端订阅的任何文档都将通过客户端集合的查找方法提供。

默认情况下,每个新创建的Meteor应用程序都包含autopublish包,它会自动将所有可用文档发布给每个客户端。

 

发布:

 

初识Angular-Meteor(Angular-Meteor使实时全栈更简单)


订阅:

 

初识Angular-Meteor(Angular-Meteor使实时全栈更简单)

 

资料


(https://www.meteor.com/install)

l angular-meteor教程

(https://angular-meteor.com/tutorials/socially/angular1/bootstrap)

l Mteor生态包

(https://atmospherejs.com/)

l Angular教程

(http://www.runoob.com/angularjs/angularjs-tutorial.html)

l ECMAScript6教程

(http://es6.ruanyifeng.com/)

l node.js下npm命令

(http://www.runoob.com/nodejs/nodejs-npm.html)

初识Angular-Meteor(Angular-Meteor使实时全栈更简单)



点击回顾往期精彩内容

















版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《初识Angular-Meteor(Angular-Meteor使实时全栈更简单)》的版权归原作者「点融黑帮」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注点融黑帮微信公众号

点融黑帮微信公众号:DianrongMafia

点融黑帮

手机扫描上方二维码即可关注点融黑帮微信公众号

点融黑帮最新文章

精品公众号随机推荐