angularJS中router的使用指南


Posted in Javascript onFebruary 09, 2015

这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来

<!---

DEMO_INDEX.html

-->

<!doctype html>

<head>

<meta charset="utf-8">

<title>route</title>

</head><br>//这个重要是做IE的兼容,发现不管用,IE坑爹,你懂的

<body ng-app="routeApp" class="ng-app:routeApp"  id="routeApp">

<h1>Route Demo index</h1>

<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>

<div ng-view></div>

<script src="http://localhost:81/js/angular.min.js"></script>

<script>

var routeApp = angular.module('routeApp',[]);

routeApp.config(['$routeProvider',function ($routeProvider) {

      $routeProvider

      .when('/list', {

        templateUrl: 'list.html',

        controller: 'RouteListCtl'

      })

      .when('/list/:id', {

          templateUrl: 'detail.html',

          controller: 'RouteDetailCtl'

      })

      .otherwise({

        redirectTo: '/list'

      });

}]);

//controller

routeApp.controller('RouteListCtl',function($scope) {

});

routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {

    $scope.id = $routeParams.id;

});

</script>

</body>

</html>

//list.html

运行下面代码

<hr/>

<h3>Route : List.html</h3>

<ul>

<li ng-repeat="id in [1, 2, 3 ]">

<a href="#/list/{{ id }}"> ID{{ id }}</a>

</li>

</ul>

//detail.html

运行下面代码

<hr/>

<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

代码就这些了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
jquery实现聚光灯效果的方法
Feb 06 #Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
You might like
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python3.6数独问题的解决
2019/01/21 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
如何基于线程池提升request模块效率
2020/04/18 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
餐饮加盟计划书
2014/01/10 职场文书
高中军训广播稿
2014/01/14 职场文书
项目考察欢迎辞
2014/01/17 职场文书
事假请假条范文
2014/04/11 职场文书
电教室标语
2014/06/20 职场文书
美术社团活动总结
2014/06/27 职场文书
2016寒假假期总结
2015/10/10 职场文书
《观察物体》教学反思
2016/02/17 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang