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入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php发送post请求函数分享
2014/03/06 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP递归创建多级目录
2015/11/05 PHP
php文件缓存方法总结
2016/03/16 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
Python 列表反转显示的四种方法
2020/11/16 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
一名老师的自我评价
2014/02/07 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
经典促销广告词大全
2014/03/19 职场文书
会议室标语
2014/06/21 职场文书
淘宝客服工作职责
2014/07/11 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
python如何获取网络数据
2021/04/11 Python