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 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
利用python画出折线图
2018/07/26 Python
Python编程中类与类的关系详解
2019/08/08 Python
python实现简单飞行棋
2020/02/06 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
五年级科学教学反思
2014/02/05 职场文书
欢送退休感言
2014/02/08 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
红色经典电影观后感
2015/06/18 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
MySQL 聚合函数排序
2021/07/16 MySQL