文档章节

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

开源中国匿名会员
 开源中国匿名会员
发布于 2015/02/01 15:48
字数 527
阅读 104
收藏 0

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

打开 clientapp.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('/');

https://hackhands.com/wp-content/uploads/2014/10/Screenshot-2014-10-22-22.53.49.png

上面的每个 .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 尝试加载那些不存在的模板和控制器,我们在下一节修正它们。

© 著作权归作者所有

开源中国匿名会员
粉丝 78
博文 104
码字总数 113453
作品 2
徐汇
技术主管
私信 提问
AngularJS+Satellizer+Node.js+MongoDB->Instagram-20

[Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB][1] 20.部署 在 instagrame 目录下创建一个新的文件 .gitignore,把 node_modules 加到它里面。你可以直接用命......

开源中国匿名会员
2015/02/02
0
0
AngularJS+Satellizer+Node.js+MongoDB->Instagram-21

[Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB][1] 21.总结 完结撒花!这是我那些年写过的最长的贴了。搞笑的是,我在 [TV Show Tracker blog post][2] 里面也...

开源中国匿名会员
2015/02/02
0
0
如何在终端中使用 Instagram

Instagram 不需要介绍。它是像 Facebook 和 Twitter 之类的流行社交网络平台之一,它可以公开或私下分享照片和视频给确认过的粉丝。它是由两位企业家 Kevin Systrom 和 Mike Krieger于 2010...

24%
2018/05/14
0
0
day78-20180905-流利阅读笔记

还在瞎吃明星的安利?英国开始调查大 V 推广啦 Lala 2018-09-05 1.今日导读 无论是国内还是国外,越来越多的品牌都开始启用社交网络进行产品宣传。其中,明星和博主的推荐最为吸引眼球。与此...

飞鱼说编程
2018/09/05
0
0
揭秘 Instagram 的 13 人团队和 9 位投资人

拍照分享应用Instagram刚刚被Facebook以10亿美元的现金和股票收购。但是你知道吗,Instagram创立仅551天,团队只有13个人,其中两位还是在上个月的SXSW期间加入。而背后的9位神秘投资人同样扮...

虫虫
2012/04/10
1K
15

没有更多内容

加载失败,请刷新页面

加载更多

聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
15分钟前
2
0
Spring系列教程六:AOP详细讲解

AOP 概述 什么是 AOP AOP:全称是 Aspect Oriented Programming 即:面向切面编程。 AOP技术是对OOP技术的一种延伸,AOP是面向纵向,OOP是面向横向。简单的说它就是把我们程序重复的代码抽取...

我叫小糖主
28分钟前
12
0
Qt编写数据可视化大屏界面电子看板9-曲线效果

一、前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派、香橙派、全志H3、imx6)展示这么华...

飞扬青云
49分钟前
3
0
责任链模式

//这篇博客的博主真的不错,解析的都很清晰明了, https://blog.csdn.net/jason0539/article/details/45091639

南桥北木
今天
3
0
Flutter -------- dio网络请求

dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时等... 1.添加依赖# dependencies: dio: 2.1.x #...

切切歆语
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部