分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

AngularJS路由

发布时间:2023-09-06 01:25责任编辑:董明明关键词:AngularAngularJS

 AngularJS路由允许我们通过不同的url访问不同的内容,AngularJS中是通过 #+标记。

   #符号之后的内容在线服务端请求的时候会被浏览器忽略。所以我们就需要在客户端实现#号后面内容的功能实现。AngularJS就是通过#+标记帮助我们欺负不同的逻辑页面并将不同的页面绑定到对应的控制器上。

    $routeprovider为我们提供了when(path,object)&otherwise(object)函数按照顺序定义了多元路由,函数包含两个参数:第一个参数是url或是是url正则表达式;第二个蚕食是路由配置对象。

 路由配置对象

  路由配置对象的语法规则如下:

$routeProvider.when(url,{

template:string,//如果我们只需要在ng-view中插入简单的HTML内容,就使用fail参数,如when(‘/computers‘,{templte:‘this is computer page‘})

templateUrl:string,//如果在ng-view中插入的不是简单HTML标签,而是复杂的内容,就可以使用该参数在ng-view中插入一个HTML模板文件。如$routeProvider.when(‘/computers‘,{templateUrl:‘views/computers.html‘})

contorller:string,function or array,//在当前模板山执行controller函数,生成新的scope。

contorllerAs:string,//为controller指定别名

redirectTo:string,function,//重新定向的地址

resolve:object<object,function>//指定当前controller所依赖的其他模块。

<html><head><meta http-equiv="content-type" content="text/html charset=UTF-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script><script type="text/javascript">var app=angular.module("app",[‘ngRoute‘]);app.contoller("homeController",function($scope,$route){$scope.$route=$route;})app.controller("aboutCntroller",function($scope,$route){$scope.$route=$route;})app.cofig(function($routeProvider){$routeProvider.when(‘/home‘,{ ???templateUrl:‘embedded.home.html‘‘, ???contorller:‘HomeController‘}).when(‘/about‘,{ ???templateUrl:‘embedded.about.html‘, ???controller:‘AbourController‘}).otherwise(redirectTo:‘/home‘);});</script></head><body ng-app="app" class="ng-scope"><script type=‘text/ng-template‘ id="embedded.home.html"><h1>Home</h1></script<script type=‘text/ng-template‘ id="embedded.about.html"><h1>About</h1></script><div><div id="navigation"><a href="#/home"></a><a href="#/about"></a></div><div ng-view=""></div></div></html>
AngularJS路由实例

});

AngularJS路由

原文地址:http://www.cnblogs.com/VARForrest/p/7840362.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved