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结构,但不要把它用于 ...

随机推荐

递归、字节流、文件复制_DAY20
1:递归(理解) (1)方法定义中调用方法本身的现象. (2)递归注意事项: A:要有出口,否则就是死递归. B:次数不能太多,否则内存溢出. 特殊事项:构造方法不能递归定义. 例子:cn.itcas ...
HBase定期备份
转载一份使用Export与Import定期备份的Python代码.每月15日做一次完整备份,每天进行一次增量备份. import time import datetime from datetime ...
js的事件学习笔记
目录 0.参考 1.事件流冒泡传播事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...
(转)MySQL数据丢失讨论
原文地址:http://hatemysql.com/tag/sync_binlog/ 1. 概述很多企业选择MySQL都会担心它的数据丢失问题,从而选择Oracle,但是其实并不十分清楚什么情况下 ...
【数组】Maximum Subarray
题目: Find the contiguous subarray within an array (containing at least one number) which has the larg ...
分区助手官网使用教程（专业版、绿色版和WinPE版）（图文详解）
不多说,直接上干货! 详情见 http://www.disktool.cn/jiaocheng/index.html http://www.disktool.cn/jiaocheng/index2.h ...
vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...
jieba分词过程
jieba分词最重要的就是字典,我们一般用jieba的话是用的它通用的字典,这样在特定的环境中无法分成我们想要的效果,我们需要根据我们自己的生产环境自己添加我们的字典,然后下载jieba源码进行更改, ...
ruby中数组的常用函数
在程序中定义一个数组在程序中定义一个数组,因为我们在下面说明. fruits = ["apple", "orange", "lemon"] ...
C++ STL使用说明
标准模板库(Standard Template Library,STL)是一系列通用化组件的集合,包括容器(container).算法(algorithm)和迭代器(iterator). 迭代器ite ...

node（6）angular介绍

node（6）angular介绍的更多相关文章

随机推荐

热门专题