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使开发 ...

随机推荐

Mybatis中的#与$的区别
一.对比场景场景:数据库分表时,需要将分表的表序号传入的sql中. SpringBoot中使用注解如下: @Insert("insert into collect_#{tblNum}(id ...
Rundeck概况
1.Rundeck介绍 RunDeck是用Java/Grails写的开源工具,帮助用户在数据中心或者云环境中自动化各种操作和流程.通过命令行或者web界面,用户可以对任意数量的服务器进行操作,大大降低 ...
javascript与jQuery的each,map回调函数参数顺序问题
<script> var arr = [2,3,6,7,9]; //javascript中的forEach 和 map方法 arr.forEach(function(value,index ...
$聊一聊"驼峰"和"下划线"——Python re.sub函数详细用法实例讲解
日常写代码时候会遇到一些字符串替换的操作,比如把一大堆"驼峰"形式的字符串批量转换成下划线形式."驼峰"形式的变量命名风格在Java中很常见,而下划线形式的变量 ...
微服务-使用Redis实现分布式缓存
在单体中对于key信息和用户信息是放在内存中放的,通过session进行管理. 微服务是要放在分布式缓存中,以实现服务的无状态化. @Autowired private StringRedisTemp ...
SQL Server 2016 特性和安装方法
SQL Server 2016 特性: 全程加密技术(Always Encrypted),动态数据屏蔽(Dynamic Data Masking),JSON支持,多TempDB数据库文件,PolyBa ...
libcstl中的list没法插入自定义数据
一开始运行出错,开启debug以后发现在push自定义对象的时候调试器提示找不到一个叫/XXX/XXXX/XXXX/libcstl-2.3.0/src/cstl_list_private.c</ ...
浅析ProcessBuilder
概述 ProcessBuilder类是J2SE 1.5在java.lang中新添加的一个新类,此类用于创建操作系统进程,它提供一种启动和管理进程(也就是应用程序)的方法.在J2SE 1.5之前,都是由 ...
DataStage系列教程（Change Capture）
Change Capture可以比较具有相同列的数据集的差异,得出一个数据集(After)在另一个数据库(Before)的基础上产生的哪些变化.变化类型如表1: 变化代码变化中文说明 0 no c ...
Sqoop-问题
1.权限问题 // :: INFO mapreduce.Job: Job job_1555064328415_0328 failed with state FAILED due to: Job set ...

angularJS---初识指令

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

随机推荐

热门专题