angularjs博客的制作（一） | blog of purplebamboo

文章目录

这个系列希望通过一个博客的例子，介绍下angular的大部分使用方法。当然会介绍的比较浅，属于入门级别的。本篇是系列第一部分，实现列表功能。

html代码如下：

<!doctype html>
<html ng-app=posts>
  <head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script type="text/javascript">
    var Post = angular.module('posts',[]);
 
    Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];
    }]);
    </script>
  </head>
  <body>
    <div ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">       
        <ul class="list">
          <li ng-repeat="post in list">
            <span style="color:#000;font-size:20px;">{{post.title}}</span>
            <div>{{post.content}}</div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

看起来还是很简单的吧

我们一个个来看

首先注意到 21行 <div ng-app="posts">
之前讲过了 ng-app 代表项目开始遍历的根节点。这边后面跟了个 posts，这是什么意思呢？这边的posts被称之为 moudel，模块的概念。angular模块式很重要的概念，这边先不展开讲。只要知道当前的页面应用都被这个叫posts的模块来管理就行了。

我们再看看js代码第7行 var Post = angular.module('posts',[]); 这边就是生成了一个新的模块了，也就是之前ng-app引用的模块。后面的[]可以引用依赖的其他模块。

第9行 Post.controller('postCtrl', ['$scope', function($scope) { 是比较重要的一个环节，模块具有controller方法用于生成一个控制器。$scope对象可以理解为当前的执行环境，在这个上面注册的数据（属性值，方法）都可以直接在模板里面使用{{}}引用。可能有人对这边的这种 ['$scope', function($scope) {写法不理解，实际上那段代码可以写成下面这样：

Post.controller('postCtrl', function($scope) {
        $scope.list = [{
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];
    });

angular会自动将当前的$scope注入到当前的控制器的函数里。angular必须确保你的参数名是$scope才能正确的注入，而一些打包压缩工具会自作聪明的自动的把函数的参数替换称a，b这些。所以稳妥的做法是这样写，['$scope', function(任何名字) { 这样angular会通过数组第一个名字去注入你的参数。

接下来看23行，使用了ng-controller="postCtrl"声明当前节点的子节点都使用 postCtrl这个控制器。

25行 ng-repeat="post in list" 显而易见就是个遍历器类似for in的写法输出数据。

整个列表页就这样完成了。

下面我们增加搜索的功能。我们只需要修改点html就行了。

代码如下：

<body>
    <div ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">   
      <input type="text" ng-model="search" class="search" placeholder="Search">    
        <ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">{{post.title}}</span>
            <div>{{post.content}}</div>
          </li>
        </ul>
      </div>
    </div>
  </body>

第5行我们增加了一个 input，将它的值绑定到当前环境对象$scope上。然后在ng-repeat 后面的表达式上加上 | filter:search告诉angular这边根据search值的变化而进行筛选。很好理解吧。

至此基本的列表功能完成，下章开始增加增删改的功能。

我们再增加些简单的css，最后的代码如下：

<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script type="text/javascript">
    var Post = angular.module('posts',[]);
 
    Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];
    }]);
    </script>
    <style type="text/css">

    .wrap{
      margin: 0 auto;
      width: 500px;
    }
    .search{
      border-radius: 5px;
      border: 1px solid #999;
      width: 200px;
    }
    .list{
      width: 200px;
      padding-left: 0px;
    }
    .list li{
      list-style: none;
      margin-bottom: 20px;
      color: #000;
      width: 300px;
    }
    .list li span{
      color: #666;
      font-size: 16px;
      font-weight: bold;

      
    }
    .list li div{
      padding-top: 10px;
      color: #999;
      font-size: 14px;
    }


    </style>
  </head>
  <body>
    <div class="wrap" ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">   
      <input type="text" ng-model="search" class="search" placeholder="Search">    
        <ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">※{{post.title}}</span>
            <div>{{post.content}}</div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>