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 相关文章推荐
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 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
Terran剧情介绍
2020/03/14 星际争霸
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
模范教师事迹材料
2014/02/10 职场文书
元旦联欢会主持词
2014/03/26 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
租车协议书
2015/01/27 职场文书
小班下学期个人总结
2015/02/12 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
家长会开场白和结束语
2015/05/29 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS