[北京|结业弟子]JS-李仁|2017年05月10日的日报-技能树.IT修真院

发表于： 2017-05-10 23:54:05

2 952

今天完成的事情：

学习了ngRoute来完成单页面的跳转；这个单页面跳转还是比较有好处的：按照我们以前的思路做页面跳转都是

些一个html然后用a标签去跳转到另一个页面；这样的话每个页面做一个html，通过路由进行跳转，不仅在时间上

会有延迟，在某些特殊的浏览器（最典型的如微信内置浏览器）中，跳转过程中会出现短暂的白页。因此，我们在

开发过程中，将页面逻辑封装到同一个html中。当系统第一次加载页面时，将所有页面全部加载进去，然后通过

angularJS内置的路由进行加载；这样效率相对来说就会高出很多；

<body ng-app="myApp">
   <div class="head">
       <h3>萝卜多后台管理系统</h3>
       <h4>超级管理员<button>退出</button></h4>
   </div>
   <div class="content">
<div class="left">
    <ul>
        <li><a href="#/welcome">公司列表</a></li>
        <li><a href="#/list">新增信息</a></li>
        <li><a href="#/add">上传图片</a></li>
    </ul>
</div>
<div class="right"ng-view=""></div>
   </div>
<script src="../angular-1.4.6/angular.min.js"></script>
   <script src="../angular-1.4.6/angular-route.js"></script>
   <!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->
   <!--<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>-->
<script src="app.js"></script>
</body>
</html>

首先要在body中ng-app声明 body元素是 AngularJS 应用程序的"所有者"。

当我们点击a标签中的任意一个链接时，向服务端请的地址都是一样的。因为 # 号之后的内容在向服务端请求时

会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记

帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。然后用 ngRoute 模块作为主应用模块的依

赖模块。

对了，还要引入angular js文件和route.js;我把晚间下载到本地了，使用cdn链接引入也是可以的，如下：

好像还有其他的引入方式；

然后引入自己的js文件app.js；

angular.module('myApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
  .when('/welcome',{template:'公司列表'})
   .when('/list',{template:'公司信息'})
   .when('/add',{template:'图片上传'})
   .otherwise({redirectTo:'/welcome'});
    }]);