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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
jquery预加载图片的方法
May 27 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php检测url是否存在的方法
2015/04/14 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
行政专员岗位职责
2014/01/02 职场文书
导游词书写之黄山
2019/08/06 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android