Angular路由单页跳转思考

最新推荐文章于 2022-08-02 11:08:12 发布

weixin_30875157

最新推荐文章于 2022-08-02 11:08:12 发布

阅读量155

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/yishichangan925/p/7670405.html

版权

做项目的时候涉及到了这部分内容，于是查找了一些资料，理清了一些基础的部分知识。

简单来说AngularJS就是通过改变location地址来实现加载不同的页面内容到指定位置

比如：

https://www.baidu.com/#/music

https://www.baidu.com/#/food

https://www.baidu.com/#/cool

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (https://www.baidu.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。每个 URL 都有对应的视图和控制器。

(a)引用路由功能，需要先单独再引用 angular-route.js 文件——ng-app（angualar作用范围）

(b)在定义module时也需要添加对'ngRoute'的依赖——angular.module('xxxx', ['ngRoute'])

(c)使用 ngView 指令。

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。

第二个参数是路由配置对象。

相关的指令涉及：

ui.router 路由模块名
$urlRouterProvider 服务提供者，用来配置路由重定向
$stateProvider 服务提供者，用来配置路由
$urlRouter 服务
$state 服务，用来显示当前路由状态信息，以及一些路由方法（如：跳转）
$stateParams 服务，用来存储路由匹配时的参数
ui-view 指令，路由模板渲染，对应的 dom 相关联
ui-sref 指令，链接到特定状态

创建路由先引用路由功能，需要单独再引用 angular-route.js 文件，再调用 $stateProvider.state(...) 方法

"use strict";

angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

$stateProvider.state('main',{

url:'/main',

templateUrl:'view/main.html',

controller:'mainCtrl'

});

ps; templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容

引用链接：http://blog.csdn.net/u011127019/article/details/73658606

转载于:https://www.cnblogs.com/yishichangan925/p/7670405.html

weixin_30875157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular路由单页跳转思考

做项目的时候涉及到了这部分内容，于是查找了一些资料，理清了一些基础的部分知识。简单来说AngularJS就是通过改变location地址来实现加载不同的页面内容到指定位置比如：https://www.baidu.com/#/musichttps://www.baidu.com/#/foodhttps://www.baidu.com/#/cool当我们点击以上的任意一个链接时...
复制链接

扫一扫