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>
