首页 > 软件开发 > JavaScript >

AngularJS中的路由使用及实现代码

来源:互联网 2023-03-16 23:57:29 413

AngularJS 路由允许通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。twR办公区 - 实用经验教程分享!

工具/原料

  • JavaScript

方法/步骤

  • 1

    1.1 Angular JS路由基础知识讲解twR办公区 - 实用经验教程分享!

    在AngularJS中使用路由:twR办公区 - 实用经验教程分享!

    1. 导入路由文件:angular-route.jstwR办公区 - 实用经验教程分享!

    2. 在主模块中注入"ngRoute"。twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 2

    3. 将超链接改写为路由格式。 --> "#/标记"twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 2该信息未经授权抓取自百度经验
  • 3

    4. 在页面的合适位置,添加ng-view,用于承载路由打开的页面: twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 4

    5. 在config配置阶段,注入$routeProvider,进行路由配置:twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 5

    AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,请求把$routeProvider注入到配置函数并且使用$routeProvider.whenAPI来定义路由规则。twR办公区 - 实用经验教程分享!

    $routeProvider 提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:twR办公区 - 实用经验教程分享!

    第一个参数是 URL 或者 URL 正则规则。twR办公区 - 实用经验教程分享!

    第二个参数是路由配置对象。twR办公区 - 实用经验教程分享!

    1.2.1路由设置对象twR办公区 - 实用经验教程分享!

    AngularJS 路由也可以通过不同的模板来实现。twR办公区 - 实用经验教程分享!

    $routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。twR办公区 - 实用经验教程分享!

    路由配置对象语法规则如下:twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 6

    1.2.2参数说明twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 7

    2.1 自定指令twR办公区 - 实用经验教程分享!

    AngularJS允许用户自定义指令!!twR办公区 - 实用经验教程分享!

    例如: div ng-view>/div> 或 ng-view>/ng-view>twR办公区 - 实用经验教程分享!

    1. 使用.directive()声明一个自定义指令;twR办公区 - 实用经验教程分享!

    2. 定义指令时,指令名必须使用驼峰命名法; 而调用指令时,用"-"链接twR办公区 - 实用经验教程分享!

    .directive("huangGe") --> huang-ge>huang-ge>.directive("huangge") --> haungge>huangge>twR办公区 - 实用经验教程分享!

    3. 定义指令时,对象中使用的属性:twR办公区 - 实用经验教程分享!

    ① template: 调用指令时,生成的模板② restrict: 用于声明指令允许的调用方式:twR办公区 - 实用经验教程分享!

    E->允许标签名表明 A->允许属性调用 C->允许类名调用 M->允许注释调用twR办公区 - 实用经验教程分享!

    默认值为:EAtwR办公区 - 实用经验教程分享!

    如果需要注释调用,必须再添加一个属性:replace:true,而且注释调用前必须添加"directive:" eg:!-- directive: huang-ge-->twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 8

    3.1 实例twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

    AngularJS中的路由使用及实现代码twR办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!twR办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码