大佬教程收集整理的这篇文章主要介绍了跟我学AngularJs:router路由与多重视图详解,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
林炳文Evankaka原创作品。转载请注明出处http://code.js-code.com/tag/http://blog.csdn.net/evankaka
本教程使用AngularJs版本:1.5.3
AngularJs GitHub:https://github.com/angular/angular.js/
AngularJs下载地址:https://angularjs.org/
摘要:AngularJs中的路由其实可以认为是一个地址跳转映射,只不过它这个跳转不是传给后台去操作,而是在前台根据不的地址传递参数,渲染不同的内容出来。浏览器地址发生了改变,但实际上它们还们在同一个页面。
$routeChangeError:这个事件在路由跳转失败后触发
(1)引入angular-route.js文件
(2)引入ngRoute模块,angular.module("myApp",["ngRoute"])
(3)页面设置 <div ng-view ></div><!--这里就是渲染其他视图的地方-->
(4)定义路由的页面,可以用<script type='text/ng-template' id='。。。。'><script>包围
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <Meta charset="UTF-8"> <title>AngularJS入门学习</title> <script type="text/javascript" src="./1.5.3/angular.js"></script> <script type="text/javascript" src="./1.5.3/angular-route.js"></script> </head> <body> <div ng-controller="myCtrl"> <ul> <li><a href="#/a">click a</a></li> <li><a href="#/b">click b</a></li> </ul> <div ng-view ></div><!--这里就是渲染其他视图的地方--> </div> <script type="text/javascript"> angular.module("myApp",["ngRoute"]) .controller("aController",function($scope,$routE){ $scope.Hello = "Hello,我是a!"; }) .controller("bController",function($scopE){ $scope.Hello = "Hello,我是b,延迟 了1秒才显示!"; }) .controller("myCtrl",$LOCATIOn){ $scope.$on("$viewContentLoaded",function(){ //当新的URL加载完成后,@L_177_42@myCtrl console.log("ng-view content loaded!"); }); $scope.$on("$routeChangeStart",function(event,next,current){ //当URL发生改变时,@L_177_42@myCtrl //event.preventDefault(); //cancel url change console.log("route change start!"); }); }) .config(function($routeProvider,$LOCATIOnProvider) { $routeProvider .when('/a',{ templateUrl: 'a.html',controller: 'aController' }) .when('/b',{ templateUrl: 'b.html',controller: 'bController',resolve: { // 延迟 1秒再跳转 delay: function($q,$timeout) { var delay = $q.defer(); $timeout(delay.resolve,3000); return delay.promise; } } }) .otherwise({ redirectTo: '/' }); }); </script> <script type='text/ng-template' id='a.html'> <div><h1>{{Hello}}</h1></div> </script> <script type='text/ng-template' id='b.html'> <div><h1>{{Hello}}</h1></div> </script> </body> </html>效果:
每次点击控制台输出
代码:
<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <Meta charset="UTF-8"> <title>AngularJS入门学习</title> <script type="text/javascript" src="./1.5.3/angular.js"></script> <script type="text/javascript" src="./1.5.3/angular-route.js"></script> </head> <body ng-app="myApp"> <div ng-controller="TextController"> <p>{{someText}}</p> </div> <div ng-view></div><!--这里就是渲染其他视图的地方--> </body> <script> var myApp = angular.module('myApp',['ngRoute']); myApp.controller('TextController',function($scopE) { $scope@L_405_50@meText = '下面就是显示内容的地方'; }); //路由 function emailRouteConfig($routeProvider) { $routeProvider. when('/',{ controller: ListController,templateUrl: 'list.html' }). when('/view/:id',{ //在id前面加一个冒号,从而制订了一个参数化URL controller: DetailController,templateUrl: 'detail.html' }). otherwise({ redirectTo: '/' }); } myApp.config(emailRouteConfig); //配置我们的路由 messages = [{ id: 0,sender: "123456@qq.com",subject: "你好,这是一封邮件",date: "2015年4月13日",recipients: ['loin@163.com'],message: "你好,我是xxx,这是发送给您的邮件。" },{ id: 1,recipients: ['lin@163.com'],{ id: 2,message: "你好,我是xxx,这是发送给您的邮件。" }]; function ListController($scopE) { $scope.messages = messages; } function DetailController($scope,$routeParams) { $scope.message = messages[$routeParams.id]; } </script> <script type='text/ng-template' id='list.html'> <table> <tr> <td><strong>发件人</strong></td> <td><strong>内容</strong></td> <td><strong>日期</strong></td> </tr> <tr ng-repeat="message in messages"> <td>{{message.sender}}</td> <td><a href="#/view/{{message.iD}}">{{message.subject}}</a></td> <td>{{message.datE}}</td> </tr> </table> </script> <script type='text/ng-template' id='detail.html'> <div><strong>项目:</strong>{{message.subject}}</div> <div><strong>发送者:</strong>{{message.sender}}</div> <div><strong>日期:</strong>{{message.datE}}</div> <div> <strong>To:</strong> <span ng-repeat="recipient in message.recipients"> {{recipient}} </span> </div> <div>{{message.messagE}}</div> <a href="#/">回到列表</a> </script> </html>
效果:
以上是大佬教程为你收集整理的跟我学AngularJs:router路由与多重视图详解全部内容,希望文章能够帮你解决跟我学AngularJs:router路由与多重视图详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。