NLifeBill第三章Angularjs使用

这一节主要记录NLifeBill里面有关Angularjs的使用，

阅读目录：

　　1.项目目录介绍
　　2.angularjs详细配置
　　3.后端处理
　 

项目目录介绍

下面是整个项目的整理目录结构：

因为angular我用的是最新的1.2.13。有些内容是分开了，所以我保留了整个文件夹在js文件夹下，而我自己的控制器文件就直接放在了js文件夹下。网上很多都说要按照规范来，或者使用requirejs等等，我一直觉得小项目这样反而复杂了，只有大的项目这样才会有显著的效果，还一方面我也是比较懒所以就随性一点。

这里介绍下结构，视图引擎我使用的是EJS，然后我把后缀改成了.html这样写代码的时候更好识别，.ejs的文件识别起来不方便。

1.header.html           模板文件的头部，这里引用相关css
2.footer.html           模板文件的尾部，这里引用相关的js
3.login.html            登录视图
4.index.html            主视图，angularjs也就是主要在这个地方发挥作用，ng-app和ng-view就写在这个文件里面
5.part                  文件夹，这里面主要是angularjs的分部视图文件

 

angularjs详细配置

所有的相关js文件都在footer.html中引用，如：

<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/angular/angular.min.js" type="text/javascript"></script>
<script src="/js/angular/angular-route.min.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/js/controllers.js" type="text/javascript"></script>
<script src="/js/rili.js" type="text/javascript"></script>
<script src="/js/public.js" type="text/javascript"></script>

然后在index中分别引入header.html和footer.html文件。所有的操作都是在index.html中的。根据地址栏不同切换不同的视图：

<%- include header.html %>

<div ng-app='lbApp'>

<!--导航-->
<div class="n-navbar">
  <div class="container">
    <div class="navbar-header">
      <a href="../" class="navbar-brand">LifeBill</a>
    </div>
    <nav class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#/">日历</a>
        </li>
        <li>
          <a href="#/month">月总额报表</a>
        </li>
        <li>
          <a href="#/month">月分类报表</a>
        </li>
        <li>
          <a href="#/month">季度类报表</a>
        </li>
        <li>
          <a href="#/month">周报表</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="../about">登出</a>
        </li>
        <li>
          <a href="../about">关于</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!--分部视图-->
<div class="n-view container" ng-view>

</div>

</div>

<%- include footer.html %>

然后就是我的controllers.js文件了，我就只分了一个文件目前，所有的和angularjs有关的代码都在这里面：

//整个项目的内容页是单页
var app = angular.module('lbApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    //定义路由
    $routeProvider
        .when('/', { templateUrl: 'part/rl', controller: 'rlctrl' })
        .when('/month', { templateUrl: 'part/month', controller: 'monthctrl' })
        .when('/add/:year/:month/:day', { templateUrl: 'part/add', controller: 'addctrl' })
        .when('/upd/:id', { templateUrl: 'part/upd', controller: 'updctrl' })
        .otherwise({ redirectTo: '/' });

}]);

//日历分部视图的控制器
app.controller('rlctrl', ['$scope', '$http', function($scope, $http){

}]);
................................

这里要说下每个路由对应一个分部视图，这里的var app = angular.module('lbApp', ['ngRoute']);里面的ngRoute在angularjs版本1.2.*之前的时候是不用注入的，它就angularjs文件里面，但是从1.2.*以后的版本此功能移出为一个单独的文件了，如果想使用的话要额外引入此angular-route.min.js文件并且注入进来。每个控制器控制着一个分部视图。分部视图如日历视图：

<link rel="stylesheet" href="/css/rili.css" />

  <div ng-controller="rlctrl">
    <div id="Rili"></div>

    <script>
    $(function(){
        $("#Rili").showrili({ url: "/getRl" });
    });
    </script>
  </div>

后端处理

前台的angularjs的路由配置好了之后后端的路由也要配置，以便在切换的时候能做出响应。常用方式：

module.exports = function(app){
        .............................

    //处理angularjs分部视图
    app.get('/part/:filename', function(req,res){
        var filename = req.params.filename;
        if(!filename) return; // might want to change this
        res.render("part/" + filename);
    });

};    

因为每次前端切换视图都是会请求服务器的，所以服务器也要做出及时的响应。

这里我要说明下，我写的这些文章我从来没有提交到博客园首页上面，我主要是为了自己看，我不是自私，是因为我这人记忆力不好这些我都是记录下来日后自己可以回头看看自己当时的想法，而且我这人也比较懒，所以写的很乱也就我能看懂吧。尤其是这个有关NLifeBill系列的。如果你不小心看到了我的这些笔记，你可以一笑而过，不必在意。