首页 技术 正文
技术 2022年11月20日
0 收藏 920 点赞 2,649 浏览 1754 个字

  在开讲之前,首先谈谈APP应用。平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦。但是当我们用一般的html页面做移动端,简单时候我们可以用<a href=””></a>这样的标签去链接页面时,速度还是可以的。

  但是当我们的应用越来越多时,切换起来没那么流畅。又是碍于网速,页面加载进来有点慢。但是在angular里面,我们可以用路由进行切换。因为在angular里面,我们用户一般在加载这样的应用时,会整个的缓存在手机上。我们用路由进行切换时,不用再发起HTTP请求了。体验比原来好。

  一般我们的路由结构是这样的。

  

 1     <script>
2 angular.module('app',[])
3 .config('$routeProvider',function ($routeProvider) {
4 $routeProvider
5 .when('/',{
6 templateUrl:'view/home.html',
7 controller:'homeCtrl'
8 }
9 )
10 .when('/',{
11 templateUrl:'view/home.html',
12 controller:'homeCtrl'
13 }
14 )
15 .when('/',{
16 templateUrl:'view/home.html',
17 controller:'homeCtrl'
18 }
19 )
20 .ontherwise({
21 redirective:'/'
22 })
23 })
24 </script>

上边代码中,

config函数是一个配置函数。在使用
$routeProvider这样的一个服务。
when:代表当你访问这个“/”根目录的时候 去访问 templateUrl中的那个模板。 controller可想已知,就是我们配套的controller,就是应用于根目录的这个 模板时的controller。
ontherwise 就是当你路径访问错误时,找不到。最后跳到这个默认的 页面。 

  一般在我们的index.html会有这么的一段代码

<header>
<h1>Header</h1>
</header>
<div class="content">
<div ng-view></div>
</div>
<footer>
<h5>Footer</h5>
</footer>

  <div ng-view></div>   这里面呢。就是我们注入的某个模板(template) 例如:<div ng-view=“tpl/abc.html”></div> 就相当于注入叫做abc.html的模板。ng-view这个指令优先级是1000的终极指令。就是说权限很高。

  在注入这个abc.html的模板的时候。我们一般都用了路由设置,路由相当于一个遥控器。这个ng-view就是一部电视机。如果某个模板同当前的路由相关联:
1 创建一个新的作用域;(用路由(遥控器)打开某个电视台)
2 移除上一个视图,同时上一个作用域也会被清除;(换台,什么都没了)
3 将新的作用域同当前模板关联在一起;(电视机播放新的电视台)
4 如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来;
5 触发$viewContentLoaded事件;
6 如果提供了onload属性,调用该属性所指定的函数。

    $location 服务
AngularJS提供了一个服务用以解析地址栏中的URL,并让你可以访问应用当前路径所对应
的路由。它同样提供了修改路径和处理各种形式导航的能力。
  我们一般比较常用的:
 1. path()
  path() 用来获取页面当前的路径:
  $location.path(); // 返回当前路径
  修改当前路径并跳转到应用中的另一个URL:
  $location.path(‘/’); // 把路径修改为 ‘/’ 路由
  2. replace()
  如果你希望跳转后用户不能点击后退按钮(对于登录之后的跳转这种发生在某个跳转之后的
  再次跳转很有用), AngularJS提供了replace() 方法来实现这个功能:
  $location.path(‘/home’);
  $location.replace();
  // 或者
  $location.path(‘/home’).replace();

。。。。。。后续

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,964
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,486
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,331
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,114
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,747
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,781