node（6）angular介绍

一、angular 的介绍

AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的框架。它可通过 <script> 标签添加到HTML 页面。

AngularJS 通过 指令 （directive）扩展了 HTML，且通过 表达式{{}} 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

库和框架的区别

类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore react vue等

下载angular.js文件

http://cdn.code.baidu.com/ 百度静态资源库

https://angularjs.org/ angular 官方网站 1.x版本的网站

https://angular.io/    2.x  4.x 网站

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
       <h1>{{5+6}}</h1>
     <script type="text/javascript">
       var app = angular.module("app",[]);
     </script>
</body>
</html>

提示：①angular当中有指令之说，ng-XX开头 ，ng代表的是angular的缩写；

②ng-app:这个指令一般是放在HTML标签这里，它暗示着整个静态页面是一个单页面应用；

这个页面当中只能有一个ng-app指令；ng-app = “app”,这个应用的名称

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

Angular.js文件对外暴露了一个angular的对象，这个对象有一个方法叫做module（“应用的名称”，[]）

数组当中第二个参数是数组，代表的是你这个应用的依赖；

④模板表达式：{{}},这里面可以写一些简单的数学运算。+ - * / 表达式 不能为变量、if、for这些不行

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
       <h1>{{6+6+6}}</h1>

      <div ng-controller="Mainctr as mc">
            <h1>{{mc.name}}</h1>
            <button ng-click="mc.add()">Add</button>
            <h2>{{mc.age}}</h2>
            <button ng-click="mc.minus()">minus</button>
       </div>
     <script type="text/javascript">
       //angular对象打点module方法  应用的名称  数组暂时为空，它代表的含义是你这个应用需要的依赖的模块
       var app = angular.module("app",[]);
        //app对象打点使用controller函数：会创建一个控制器类 ，还有一个还有一个函数你可以认为初始化函数
       app.controller("Mainctr",[function () {
             this.name = "小明";
             this.age = 10;
             //添加方法 加的方法
             this.add = function  (argument) {
                 this.age+=10;
             }
            //减的方法
             this.minus = function  (argument) {
                 this.age-=10;
             }
       }])

     </script>
</body>
</html>

提示：①返回的app对象它有一个方法叫做controller(“MainCtr”,[function(){

}])；它相当于一个类

②如果你想实例化这个类的实例必须要用  ng-controller指令：全部的指令都是嵌套在标签之中

③实例对象的时候 MainCtr as mc

④ng-click = “”;需要添加引号

总结：刚才全部的操作，你会发现，咱么根本就没有操作dom，你会发现数据发生变化，视图跟着发生变化

数据发生变化-视图发生变化

<h1>{{1+2}}</h1>
     <div ng-controller="Mainctr as mainctr">
          <button ng-click="mainctr.add()">add</button>
          <span>{{mainctr.a}}</span>
          <button ng-click="mainctr.minus()">minus</button>
          <div class="box" ng-style={'width':mainctr.a+"px"}>
          </div>
          <span ng-style={"font-size":mainctr.a+"px"}>123</span>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        //声明一个控制器的一个类
        app.controller("Mainctr",[function  (argument) {
              this.a = 10;
              //添加ADD方法
              this.add = function  (argument) {
                   this.a +=10;
              }
              //添加一个减的方法
              this.minus = function  (argument) {
                  this.a-=10;
              }
        }])
    </script>

提示：玩的是‘数据’。ng-style可以设置样式，但是需要注意的是value是一个JSON

数据的双向绑定

<div ng-controller="MainCtr as mainctr">
          <h4>{{mainctr.a}}</h4>
          <!-- 数据的双向绑定 -->
          <input type="text" ng-model="mainctr.a">
          <!-- 是否购买保险 -->
          <p>
             是否买保险：<input type="checkbox" ng-model="mainctr.b">
             {{mainctr.b?"买保险":"滚蛋"}}
          </p>
          <!-- 性别 -->
          <p>
            <input type="radio" value="男" ng-model="mainctr.sex">男
            <input type="radio" value="女" ng-model="mainctr.sex">女
            <input type="radio" value="未知" ng-model="mainctr.sex">未知
            <span>{{mainctr.sex}}</span>
          </p>
          <!-- range条 -->
          <p>
           <input type="range" min="0"  max="255" ng-model="mainctr.range"/>
{{mainctr.range}}
          </p>
    </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
                 this.a =123;
                 this.b = true;
                 this.sex = "未知";
                 this.range = 20;
        }]);
    </script>

提示：数据的双向绑定是通过ng-model进行数据的双向的绑定；

调色板

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">
        .box{
             position: relative;
             width: 200px;
             height: 200px;
             background:pink;
        }
    </style>
</head>
<body>
    <div ng-controller="MainCtr as mainctr">
        <div class="box" ng-style="mainctr.getRGBA()">

       </div>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.R">
           <span>{{mainctr.R}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.G">
           <span>{{mainctr.G}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.B">
           <span>{{mainctr.B}}</span>
       </p>
        <p>
           <input type="range" min="0" max="255" ng-model="mainctr.A">
           <span>{{mainctr.A}}</span>
       </p>
    </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
                //双向绑定的数据RGBA
                this.R = 0;
                this.G = 0;
                this.B = 0;
                this.A = 0.5;

                //添加一个RGBA的方法
                this.getRGBA = function  (argument) {
                    return {"background":"rgba("+this.R+','+this.G+','+this.B+','+this.A+")"}
                }
        }]);
    </script>
</body>
</html>

微博的发布框

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">
        .waring{
             color:red;
        }
    </style>
</head>
<body>
      <div ng-controller="MainCtr as mainctr">
          <textarea rows="20" cols="20" ng-model="mainctr.content">

          </textarea>
          <p>
           共<span ng-class="{'waring':mainctr.content.length>=140}">{{mainctr.content.length}}</span>/140个字
           <button ng-disabled="mainctr.content.length>=140">发布</button>
         <button ng-disabled="mainctr.content.length==0" ng-click="mainctr.clear()">清空</button>
          </p>
      </div>
      <script type="text/javascript">
        var app = angular.module("app",[]);
        app.controller("MainCtr",[function  (argument) {
            this.content = "";
            this.clear = function  (argument) {
                 this.content = "";
            }
        }]);
      </script>
</body>
</html>

ng-repeat循环

概述：在angular当中标签部分，可以用ng-repeat你可以认为是for循环；

<!DOCTYPE html>
<html lang="en" ng-app = "app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
</head>
<body>
     <div ng-controller="Mainctr as mainctr">
           <ul ng-repeat="item in mainctr.hobby">
               <li>{{item.name}}</li>
           </ul>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);

        app.controller("Mainctr",[function  (argument) {
           this.hobby = [{"name":"小明"},{"name":"大明"},{"name":"老明"}];
        }]);
    </script>
</body>
</html>

小小学生管理系统

<!DOCTYPE html>
<html lang="en" ng-app = "app">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/angular.js"></script>
    <style type="text/css">

      table,tr,td{
         border:1px solid black;
         border-collapse:collapse;
      }
      tr:nth-child(2n){
        color:purple;
      }
      .addStudent{
          position: fixed;
          top: 0;
          right: 10px;
      }
    </style>
</head>
<body>
     <div ng-controller="Mainctr as mainctr">
        <div>
         <table>
            <tr>
                  <td>学号</td>
                  <td>姓名</td>
                  <td>年龄</td>
                  <td>性别</td>
                  <td>删除</td>
            </tr>
            <tr ng-repeat="item in mainctr.students track by $index">
                <!-- 学号 -->
                <td>
                  <span ng-dblclick="item.isShow=true" ng-show="!item.isShow">{{item.id}}</span>
                  <input type="text" ng-show="item.isShow" ng-blur="item.isShow=false" ng-model="item.id">
                </td>
                <!-- 姓名 -->
                  <td>
                  <span ng-dblclick="item.ShowName=true" ng-show="!item.ShowName">{{item.name}}</span>
                  <input type="text" ng-show="item.ShowName" ng-blur="item.ShowName=false" ng-model="item.name">
                </td>
                <!-- 年龄 -->
                 <td>
                  <span ng-dblclick="item.ShowAge=true" ng-show="!item.ShowAge">{{item.age}}</span>
                  <input type="text" ng-show="item.ShowAge" ng-blur="item.ShowAge=false" ng-model="item.age">
                </td>
                <!-- 性别 -->
                 <td>
                  <span ng-dblclick="item.ShowSex=true" ng-show="!item.ShowSex">{{item.sex}}</span>
                  <input type="text" ng-show="item.ShowSex" ng-blur="item.ShowSex=false" ng-model="item.sex">
                </td>
                <td ng-click="mainctr.remove(item.id)">删除</td>
            </tr>
         </table>
        </div>
           <!-- 下面是添加学生的布局 -->
            <div class="addStudent">
                   <p>
                      学号:<input type="text" name="" ng-model ="mainctr.formData.id">
                   </p>
                    <p>
                      姓名:<input type="text" name="" ng-model ="mainctr.formData.name">
                   </p>
                   <p>
                      年龄:<input type="text" name="" ng-model ="mainctr.formData.age">
                   </p>
                    <p>
                      性别:<input type="text" name="" ng-model ="mainctr.formData.sex">
                   </p>
                   <p>
                      <button ng-click = "mainctr.addStudent()">添加学生</button>
                   </p>
           </div>
     </div>
    <script type="text/javascript">
        var app = angular.module("app",[]);

        app.controller("Mainctr",[function  (argument) {
              this.students = [
                   {"id":0,"name":"贾成豪","age":18,"sex":"男"},
                   {"id":1,"name":"小青","age":38,"sex":"女"},
                   {"id":2,"name":"刘铭","age":28,"sex":"男"},
                   {"id":3,"name":"小猪","age":68,"sex":"男"}
              ];

              //数据的双向绑定
              this.formData = {
                   "id":"",
                   "name":"",
                   "age":"",
                   "sex":""
              }
              //添加学生
              this.addStudent = function  (argument) {
                 this.students.push(this.formData);
              }
              //删除的方法
              this.remove = function  (id) {
                    var i = 0;
                   while(i<this.students.length){

                     if(this.students[i].id==id){
                       this.students.splice(i,1);
                     }
                     i++;
                 }
              }
        }]);
    </script>
</body>
</html>