angularJs学习笔记-路由

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>

转载于:https://www.cnblogs.com/cynthia-wuqian/p/5213291.html

angularJs学习笔记-路由相关推荐

【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
AngularJS学习笔记(一)
前言几个月之前了解过一点Angular,主要是通过phonecat应用程序了解一些入门东西,但是当被问及什么是Angular或者你对Angular的理解时,只记得一个MVVM双向数据绑定,显然这是不 ...
AngularJs学习笔记0——前言
距离上次写博客有很长时间了,这段时间中也一直想坚持写博客,但是迟迟未动,一方面是因为刚换工作并适应新的环境导致工作比较忙碌,一直没有抽出时间来,其实说白了就是给自己的懒惰找借口,但是本人在园子里也有一 ...
angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序
一.什么是angularJS angularJS是基于javascript的框架,所谓框架,自然就是封装了很多功能,举个例子,使用原生javascript,如果你要写一个网页幻灯片,你可能需要几十行代 ...
[AngularJS学习笔记] 基础学习01
2016-06-06开始学习AngularJS AngularJS是会extend HTML的 ng-directives 先学习了四个 ng-app:定义AngularJS Application的 ...
三、PHP框架Laravel学习笔记——路由参数、重定向、视图
一．路由参数我们已经学习了部分路由参数的功能,比如动态传递{id}: 那么,有时这个参数需要进行约束,我们可以使用正则来限定必须是数字: Route::get('task/read/{id}', ' ...
AngularJS学习笔记-2
1.$scope $scope是一个POJO(Plain Old JavaScript Object) $scope提供了一些工具方法$watch()/$apply() $scope是表达式的执行环 ...

angularJs学习笔记-路由

angularJs学习笔记-路由相关推荐

最新文章

热门文章