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-appng-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这个标签,而没有htmlhead标签,这是因为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-appindex.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.htmlindex.ng.htmlapp.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

分享到: 更多 (0)