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

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

5.路由

接下来，我们要在主页创建一个缩略图的网格。因此我们需要设置 Angular 的路由，基于 URL 来渲染页面。比如说，当用户访问 http://localhost:8000 ，路由会渲染 home.html 模板，那么，访问 http://localhost:8000/login， 路由则会渲染 login.html 模板。

注意: 为了简单起见我用了 ngRoute。但是，如果你喜欢用 ui-router 的话那就用。这两个模块之间的异同，栈爆网上这篇文章 Difference between angular-route and angular-ui-router 已经讲得很明白了。

模板是用来插到 index.html 上 ng-view 的一些类HTML代码段。把 Navbar 放到 index.html 我们知道这是因为每个模板我们都要用到。如果你想只在某些特定页面用的话，那你就把它放到这些特定的模板中，而不是 index.html。想了解更多 ng-include 请查阅文档，学习应该怎样外嵌 HTML 片段到模板，以避免在多个模板中复制导航栏。

打开 client 的 app.js ，把下面的代码加到 .config() 方法中:

<!-- lang: js -->
$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl'
  })
  .when('/signup', {
    templateUrl: 'views/signup.html',
    controller: 'SignupCtrl'
  })
  .when('/photo/:id', {
    templateUrl: 'views/detail.html',
    controller: 'DetailCtrl'
  })
  .otherwise('/');

上面的每个 .when() 方法第一个参数是相对 URL 路径，第二个参数是一个对象。当我们访问 index 路由 “/“， Angular 会从 views 文件夹加载 home.html 然后把 HomeCtrl 设置为模板的 controller 。

在 /photos/:id 中的冒号告诉我们这是个动态路由，这个 id 是 Instagram 照片的唯一 id。比如说，它会匹配到如下 URL:

http://localhost:8000/photos/85391138efe54d929d17e3c18bf634fe

在最后，可选方法 .otherwise() 会匹配到上面指定路径之外的所有路径。你可以在这里跳转到 404 页面，而不是上面的 home 页面。

好了，如果你现在刷新浏览器， 你会看到 404 File Not Found 页面，因为 $routeProvider 尝试加载那些不存在的模板和控制器，我们在下一节修正它们。