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>
node（6）angular介绍的更多相关文章
- Node.js简单介绍并实现一个简单的Web MVC框架
编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...
- Node.js && Angular && TypeScript 环境安装与更新
安装 Node.js 下载并安装Node.js Angular 执行命令 npm install -g @angular/cli 参考资料: angular quickstart TypeScript ...
- Node.js NPM 介绍
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...
- Node.js 基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- Node.js 基础介绍（一）
Node.js 学习笔记一) 简单介绍--名称 Node.js,平时听到有好几种叫法,node .Node.js.nodejs ,但是比较正式的称呼还是"Node.js",由于它是 ...
- 不会几个框架，都不好意思说搞过前端: Node.js & angular.js
Node.js 菜鸟教程 :http://www.runoob.com/nodejs/nodejs-install-setup.html angular.js 菜鸟教程 :http://www.r ...
- node.js 的介绍
1.node.js是什么? (1)node.js不是一门编程语言, 是一个开发平台,就像Java开发平台,Net平台,PHP开发平台,Apple开发平台.(何为开发平台?有对应的编程语言,有语言运行时 ...
- Angular介绍
Angulay介绍 1.介绍:是一个用于Html和TypeScript构建客户端应用平台与框架.Angular 本身就是用 TypeScript 写成的.基本构造块是 NgModule,它为组件提供了 ...
- Node.Js —— PM2介绍
pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的.它非常适合IaaS结构,但不要把它用于 ...
随机推荐
- (转)MySQL数据丢失讨论
原文地址:http://hatemysql.com/tag/sync_binlog/ 1. 概述 很多企业选择MySQL都会担心它的数据丢失问题,从而选择Oracle,但是其实并不十分清楚什么情况下 ...
- 漫谈NIO(1)之计算机IO实现
1.前言 此系列将尽可能详细介绍断更博客半年以来个人的一个成长,主要是对Netty的源码的一个解读记录,将从整个计算机宏观IO体系上,到Java的原生NIO例子最后到Netty的源码解读.不求完全掌握 ...
- Disconf 学习系列之Disconf 与 Diamond的横向对比（图文详解）
不多说,直接上干货! Disconf 学习系列之Disconf是什么? Disconf 是来自百度的分布式配置管理平台,包括百度.滴滴出行.银联.网易.拉勾网.苏宁易购.顺丰科技 等知名互联网公司正在 ...
- Django的视图系统
视图(views)概述 在前几篇文章中介绍了,client端通过http请求——去url的路由找到相应的视图函数——触发视图函数——再去modes取数据——取到数据后——再通过创建模——views函数 ...
- zabbix邮件内容乱码与邮件内容为附件解决办法
在zabbix的实际使用过程中,在收到邮件预警的时候,我们会发现邮件内容是乱码的,在手机端收到的是附件,而且附件下载后的文件类型是打不开的.这样我们不知道我们是哪个服务器的哪项服务出了问题,接下来我们 ...
- 将AJAX Post的Data转为对应的Class
在使用DataTables从服务端获取数据时,在非MVC的情况下没有MVC的自动绑定功能,所以需要自己写一个绑定,将Post过来的InputStream转为对应的类. HTML: <form i ...
- UIKit 框架之UITableView二
// // ViewController.m // UITableView // // Created by City--Online on 15/5/21. // Copyright (c) 201 ...
- 跟大佬一起读源码：CurrentHashMap的扩容机制
并发编程——ConcurrentHashMap#transfer() 扩容逐行分析 前言 ConcurrentHashMap 是并发中的重中之重,也是最常用的数据结构,之前的文章中,我们介绍了 put ...
- JBoss 实战（1）
转自:https://www.cnblogs.com/aiwz/p/6154594.html JBOSS的诞生 1998年,在硅谷SUN公司的SAP实验室,一个年轻人正坐在电脑前面思考,然后写着什么东 ...
- tap 和click 事件区别
clike事件和 Zepto.js 中tap的区别 首先介绍下Zepto: 最初是作为移动端开发的库,但是却可以作为JQuery轻量级的替代品,因为API和JQuery相似,而文件更小. 介绍下tap ...