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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
js prototype截取字符串函数
Apr 01 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
深入理解node.js http模块
Jan 24 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
记一次vue跨域的解决
Oct 21 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
PHP开发大型项目的一点经验
2006/10/09 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
js控制input输入字符解析
2013/12/27 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
校园创业策划书
2014/01/14 职场文书
环保倡议书
2014/04/14 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
英文邀请函
2015/02/02 职场文书
党内外群众意见范文
2015/06/02 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python