AngularJS+Satellizer+Node.js+MongoDB->Instagram-03

Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB

3.开始

让我们从下载 AngularJS 的最新版本开始。记住点 Browse additional modules 来下载 angular-route.jsangular-messages.js。后面那个是用来显示输入认证的错误信息的。

angularjs

创建一个新的文件夹,命名为 instagram。在它里面建 client。在 client 里面创建 vendor 。最后我们把刚才下载的 – angular.js, angular-messages.jsangular-route.js 拷贝到 vendor 文件夹。

vendor

client 中创建新文件index.html,内容如下:

<!-- lang: js -->
<!doctype html>
<html ng-app="Instagram">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Instagram - Powered by Satellizer</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css">
  <link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

<div ng-view></div>

<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="app.js"></script>

</body>
</html>

ng-app 属性是用来启动 AngularJS 应用的。它指定了应用的根节点,所以它通常会放在 <html> 或者 <body> 标签上。 ng-view 配合 ngRoute 一起工作,用来在主页布局(index.html)中渲染当前路径所对应的页面。当路由发生改变的时候,对应的 view 也会跟着一起改变。

然后,在同一的目录下,创建叫 app.js 的新文件。它是 AngularJS 的入口。

<!-- lang: js -->    
angular.module('Instagram', ['ngRoute', 'ngMessages'])
  .config(function($routeProvider) {

  });

Angular 用模块来组织应用代码。一个模块可以依赖另外的模块,在这里是 - ngRoute 和 ngMessages。每个模块就像一个更小的应用一样,有它自己的模型,控制器,服务,指令,过滤器,等。

你应该已经意识到,模块的第一个参数是这个模块的名字,第二个参数是这个模块的依赖数组。即使你不需要任何依赖,你还是得提供一个空的数组。省略数组之后会触发 “getter”行为,比如说,当我们需要用到模块来创建新的 controllers, services 或者 directives 的时候,我们会用不带第二个参数的 angular.module(‘Instagram’)

上面的 .config() 方法会在 provider 注册和配置阶段执行。你只能在这注入你需要的 provider 和常量(constant),所以是 $routeProvider 而不是 $route。在这里你需要设置路由,重写 Satellizer 的默认配置,或者通过拦截器(interceptor) 来修改 HTTP 的请求/响应。

你可以在这里查看更多的 AngularJS 模块的相关知识。

注意: 模块名字和 index.htmlng-app 的值必须匹配。

这是到目前为止的工程目录结构:

目录结构

让我们启动 Python 页面服务器来看看实际效果。当然你也可以双击 index.html ,而且它也可用。不过当你开始做 Ajax 应用的时候,你就会看到如下的错误了:

Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

这就是为什么我们需要一个 web 服务器。你不一定要用 Python 不过它是最简单的一个。如果你在 Mac OS X 或者 Linux 上开发的话,那你已经有 Python 了,不过如果你用 Windows 的话,在继续往下走之前你要去下载和安装 Python 2.x 或者 3.x 到你机器上。

打开终端,转到 client 文件夹下,敲入如下命令:


$ python -m SimpleHTTPServer

注意: Windows 用户,可以看看 cmder 终端模拟器,它在 Windows 操作系统上长得最像 Linux 和 Mac OS X 终端。当我在我的苏菲超薄三代(Surface Pro 3)上写代码的时候,我超爱用它。

cmder

转到 http://localhost:8000/ ,你可以看到一个空白页面,因为我们还没加任何特效。打开 Google Chrome 的 JavaScript Console, ( Mac OS X: ⌥ + ⌘ + J 或者 Windows: Ctrl + Shift + J) 确认没有异常。

你可能感兴趣的:(AngularJS,nodejs,express,node,node.js,OAuth,oauth2,OAuthn,Satellizer)