angularJS---初识指令

angularJS
　　什么是angularJS
　　　　AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
　　AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
　　　　使用双大括号{{}}语法进行数据绑定；
　　　　使用DOM控制结构来实现迭代或者隐藏DOM片段；
　　　　支持表单和表单的验证；
　　　　能将逻辑代码关联到相关的DOM元素上；
　　　　能将HTML分组成可重用的组件。

　　angularJs与原生JavaScript对比，最大的不同就是去DOM化，打破传统的MVC框架构建了VMMV框架。
　　　　关键词解释：去DOM化---angularJS不像原生js一样，所有的操作都建立在主动去获取DOM节点，
　　　　　　　　　　　　　　　　angularJS可以使用他的指令直接在html标签上绑定数据和事件。
　　　　　　　　　　MVC框架---M(Model) 模型的意思可以理解为数据层（后台数据）--- V（View）视图的意思
　　　　　　　　　　　　　　　　可以理解为页面（html）---- C（controller）控制器的意思可以理解为处理应用程序数据逻辑的部分（比如js）

　　　　　　　　　　MVVM框架---Model-View-ViewModel 这种框架的特点就是 Model数据层和 View视图层不存在交流，都只能跟VIewModel交互
　　　　　　　　　　　　　　　　ViewModel可以看成--数据展示给用户，需要一定的逻辑，这一层就是用来处理这些逻辑的。

　　之前学到的ajax请求感觉就像是VM层，在view层去请求数据（经过ajax）Model层返回数据（经过ajax）这其实就有点表现和数据分离的意思了。不过angular把这件事情做得比较彻底。也就是angularJS的最大特征：双向数据绑定更重要的是它可以自动更新，而不用你去写侦听代码。

　　而指令是angularJS另一大特征：angularJS是通过操作指令来实现某些功能的（不太准确，自己意会）
　　　　angularJS的所有指令都是有"ng-"前缀的（其实指令就是在html标签里自定义的的属性，加上前缀，便于识别）
　　　　先说一下最最基本的指令：ng-app:一个html文档最好只出现一次，如果出现多次也是只有第一个起作用，并且可以出现在html文档的任何一个元素上。

　　　　ng-app作用是告诉子元素以下的指令是归angularJs的，angularJs会识别的。ng-app的值可以为空，当然在练习的时候，在项目中则一定是要赋值的。也就是后面所说的模块。angularJs的使用，有一句一定要牢记在的话“一切都是由模块开始的”。

　　　　ng-controller---绑定在html标签上指定angularJS程序的控制器（用来处理应用程序数据的逻辑部分）可以有多个控制器存在。书写控制器的顺序无所谓,angular不会立刻启用这些控制器,也不会在加载angular.js以后就执行控制器里的代码,也不会注入服务和指令. 当解析html页面的时候,解析到ng-controller,它就去启用该控制器.这个时候,控制器里面的代码才会被执行到,服务等依赖也在这个时间被注入。

　　　　ng-bind---该指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。与表达式{{}}是一样的的作用. 两者的区别在于：表达式在页面加载完在被angularJS解析，会在页面中有短暂的影像。

　　先看代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="angular-ui/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="myController">
　　　　　//使用ng-bind绑定变量name到span上

        <span ng-bind="name"></span>

    </div>

    <script>
　　　　//使用angular的module方法定义一个模块 参数1：模块名 参数2：所依赖的模块（数组形式）

        var app = angular.module('myApp', []);
　　　　//使用angular的controller方法定义一个控制器 参数1：控制器名称  参数2：数组的前面是声明注入的内容，可以是n个，最后是个function，function的参数个数也必须是n个，
　　　　//必须跟前面声明注入的内容一一对应就这样实现了依赖注入。

        app.controller('myController', ['$scope',function($scope){

            $scope.name = "tom";

        }]);

    </script>

</body>

</html>

　　ng-repeat----该指令用于循环输出指定次数的 HTML 元素，集合必须是数组或对象。

　　ng-src-----该指令用于命令angularJS加载指定资源与src的区别：都是加载资源，写成src=“{{pro.img}}”形式，在页面加载时，会自动解析src的{{pro.img}}部分，但解析不出来就会

　　返回404错误，当轮到angularJS解析指令时，资源又会被成功解析出来。写成ng-src="{{pro.img}}"形式，页面加载时，不会解析他，轮到angularJS解析指令时，才会被解析出来，此时不会报错

　　ng-href-----该指令用于链接地址与href的区别：同上

　　代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <script type="text/javascript" src="../lib/angular.min.js"></script>

    <style type="text/css" media="screen">

        img{width: 100px;}

    </style>

</head>

<body ng-app="myApp">

    <div ng-controller="myController">

        <ul>

            <!--for(var m = 0; m < obj.products.length; m++){var pro = obj.products[m];}-->
　　　　　　　//循环li 有products有多少对象，就循环多少次。pro in obj.products 这条代码 隐式创建了变量pro 
　　　　　　　//此时pro表示products里的当前对象

            <li ng-repeat="pro in obj.products" >

                <img ng-src="{{pro.img}}" alt="">

                <h1 ng-bind="pro.name"></h1>

                <a ng-href="{{'prodetail.html?id=' + pro.id}}" ng-bind="pro.price"></a>

            </li>

        </ul>

    </div>

    <script type="text/javascript">

        var myApp = angular.module('myApp', []);

        myApp.controller('myController', ['$scope', '$http', function($scope, $http){

            var obj = new Object();

            //M => V

            //V => M

            // $scope.obj = obj;

            obj.products = [];

            obj.products.push({id: 1, name: 'pro1', price: 99, img: '../img/deom.jpg'});

            obj.products.push({id: 2, name: 'pro2', price: 199, img: '../img/deom.jpg'});

            obj.products.push({id: 3, name: 'pro3', price: 299, img: '../img/deom.jpg'});

            $scope.obj = obj;

        }])

    </script>

</body>

</html>

表现如下：

　　ng-modol---该指令用于绑定双向数据作用于input、select、textarea元素上，相当于属性value angularJS是MVVM框架主要体现在ng-model上。

　　ng-change---该指令用于监听输入框的值是否发生改变，反生改变则执行函数。通常与ng-model搭配使用。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <script type="text/javascript" src="../lib/angular.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="myController">

    <input type="text" name="" ng-model="a" placeholder="" ng-change="calc()" /> +

    <input type="text" name="" ng-model="b" placeholder="" ng-change="calc()"/> =

    <span ng-bind="a * 1 + b * 1"></span>

    <span ng-bind="result"></span>

    <script type="text/javascript">

        //M => V

        //V => M

        //ng-model => MVVM => 双向绑定的指令，作用于input、select、texteara元素，相当于属性value

        var myApp = angular.module('myApp', []);

        myApp.controller('myController', ['$scope', function($scope){

            $scope.a = 1;

            $scope.b = 2;

            $scope.result = $scope.a * 1 + $scope.b * 1;

　　　　　　　// 变量a b被绑定到ng-model上 a b虽然会改变 但变量result不变（没有绑定在ng-model上）所以需要ng-change去监听输入值的变化
　　　　　　　//变量result得到实时刷新。

            $scope.calc = function(){

                $scope.result = $scope.a * 1 + $scope.b * 1;

            }

            // $.ajax({

            //     url: 'post.php',

            //     data: {a: $scope.a, b: $scope.b},

            //     success: function(){}

            // })

        }]);

        // $.post('post.php', {a: $('#a').val(), b: $('#b').val()})

        // $.ajax({

        //     url: 'post.php',

        //     data: {a: $('#a').val(), b: $('#b').val()},

        //     success: function(){}

        // })

    </script>

</body>

</html>

ng-if---该指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。该指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。所有的html元素都支持该指令。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="">

保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">

<h1>Welcome</h1>

<p>Welcome to my home.</p>

<hr>

</div>

<p>当复选框取消选中时 DIV 元素将移除。</p>

<p>当重新选中复选框，DIV 元素会重新显示。</p>

</body>

</html>

待续。。。

angularJS---初识指令的更多相关文章

AngularJS之指令
紧接上篇博客“初探AngularJS” 一.前言在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...
带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自定义指令 ------------- ...
AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
AngularJS初识
AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

随机推荐

Linux系统——shell脚本应用示例
传入一个网段地址,自动找出本网段内存活的IP地址.2,将存活的IP地址当作密码来创建Linux用户,用户名格式为:你的名字_数字 3,有几个存活IP地址,就自动创建几个用户 4,最后将创建的用户名 ...
84. Largest Rectangle in Histogram（直方图最大面积 hard）
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
【Q2D】如何导出自定义C++类给框架使用
本文基于Quick cocos2d x这个游戏框架,为了行文流畅,后面都简称Q2D 导出自定义c++类给项目使用已经有了现成的例子了详见:http://quick.cocos.org/?p=235 ...
springcloud---2
每一个都是独立的springboot工程.通过自己的ip和端口访问. Eureka是服务发现组件,Eureka里面有一个服务注册表,存的是服务消费者和服务生产者的ip和端口.Eureka集群里面每个E ...
Linux上db2安装
Linux上db2安装:https://blog.csdn.net/nayanminxing/article/details/69372283
Python3.x：pip命令安装第三方库，超时处理方案
Python3.x:pip命令安装第三方库,超时处理方案问题: pip install splinter命令安装第三方库,报超时错误: raise ReadTimeoutError(self._po ...
Nginx 部署HTTPS
Nginx 部署HTTPS 系统:Linux Centos 7.4 x64 软件:Nginx 1.12.2 注:需要阿里云申请本地域名与证书并添加下载到本地. 注:证书文件为 xxxx.pem 与 x ...
wget指定目录下载以及其它的使用方式
转自 http://java-er.com/blog/wget-useage-x/ 有时候我们需要wget一个文件下载到指定的目录下,或者重命名成指定的名字 wget -r -p -np -k -P ...
python使用百度api翻译中英文
python使用百度api翻译中英文写程序取变量名的时候,常常需要翻译单词,或者将中文翻译成英语.有道词典,必应词典都很好,可是...命令行习惯了还是觉得用在cmd里面调出程序使用起来也许会更爽.于 ...
String中的equals方法解析 jdk1.7
注此篇为jdk1.7中的源码解析 equals()方法中的判断分一下步骤 1先判断内存地址是否相同如果内存地址相同那么字符串就是相同的返回true 2 判断当前字符串和参数字是否属于同一类 ...

angularJS---初识指令

angularJS---初识指令的更多相关文章

随机推荐

热门专题