AngularJS实现路由以及去掉自带的#号

学习AngularJS又中断了一段时间，因为。。。。。年底忙啊！！！自己懒啊！！！！
算了，纠结这些都无果，不如，来个重新开始！昨天看了下AngularJS的路由部分，网上搜索的文章讲的都非常详细，所以，我这一片就来讲讲自己是如何一步一步是实现的吧！至于原理部分，我会分享几篇我参考的博文教程的！所以，我们今天主要讲讲实现，哎，原理等着深入了再去琢磨吧~先会用再说！

PS: 这部分一定要放到 服务器下，才能看到效果！！页面路由的嘛~~

实现AngularJS路由

AngularJS 路由部分有两种实现方法，一种是基于本身的 ngRoute，另外一种是使用 ui-router ，第二种我们后面介绍，今天的都是基于 ngRoute。

step 1 先来个基础页面

AngularJS比较适合做单页面应用，我所理解的单页面应用，就是一个项目的所有页面和功能实际都在一个页面展示，那么页面之间的逻辑，AngularJS提供了路由来实现跳转，一般之前用jQuery则是将当前需要的部分展示，其他部分暂时隐藏，等到需要切换的时候，再去设置显示隐藏，以及事件绑定等步骤。

那么这里的基础页面，实际上就是把各个页面的内容，填充进来的一个容器，我们展示给用户的，一直都是这个基础页面。AngularJS中，我们可以通过为标签添加 ng-view 属性来实现，如

或者 。我们在基本页面中，需要引入 angular.js, angular.route.js文件。除了作为AngularJS 标记的ng-app声明，还需要一个容器来加载其他的页面，那么index.html 的代码如下：

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />

  <!-- SPELLS -->
  <!-- load angular via CDN -->
  <script src="../js/libs/angular.js"></script>
  <script src="../js/libs/angular-route.min.js"></script>
  <script src="../js/libs/angular-animate.min.js"></script>
  <script src="app.js"></script>

  <base href="/Angular/router-animation/">
</head>

<!-- apply our angular app -->
<body ng-app="animateApp">

  <!-- inject our views using ng-view -->
  <!-- each angular controller applies a different class here -->
  <div class="page " ng-view></div>

</body>
</html>

step 2 定义路由表

在app.js 中，使用AngularJS提供的 $routeProvider，我是用这个服务，需要先引入。
他又两个方法，when (当有匹配地址的时候，如何跳转) 和 otherwise（当地址都不匹配的时候，如何跳转）

when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，像这样：{name : tom}。我们也可以用进行模糊匹配，如：/show/:name将匹配/showInfo/tom。—- 引用自 吕大豹博客园博客 走进AngularJs(八) ng的路由机制。这部分的使用我还不是很透彻，所以直接用了人家的介绍，还要在以后的使用中慢慢理解。

这部分涉及的参数并不多，具体代码，如下：

JavaScript

var animateApp = angular.module('animateApp', ['ngRoute']);

animateApp.config(function($routeProvider, $locationProvider) {
  $routeProvider

    .when('/', {
      templateUrl: 'page-home.html',
      controller: 'mainController'
    })
    // home page
    // .when('/home', {
    //   templateUrl: 'page-home.html',
    //   controller: 'mainController'
    // })

    // about page
    .when('/about', {
      templateUrl: 'page-about.html',
      controller: 'aboutController'
    })

    // contact page
    .when('/contact', {
      templateUrl: 'page-contact.html',
      controller: 'contactController'
    })

    // otherwise
    .otherwise({
      redirectTo: "/"
    });
});

需要注意ngRoute 的引入！！

step 3 其他的子页面

然后，我们就需要建立其他需要的子页面，这部分还要注意页面的路径要和 配置的路由表中保持一致！！

具体代码，我这部分是参考的 Animating AngularJS Apps: ngView。这部分还添加了 ngAnimate 部分实现页面切换的动画效果，其实，这因为， ng-view支持ngAnimate,
当切换子页面的时候，会自动添加 ng-enter ，ng-leave 类，来显示和隐藏页面！我们需要做的就是，引入 angular.animate.js 以及设置css 动画效果的类即可！！

去掉url中的 ‘#’

AngularJS 默认使用路由会添加# 在地址栏！需要引入服务 $localProvider

step 1 app.js 路由配置下，需要添加一句

JavaScript

animateApp.config(function($routeProvider, $locationProvider) {
$routeProvider

  .when('/', {
    templateUrl: 'page-home.html',
    controller: 'mainController'
  })
  // home page
  // .when('/home', {
  //   templateUrl: 'page-home.html',
  //   controller: 'mainController'
  // })

  // about page
  .when('/about', {
    templateUrl: 'page-about.html',
    controller: 'aboutController'
  })

  // contact page
  .when('/contact', {
    templateUrl: 'page-contact.html',
    controller: 'contactController'
  })

  // otherwise
  .otherwise({
    redirectTo: "/"
  });

  // use the HTML5 History API
  $locationProvider.html5Mode(true);
});

step 2 在我们的基础页面 之前添加一句 。这里要注意的是href里面的地址，需要相对你自己的项目目录！！

总结

总算是记录了一下自己的经历，可以看到，我现在只是大致知道如何去使用了，原理就别提了！
还要在今后的使用中，去学习和体会！！

还有，我要坚持写博客哦！把自己学习到的东西，进行谨慎的思考，然后再总结出来分享给大家！！

参考内容

  1. Animating AngularJS Apps: ngView
  2. 走进AngularJs(八) ng的路由机制
  3. AngularJS去掉的URL里的#号
  4. AngularJS 中的友好 URL —— 移除URL 中的 #