一起学Angular

发表于

以前用过React, 觉得Facebook出的这玩意确实不错,
也涉及到一些 其他模块也相应的使用过.

react-router, react-reduex, whatwg-fetch, es6-promise
等,

然后由于react的主要思想就是组件化, 单向数据流等等. 所有突然想体验下双向数据流, 而且之前有后台(Java)开发经验,所以上手Angular很快, Spring可是个好东西, AOP, IoC, DI等等, 更引起我注意的是Spring中的好多思想居然也在Angular中出现, 所以才想去玩玩Angular的.

设计到的技术点

  1. Angular1.x版本
  2. Semantic-ui
  3. jQuery
  4. Mockjs

先看效果图

也可访问我的网站index.html

文件结构很简单

代码很简单.

  1. app.js 就一行代码:

    1
    var app = angular.module("myApp", []);

  2. index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Angular学习</title>
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
  </head>
  <body ng-controller="indexController">

    <div class="ui container" style="padding:50px">
      <div class="ui dividing header">Welcome!</div>
      <div class="ui grid">
        <div class="eight wide column">
          <!-- <div class="ui left icon focus action input"> -->
          <div class="ui left icon focus input">
            <i class="ui search icon"></i>
            <input type="text" placeholder="搜索" ng-model="searchKey"/>
            <!-- <div class="ui blue button">搜索</div> -->
          </div>
        </div>

        <div class="eight wide column">
          <div class="ui fluid selection dropdown" id="select">
            <i class="dropdown icon"></i>
            <div class="default text">选择排序方式</div>
            <div class="menu">
                <div class="item" ng-click="chageSortType('stuIndex')">按学号排序</div>
                <div class="item" ng-click="chageSortType('age')">按年龄排序</div>
                <div class="item" ng-click="chageSortType('grade')">按成绩排序</div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui segments">
        <div class="ui segment" ng-repeat="item in items | orderBy:sortType | filter:results">
          <div class="ui item">
            <div class="ui padded content">
              <div class="ui header">
                学号:
                <span style="background:{{ item.color }}" ng-bind="item.stuIndex"></span>
              </div>
              <div class="ui meta">姓名: <span ng-bind= "item.name"></span></div>
              <div class="ui meta">年龄: <span ng-bind= "item.age"></span></div>
              <div class="ui meta">成绩: <span ng-bind= "item.grade"></span></div>
              <div class="ui description">城市: <span ng-bind= "item.city"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
  <script src="https://cdn.bootcss.com/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>
  <script src="http://mockjs.com/dist/mock.js"></script>
  <script src="./app.js" charset="utf-8"></script>
  <script src="./indexController.js" charset="utf-8"></script>
</html>
  1. indexController.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//利用Mock截获ajax请求所返回的数据.
var data = Mock.mock("http://daejong.com/getItems", {
  'items|100': [{
    'stuIndex|+1': 2120142000, //从2120142000开始
    'name': '@cname', //中文名字
    'age|18-28': 0,   // 18至28以内随机整数, 0只是用来确定类型
    'city': '@city(true)',   // 中国城市
    'color': '@color',  // 16进制颜色
    'grade|60-100': 0,   // 18至28以内随机整数, 0只是用来确定类型
  }]
});

// 激活下拉菜单
$('#select').dropdown();

//设置控制器
app.controller("indexController", ["$scope", "$http", function($scope, $http) {
  $scope.color = "";
  $scope.items = [];
  $scope.searchKey = "";
  $scope.sortType = "";

  $http.get("http://daejong.com/getItems").success(function(res){
    $scope.items = res.items;
  })

  $scope.chageSortType = function(type) {
    $scope.sortType = type;
  };

  $scope.results = function(val) {
    return val.name.indexOf($scope.searchKey) != -1 || val.city.indexOf($scope.searchKey) != -1;
  }

}]);

小结.

  • 该例子中我用到的mockjs工具, 这是我第一次使用该工具, 简直是好用到爆, 前端必备啊, 自定义数据的格式, 就可以帮我们生成想要的数据, 生成随机数据，拦截 Ajax 请求.
  • 还有就是view层框架-Semantic-ui, 可能有的同学习惯于用BootStrap, 但是我还是要推荐下Semantic-ui这个框架, 主要被它的语义化标签所吸引, 使用起来很爽哦, 如<div class="ui inverted blue button">登录</div>就参加一个镂空颜色反转的按钮, 具体的可以去它的官方文档看看,
  • 还有就是Angular的, 数据的双向绑定, 以及类似Spring中DI(依赖注入)的思想确实不错, 比如注入$scope, $http等等, 还有就是该例子中的搜索框和下面的数据列表的双向绑定, 很好用哦! 以及Angular提供的过滤器, 自定义过滤器, 标签等等, 蛮好用的.

好了, 懂得不是很多, 期待大牛指导学习, 嘿嘿😜