1.angular路由介绍

  angular路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样。

  后台路由,通过不同的 url 会路由到不同的控制器 (controller) 上,再渲染(render)到 html。

  angular前端路由,需要提前对指定的 ng-app   定义路由规则 (routeProvider),  通过不同的 url 告诉 ng-app 加载哪个 html ,再渲染到 ng-app 的视图 ng-view 中。

2.安装

  引入 angular-route.js就可以了

  <script src="../build/angular.min.js" charset="utf-8"></script>
<script src="angular-route.min.js" charset="utf-8"></script>

3.在模块中声明注入对ngRoute的依赖

var app = angular.moudule('app',['ngRoute']);

  

4.定义路由表

     两种方法 :

  (1)when(path,route)

      path : string类型,表示该路由规则所匹配的路径,它将与地址栏内容($location.path)值进行匹配。   如果需要匹配参数,可以写成 /views/:name,参数保存在$routeParams

      route : 是一个object,用来指定当path匹配后的一系列配置项,主要有这几个参数:

          a: controller // function或者string类型,在当前模板上执行controller函数,生成新的scope

          b: controllerAs // string类型,为controller指定别名

          c: template // function或者string类型,视图所用的模板,这部分将被 ngView 引用

          d: templateUrl // string或function类型,当视图模板为单独的html文件或是使用了<script type="text/ng-temp">时使用

          e: resolve // 指定当前controller所依赖的其他模块

          f: redireactTo // 重定向地址

  (2)otherwise(params)

   当对应路径匹配不到时,我们可以配置一个redirectTo参数,让它定向到404或者首页

   var app = angular.moudule('app',['ngRoute']).config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'views/main.html',
contorller : 'mainCtrl'
})
.when('/day/:id',{
templateUrl : 'views/day.html',
contorller : 'dayCtrl'
})
.otherwise({
redirectTo : '/'
})
})

5.在主视图模板中指定加载子视图的位置

  我们的单页面程序都是局部刷新的,这个局部就是 ng-view

<div ng-view></div>

<ng-view><ng-view>

  

6.我仿照简书的样式做了个响应式的文章发布系统,给大家分享下

  (1)游览器效果

    a.文章列表页

  

    b.点击“写文章”

  

    c.点击文章标题,进入详细页

  

  d.手机上效果也感觉不错

    

  

(2)源码非常简单

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文章发布系统</title> <script src="../build/angular.min.js" charset="utf-8"></script> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="autor" content="cynthia娆墨旧染">
<meta name="robots" content="cynthia娆墨旧染">
<meta name="Generator" content="Atom">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="windows-Target" content="_top">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css.css" media="screen" title="no title" charset="utf-8">
<script src="../build/angular.min.js" charset="utf-8"></script>
<script src="../build/angular-route.min.js" charset="utf-8"></script>
</head>
<body>
<div class="cynthia-post" ng-app="NewsPub">
<ul class="cynthia-nav">
<li>
<a href="#/list">文章列表</a>
</li>
<li>
<a href="#/add">写文章</a>
</li>
</ul>
<div class="" ng-view></div> <!-- list -->
<script type="text/ng-template" id="list.html"> <div class="">
<ul class="cynthia-list">
<li ng-repeat="news in newsList">
<img src="1.png" alt="" />
<div class="cynthia-list-item">
<a href="#/detail/{{news.id}}">{{news.id}}.{{news.title}}</a>
<p>
{{news.content}}
</p>
<time>时间:{{news.date}}</time>
</div>
</li>
</ul>
</div> </script> <!-- add -->
<script type="text/ng-template" id="add.html">
<div class="cynthia-add">
<input type="text" name="name" value="" class="cynthia-add-title" ng-model="title" placeholder="输入文章标题">
<textarea cols="30" rows="10" class="cynthia-add-content" ng-model="content" placeholder="输入文章内容"></textarea>
<input type="button" name="name" value="提交" class="cynthia-add-submit" ng-click="add()">
</div>
</script> <!-- edit -->
<script type="text/ng-template" id="edit.html">
<div class="cynthia-add">
<input type="text" name="name" value="" class="cynthia-add-title" ng-model="news.title">
<textarea cols="30" rows="10" class="cynthia-add-content" ng-model="news.content"></textarea>
<input type="button" name="name" value="提交" class="cynthia-add-submit" ng-click="update()">
</div>
</script> <!-- detail -->
<script type="text/ng-template" id="detail.html">
<div class="cynthia-detail">
<h1>{{news.title}}</h1>
<hr>
<p>
{{news.content}}
</p>
<time>时间: {{news.date}}</time>
<br>
<a href="#/edit/{{news.id}}" class="cynthia-edit-btn">重新编辑</a>
</div>
</script> </div>
</body> <script type="text/javascript">
var app = angular.module('NewsPub', ['ngRoute']);
function routeConfig($routeProvider){
$routeProvider.
when('/', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/detail/:id', {
controller: 'DetailController',
templateUrl: 'detail.html'
}).
when('/edit/:id', {
controller: 'EditController',
templateUrl: 'edit.html'
}).
when('/list', {
controller: 'ListController',
templateUrl: 'list.html'
}).
when('/add', {
controller: 'AddController',
templateUrl: 'add.html'
}).
otherwise({
redirectTo: '/'
});
}; app.config(routeConfig); var newsList = [
{
id : 1,
title : '娆声酒染',
content : '被理科的纯黑纯白浸染久了,很多感觉变得迟钝,再也写不出那年窗下的马蹄江山和安静沧桑。那样的青石板街,那样的细碎夕阳,只叹一句片片往事伤。很多时候有很多感慨,但是只要面对着编辑器,面对着一行行代码,很快华丽的辞藻便消失得无影无踪。我不知道是否有女生和我一样,从一个怀揣公主梦的年纪,到自己亲手撕碎自己所有的幻想,变成像一个汉子一样战斗,不再依赖任何人,靠着自己的双手给人生上色一个缤纷童话。或许是成长,或许是成熟,但是心里,有什么地方空了下来。当情绪可以很好得控制,做事也可以想得很有逻辑,是非曲直很明白。不知道是幸,还是不幸。一夜风霜。越发发现最好释怀的地方却是KTV,可以安静听着某个朋友在某句歌词里投入的情绪,猜测他所经历的事情,也可以点首嗨歌把悲伤吼得撕心裂肺。对于背后的故事,我们只字不提。一群人的狂欢里尝着自己的孤单。上海很繁华,却也很落寞。可以很快聚集一批人陪你笑谈人生,却也孤单到想找个人说说心里话也不能。我们需要正能量地活着,所有的悲伤都不适合出现在朋友圈。忙碌可以让你情绪平复,然后不悲不喜。浮生一劫又一节,谁的曲折浸染了酒味揉进了绕梁的歌声里?',
date : new Date()
},
{
id : 2,
title : '《活着》(作者:余华) 读后感',
content : '作者下乡去收录民谣在田野里遇到一个老汉正在和牛老说好多名字,觉得好奇,就问老汉为什么一头牛有那么多名字。于是通过老汉的视角,第一人称回忆老汉的一生。老汉叫富贵,年轻的时候是一纨绔子弟,娶得是米行老板的千金家珍,他们家到他这一代是第三代。到他这一代在他手里把家产通过赌博全部输给了龙二。他爹,他娘,他儿子,他媳妇,他女儿,他女婿,他外孙...这些人在土地改革、文化大革命的背景下陆续因为各种原因死去。他爹被他气着摔死在蹲了一辈子的粪缸上。他娘在他被抓去当兵期间病死了。他儿子有庆是因为给县长(和富贵一起被抓壮丁,一起打过战)的女人输血被抽干死。他媳妇家珍得了软骨病加上受不了儿子的去世也就跟着去了。他女儿凤霞早年一场高烧后又聋又哑,后来也因为生孩子雪崩死的。他女婿二喜是个歪头,在工地上干活被掉下来的板块压死的。他的外孙苦根更是因为太久没吃饱在吃豆子的时候噎死的。最后只剩下富贵自己和一头老牛,老牛名字也叫富贵。而这一本不断死人的书,名字却叫活着。富贵的一生都在忍受亲人的去世。或许告诉我们:1.生命是一场不断失去的过程。2.生命是坚韧的,再多的悲痛都不能将其轻易打倒。3.死去的人未必不是幸福的,活着的人要带着所有关于死去的人的一生活下去。',
date : new Date()
},
]; app.controller('ListController',function($scope){
$scope.newsList = newsList;
}); app.controller('DetailController',function($scope, $routeParams){
$scope.news = newsList[$routeParams.id-1];
}); app.controller('AddController',function($scope,$location){
$scope.title = '';
$scope.content = '';
$scope.add = function(){
newsList.push({
id : newsList.length+1,
title : $scope.title,
content : $scope.content,
date : new Date()
}); $location.path('list');
}
}); app.controller('EditController',function($scope, $routeParams, $location){
$scope.news = newsList[$routeParams.id-1];
$scope.update = function(){
newsList[$routeParams.id-1] = $scope.news; $location.path('list');
}
})
</script>
</html>

  

angularJs学习笔记-路由的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. 超实用的 Nginx 极简教程,覆盖了常用场景

    概述 什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向代理? 反向代理(Reverse ...

  2. Android WebView 实现网页缩放

    需要对WebView设置的内容如下: //缩放开关,设置此属性,仅支持双击缩放,不支持触摸缩放 mWebView.getSettings().setSupportZoom(true); //设置是否可 ...

  3. 7.数据库、Contentobserver

    群组页是程序内部维护的一个数据库,其中一张表groups,用于存放创建的群组,还有一张表thread_group,用于关联群组和系统短信数据库中的会话. 数据库应该这样设计 MySqliteHelpe ...

  4. Kali学习笔记1:Linux基本命令及安装Java

    ls -l 详细信息ls /dev/ -ls 很详细ls -a 显示隐藏ls -lh 方便看ls -lh --sort=size 按大小排序.开头的都是隐藏 cd /media/ 进入cd .. 上一 ...

  5. linux查看系统32位还是64位

    1. 从系统查看 1.1 uname -a 命令 [root@qs-dmm-rh2 ~]# uname -a Linux qs-dmm-rh2 2.6.18-194.el5 #1 SMP Tue Ma ...

  6. Zookeeper 集群安装配置,超详细,速度收藏!

    今天,栈长分享下 Zookeeper 的集群安装及配置. 下载 下载地址:http://zookeeper.apache.org/ 下载过程就不说了,我们下载了最新的zookeeper-3.4.11. ...

  7. Spring Boot 2.1.0 已发布,7 个重大更新!

    距离<重磅:Spring Boot 2.0 正式发布!>已经过去大半年了,而 Spring Boot 2.1.0 在 10 月底就发布了,我们来看下 Spring Boot 2.1.0 都 ...

  8. 破解第二课 JMP法

    首先,我用录屏大师自制了一个视频,给视频加上密码.任意输入,看到报错信息“密码不对,请重新输入” 第一步 反汇编窗口右键点击“中文搜索引擎”---“智能搜索”,搜索引擎界面再次搜索“不对”,结果如下: ...

  9. Elasticsearch实践(一):基础入门

    本文以 Elasticsearch 6.2.4为例. 注:最新(截止到2018-09-23)的 Elasticsearch 是 6.4.1.5.x系列和6.x系列虽然有些区别,但基本用法是一样的. 官 ...

  10. WebBrowser使用例子

    本文参考了:http://www.cnblogs.com/txw1958/archive/2012/09/24/CSharp-WebBrowser.html 在上文的基础上加入了 一些处理弹出对话框的 ...