Meteor+Angular实现轻论坛（1）—Meteor和Angular基础介绍

来源： Meteor+Angular实现轻论坛（1）—Meteor和Angular基础介绍 – 简书

安装 Meteor

在连了网的Linux系统上面安装Meteor是很简单的，只需要运行一条命令，大家可以去Meteor官网看看。

这里我们的虚拟机是没有联网的，所以稍微麻烦一点。

1.首先运行下面的命令下载Meteor安装包（下载非常快）：

$ wget http://labfile.oss.aliyuncs.com/courses/424/meteor-install.tar.gz

2.加压刚刚下载的包：

$ tar zxvf meteor-install.tar.gz

3.进入解压后的目录：

$ cd meteor-install

4.安装：

$ sh install.sh

5.测试是否安装成功：

$ meteor --version

OK，安装完成！

Angular基础

AngularJS是一个MV* JavaScript框架，由Google维护。Angular使用声明式编程来构建用户界面，指令式编程来实现业务逻辑，达到了客户端和服务端解耦的目标。下面我们先来看看Angular的基础知识。

Angular表达式

Angular通过表达式把数据绑定到HTML模板，表达式写在双大括号内，如：{{ expression }}，HTML中出现Angular表达式的地方，就会显示对应表达式的数据。来个示例看看：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Angular Demo</title>
</head>
<body>
    <div ng-app="demo" ng-init="str='hello angular'">
        <p>{{ str }}</p>
        <p>{{ 5 + 5 }}</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script>
        var app = angular.module('demo', []);
    </script>
</body>
</html>

保存以上代码为HTML文件，在浏览器中打开，可以看到浏览器中显示了hellow angular字符串以及数字10。Angular表达式可以做简单的运算，但是不支持条件判断、循环和异常。我们还可以看到div中出现了ng-app和ng-init这两个奇怪的东西，这就是Angular的指令了。

Angular指令

Angular指令是HTML带有ng-前缀的扩展属性，每个指令都有不同的功能，也可以自己编写自定义指令：

ng-app：初始化一个Angular应用程序
ng-init：初始化当前作用域的属性
ng-model：绑定表单元素的值到当前作用域的属性
ng-repeat：循环HTML元素
ng-controller：定义应用程序的控制器
…

Angular控制器

Angular控制器用于控制和处理应用程序的数据。举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Angular Demo</title>
</head>
<body>
    <div ng-app="testApp" ng-controller="hello">
        <input ng-model="username">
        <p>Hello, {{ username }}</p>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
    // 创建Angular模块
    // 第一个参数是模块的名称
    // 第二个参数是一个数组，定义此模块需要依赖的模块（无依赖模块则传空数组）
    var app = angular.module('testApp', []);
    app.controller('hello', function($scope) {
        $scope.username = 'shiyanlou';
    });
</script>
</body>
</html>

angular.module用于创建Angular模块，通常Angular应用程序由模块定义，Angular控制器需要挂载到模块才会运行。

用浏览器打开这个页面，改变输入框的值，输入框下面的显示也会跟着改变，这个就是Angular的数据双向绑定机制。我们看到，控制器中传入了$scope这个变量，$scope相当于是这个控制器的作用域，是对当前这个控制器的数据模型（model）的引用（类似于普通JavaScript对象中的this关键字的作用）。

Meteor基础

Meteor是一个基于Node.js的Web开发框架，主要用来开发实时的应用程序。Meteor能够实时的同步数据库和客户端之间的数据。

Meteor环境搭建

安装Meteor

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

安装完成后可以输入如下命令，查看当前安装的Meteor的版本号，以确认安装成功了：

$ meteor --version

创建示例项目

$ meteor create LouForum

这里，我们创建了一个Meteor的示例项目，进入到项目目录启动项目：

$ cd LouForum
$ meteor

启动项目的命令是在项目根目录下运行meteor，停止项目直接输入Ctrl+c即可。

启动项目中，Meteor启动了mongoDB，这是因为Meteor默认的数据库就是mongoDB。启动成功后，打开浏览器，输入http://localhost:3000即可访问此项目，这是一个Meteor的默认初始页面，可以显示鼠标点击按钮的次数。查看LouForum文件夹，我们会看到里面只有三个文件，分别是HTML文件、CSS文件和JavaScript文件。Meteor中的JavaScript代码可以同时在服务端和客户端运行，所以这里只有一个JavaScript文件。

打开LouForum.js文件，我们看到，里面有两个判断：

Meteor.isClient下面的代码在客户端运行
Meteor.isServer下面的代码在服务端运行

Meteor创建简单的app直接在项目根目录下创建js文件、HTML文件和CSS文件即可。运行项目的时候，所有的CSS文件，都会自动引入到HTML文件，而所有的HTML文件，都会拼成一个HTML文件。下面，我们去掉官方默认的模板，添加Angular进来。

添加Angular到Meteor项目

首先，我们删掉初始化项目时，自动生成的三个文件：

$ rm LouForum.html LouForum.html LouForum.html

然后创建一个index.html文件：

$ touch index.html

在index.html中输入如下代码：

<body>
    <p>shiyanlou</p>
</body>

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

运行项目：

$ meteor

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

添加Angular包（在项目根目录下执行）：

$ meteor add angular

添加Angular成功后，下次运行项目，前端页面会自动引用Angular，无需再手动引用。

新建一个文件：

$ touch index.ng.html

这里，我们使用了.ng.html后缀名，这样，Meteor官方默认的模板系统（Blaze）就不会编译这个类型的HTML文件，Angular就可以使用这样的HTML文件了。

在index.ng.html文件中输入如下代码：

<p>shiyanlou</p>

然后修改index.html文件的代码：

<body>
    <div ng-include="'index.ng.html'"></div>
</body>

我们可以看到这里使用了Angular的一个指令，ng-include用于引入外部HTML文件，注意这里的双引号里面还有单引号。然后在创建一个app.js文件，并输入如下代码：

if (Meteor.isClient) {
    // 创建 Angular module
    // 并添加 angular-meteor 包依赖
    angular.module('louForum', ['angular-meteor']);
}

添加ng-app到index.html：

<body ng-app="louForum">
    <div ng-include="index.ng.html"></div>
</body>

运行项目查看效果：

$ meteor

运行成功后，我们可以看到，浏览器显示的和刚刚一样，说明Angular创建的模块运行成功了。

项目结构组织

虽然，HTML、css和JavaScript文件直接放在项目根目录也可以运行，但是，文件多了之后就会很混乱。所以，文件组织是很有必要的。而且，特定的文件夹在Meteor项目中有特殊的含义：

server：此文件夹下的代码只会在服务器端运行
client：此文件夹下的代码只会在客户端运行
public：这个文件夹下面的所有文件都可以直接公开访问

这里还有一些其他的规则：

子文件夹里面的文件比父文件夹里面的文件先加载
同一个文件夹内，文件是按字母顺序加载的
特别的，lib文件夹里的文件比其他文件夹里的文件都要先加载
最后，main.*这样的文件总是最后加载

我们先创建三个文件夹，即client、server和model。client中放只需要客户端运行的代码，server放只需要服务端运行的代码，model放定义数据库collection的代码，客户端和服务端都需要运行。

然后把index.html、index.ng.html和app.js文件移动到client文件夹下面，并修改app.js代码为：

// 创建 Angular module
// 并添加 angular-meteor 包依赖
angular.module('louForum', ['angular-meteor']);

因为client文件夹下面的代码只会在客户端运行，所以不需要Meteor.isClient判断了。

index.html文件中ng-include引入的文件路径必须完整，修改index.html代码如下所示：

<body>
    <div ng-include="'client/index.ng.html'"></div>
</body>

运行项目：

$ meteor

可以看到，效果和前面一样。

本课程为实验楼原创课程，转载请注明课程链接：https://www.shiyanlou.com/courses/424

Meteor+Angular实现轻论坛（1）—Meteor和Angular基础介绍 - 简书

安装 Meteor

Angular基础

Angular表达式

Angular指令

Angular控制器

Meteor基础

Meteor环境搭建

安装Meteor

创建示例项目

添加Angular到Meteor项目

项目结构组织

相关推荐

热门标签

分类目录

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏