小程序开发制作平台_angular学习之ngRoute路由机制

  • 栏目:公司新闻 时间:2021-01-12 12:12 分享新闻到:
<返回列表

angular学习之ngRoute路由机制       这篇文章主要介绍了angular学习之ngRoute路由机制,ngRoute是一个Module,提供路由和深层链接所需的服务和指令。有需要的可以了解一下。

ngRoute简介

路由是AngularJS很重要的一环,它可以把你项目的页面串联起来,构成一个项目,常用的路由有ngRoute和ui-route,我这里先讲ngRoute。ngRoute是一个Module,提供路由和深层链接所需的服务和指令。

注意一点,和之前的文章不一样,使用ngRoute之前你需要引入另外一个js文件angular-route.js:

 script src="script/angular.min.js" /script 
 script src="script/angular-route.min.js" /script 

ngRoute包含内容如下:


在module中注入ngRoute模块 在config中用$routeProvider来对路由进行配置templateUrl,controller,resolve。 在每个controller中写业务逻辑 在controller中可以通过注入$routeParams来获得url上的参数

script src="script/angular.min.js" /script script src="script/angular-route.min.js" /script body ng-app="color" p a href="#/" rel="external nofollow" rel="external nofollow" Main /a /p a href="#red" rel="external nofollow" rel="external nofollow" Red /a a href="#green" rel="external nofollow" rel="external nofollow" Green /a div ng-view /div /body script var app = angular.module("color", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/", { ", controller: 'mainController' .when("/red", { ", controller: 'redController' .when("/green", { ", controller: 'greenController' .otherwise('/'); app.controller('mainController',['$scope',function mainController($scope){ $scope.message='this is main page'; }]); app.controller('redController',['$scope',function mainController($scope){ $scope.message='this is red page'; }]); app.controller('greenController',['$scope',function mainController($scope){ $scope.message='this is green page'; }]); /script /html < (其他页面类似,就不重复了)

 div 
{{message}}
 /div 

例子很简单,我们就只讲下路由的配置:

使用$routeProvider.when来配置路由的关系,方法接受两个参数,第一个参数是url的路径,第二个参数是配置url对应的templateUrl和controller。 $routeProvider.otherwise方法相当于default。

路由模块化

可能你已经注意到了上面的都写在一起,如果项目越来越大,会不会很头疼,那么是不是可以把它模块化,每个模块都有直接的module,controller,config等。模块依赖的技术我们之前的module那篇文章已经讲过,那么就来看下带有路由的情况下,怎么模块化。

<:

 !DOCTYPE html 
 html 
 head 
 meta charset="uft-8"/ 
 title /title 
 /head 
 script src="script/angular.min.js" /script 
 script src="script/angular-route.min.js" /script 
 script src="red.js" /script 
 script src="green.js" /script 
 script src="main.js" /script 
 body ng-app="color" 
 p a href="#/" rel="external nofollow" rel="external nofollow" Main /a /p 
 a href="#red" rel="external nofollow" rel="external nofollow" Red /a 
 a href="#green" rel="external nofollow" rel="external nofollow" Green /a 
 div ng-view /div 
 /body 
 script 
 var app = angular.module("color", ["ngRoute","Module.red","Module.main","Module.green"]);
 app.config(function ($routeProvider) {
 $routeProvider.otherwise('/');
 /script 
 /html 
<对应的模块js:

red.js

angular.module('Module.red', ['ngRoute'])
 .config([
 '$routeProvider',
 function ($routeProvider) {
 $routeProvider.when('/red', {
 ',
 controller: 'redController'

路由的参数

那么路由怎么将参数传入到模板页呢?我们把上面的例子改造一下,通过例子来讲解:

main.js

angular.module('Module.main', ['ngRoute'])
 .config([
 '$routeProvider',
 function ($routeProvider) {
 $routeProvider
 .when('/', {
 ',
 controller: 'mainController'
 .controller('mainController', [
 '$scope',
 function ($scope) {
 $scope.message = 'This is main page';
 $scope.colors=['blue','yellow','pink'];

这里初始化了一个colors的数组,作为要传递的数据。

<

{{message}}
 li ng-repeat="color in colors" 
 a href="#/color/{{color}}" rel="external nofollow" {{color}} /a 
 /li 
 /ul 

通过ng-repeat循环创建a链接,数组的元素通过链接传入。

colorId.js

angular.module('Module.colorId', ['ngRoute'])
 .config([
 '$routeProvider',
 function ($routeProvider) {
 $routeProvider
 .when('/color/:colorId', {
 ',
 controller: 'colorIdController'
 .controller('colorIdController', [
 '$scope','$routeParams',
 function ($scope,$routeParams) {
 $scope.color = $routeParams.colorId;
 $scope.message = 'This is ' +$routeParams.colorId +' page';

这里定义了一个colorId的模块,通过:colorId来匹配传入的参数,这里匹配到的是数组中的元素。例如/color/blue,那么匹配到的就是blue。

<

 div 
 {{message}}
 /div 

最后在colorId上呈现出来。

如果是多个参数可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的参数也一一匹配,如/color/pink/2017/3/13。

支持*号:/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的话,color将会匹配到brown,largecode将匹配到code/with/slashes。

支持 号:/color/:color/largecode/:largecode /edit可以匹配匹配/color/brown/largecode/code/edit,largecode将会匹配到code。
/color/:color/largecode/:largecode /edit可以匹配匹配/color/brown/largecode/edit,largecode将会匹配到空值。

路由中的resolve

一个最常见的情景,页面跳转时要加载一些数据。有两种方式可以做到:

页面跳转后加载,通过controller去控制数据的加载,如果时间较长则显示一个loading的界面,数据请求成功后再替换成数据界面 页面跳转前加载,通过路由的resolve去配置。

个人更喜欢跳转后加载的方式,因为更为友好,所以对resolve不太感冒,但我们还是讲下resolve。

resolve是一个map对象:

map的key是可以注入到controller的可选的依赖项,如果resolve其中依赖项的返回值是promise,那么在controller初始化之前,路由会一直等待直到所有的promise都已经resolved或者其中的一个被rejected。如果所有的promise都成功resolved,ess事件,如果其中的一个promise是rejected,那么将会触发$routeChangeError事件,并中止路由切换。 map的value如果是个字符串,那么它会是一个service的别名。如果是一个函数,他的返回值可以被当做依赖注入 到controller中,如果返回值是一个promise,在注入之前必须是resolved的。注意这时候ngRoute.$routeParams还不可用,如果需要使用参数则需要使用$route.current.params。

看下例子:

<

 html 
 head 
 meta charset="uft-8"/ 
 title /title 
 /head 
 script src="script/angular.min.js" /script 
 script src="script/angular-route.min.js" /script 
 body ng-app="ngst-news" 
 div ng-controller="MainController" 
 li ng-repeat="news in newsAarry" 
 a href="#/newsDetail/{{news.id}}" rel="external nofollow" {{news.title}} /a 
 /li 
 /ul 
 div ng-view /div 
 /div 
 /body 
 script src="news.js" charset="UTF-8" /script 
 script src="newsDetail.js" charset="UTF-8" /script 
 /html 

news.js

var news = angular.module("ngst-news", ["ngst-newsDetail"]);
news.controller("MainController", ["$scope", function ($scope) {
 $scope.newsAarry = [{"id": "1", "title": "辽宁人大副主任王阳 浙江宁波市长卢子跃被免职"},
 {"id": "2", "title": "今冬小雨缤纷,荔枝园地湿润壮旺荔枝果树,下刀环剥最狠"},
 {"id": "3", "title": "百度任原搜索渠道总经理顾国栋为市场执行总监"}];

news页面是一个新闻列表,在列表下面有个ng-view,点击新闻列表链接下面的ng-view进行路由切换。

<

{{message}}

newsDetails.js

var news = angular.module("ngst-newsDetail", ['ngRoute']);
news.config(["$routeProvider",
 function ($routeProvider) {
 $routeProvider.when("/newsDetail/:newsId", {
 ',
 controller: 'newsDetailController',
 resolve: {
 content: ['$q', '$timeout', "$route", function ($q, $timeout, $route) {
 var deferred = $q.defer();
 $timeout(function () {
 deferred.resolve('新闻详情 id=' + $route.current.params.newsId);
 }, 1000);
 return deferred.promise;
 .controller("newsDetailController", ['$scope', 'content',
 function ($scope, content) {
 $scope.message = content;
 }]);

这里使用$route.current.params来获得参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

小程序开发制作平台_angular学习之ngRoute路

公司新闻 2021-01-12
angular学习培训之ngRoute路由器体制 本文关键详细介绍了angular学习培训之ngRoute路由器体制...
查看全文

微信聊天小程序_解决AngualrJS页面改写导致

公司新闻 2021-01-12
处理AngualrJS网页页面更新造成出现异常显示信息难题 绪 老话说,关键点决策成功与失败...
查看全文

合川企业网站建设-简单的小程序引流方法

公司新闻 2021-01-11
店家有自身的手机微信微信公众号能够将微信小程序和手机微信微信公众号关系,或是是在推...
查看全文
返回全部新闻


区域站点: 南丰县微信h5小游戏   南宫市手机软件制作教程   囊谦县手机网站自助建站   南和县h5小游戏制作平台   南华县微信h5小游戏   南江县手机软件制作教程   南京市手机网站自助建站   南靖县h5小游戏制作平台   南康市微信h5小游戏   南乐县手机软件制作教程   南陵县手机网站自助建站   南宁市h5小游戏制作平台   南平市微信h5小游戏   南皮县手机软件制作教程   南市区手机网站自助建站   南通市h5小游戏制作平台   南投县微信h5小游戏   南雄市手机软件制作教程   南溪县手机网站自助建站   南阳市h5小游戏制作平台   南漳县微信h5小游戏   南召县手机软件制作教程   南郑县手机网站自助建站   那坡县h5小游戏制作平台   那曲县微信h5小游戏   纳雍县手机软件制作教程   讷河市手机网站自助建站   内黄县h5小游戏制作平台   内江市微信h5小游戏   内丘县手机软件制作教程   内乡县手机网站自助建站   嫩江市h5小游戏制作平台   聂荣县微信h5小游戏   尼玛县手机软件制作教程   尼木县手机网站自助建站   宁安市h5小游戏制作平台   宁波市微信h5小游戏   宁城县手机软件制作教程   宁德市手机网站自助建站   宁都县h5小游戏制作平台   宁国市微信h5小游戏   宁海县手机软件制作教程   宁化县手机网站自助建站   宁晋县h5小游戏制作平台   宁陵县微信h5小游戏   宁明县手机软件制作教程   宁南县手机网站自助建站   宁强县h5小游戏制作平台   宁陕县微信h5小游戏   宁武县手机软件制作教程   宁乡市手机网站自助建站   宁阳县h5小游戏制作平台   宁远县微信h5小游戏   农安县手机软件制作教程   磐安县手机网站自助建站   盘锦市h5小游戏制作平台   盘山县微信h5小游戏   磐石市手机软件制作教程   盘州市手机网站自助建站   蓬安县h5小游戏制作平台   澎湖县微信h5小游戏   蓬莱市手机软件制作教程   彭山县手机网站自助建站   蓬溪县h5小游戏制作平台   彭阳县微信h5小游戏   彭泽县手机软件制作教程   彭州市手机网站自助建站   偏关县h5小游戏制作平台   平安县微信h5小游戏   平昌县手机软件制作教程   平定县手机网站自助建站   屏东县h5小游戏制作平台   平度市微信h5小游戏   平果县手机软件制作教程   平和县手机网站自助建站   平湖市h5小游戏制作平台   平江县微信h5小游戏   平乐县手机软件制作教程   平凉市手机网站自助建站   平利县h5小游戏制作平台   平罗县微信h5小游戏   平陆县手机软件制作教程   屏南县手机网站自助建站   平泉市h5小游戏制作平台   屏山县微信h5小游戏   平顺县手机软件制作教程   平塘县手机网站自助建站   平潭县h5小游戏制作平台   平武县微信h5小游戏   萍乡市手机软件制作教程   平乡县手机网站自助建站   平阳县h5小游戏制作平台   平遥县微信h5小游戏   平阴县手机软件制作教程   平邑县手机网站自助建站   平远县h5小游戏制作平台   平舆县微信h5小游戏   皮山县手机软件制作教程   普安县手机网站自助建站   浦北县h5小游戏制作平台   浦城县微信h5小游戏   普洱市手机软件制作教程   普格县手机网站自助建站   浦江县h5小游戏制作平台   普兰县微信h5小游戏   普宁市手机软件制作教程   莆田市手机网站自助建站   迁安市h5小游戏制作平台   乾安县微信h5小游戏   潜江市手机软件制作教程   潜山市手机网站自助建站  

友情链接: 免费建站的平台 网页设计自我介绍 自助建站 搭建网站基本步骤 手机版

Copyright © 2002-2020 手机网站自助建站_h5小游戏制作平台_微信h5小游戏_手机软件制作教程_抽奖h5 版权所有 (网站地图) 备案号:粤ICP备10235580号