前几天师傅让我了解一下angularJS，angularJS是一个前端框架，具体的优缺点和运用场景我现在也还没有搞清楚，暂时就先不做描述了，留到运用以后进行补充吧。

angularJS四大核心特性：MVC、Module（模块化）、指令系统、双向数据绑定。

下面就以上四大核心特性，进行一些简要介绍：

1、MVC（Module——Control——View）

我们应该都知道MVC代表：数据模型层（Module）——业务逻辑和控制逻辑（Control）——视图层（View），先看一个简单的angularJS例子：

<!Doctype html>

<html ng-app>

    <head>

        <meta charset="utf-8">

        <script>

            function HelloAngular($scope){

                $scope.greeting = {

                    text: "Hello"

                };

            }

        </script>

    </head>

    <body>

        <div ng-controller="HelloAngular">

            <p>{{greeting.text}},Angular</p>

        </div>

    </body>

    <script src="js/angular-1.3.0.js"></script>

</html>

运行结果：Hello,Angular

分析这个简单的例子，我们可以比较明显的区分出MVC的各层，div中定义的ng-controller就是一个控制器，这个控制器被定义为一个函数，而p标签的内容很明显就是显示层，函数中定义了一个greeting对象的text属性，而在显示曾中的通过{{}}获取它的值，很明显为数据模型层。这样页面显示的内容就是数据模型的值了。

2、Module（模块化）

上面的例子中我们定义了一个全局函数，但是有经验的开发者都知道我们在开发过程中应该尽量避免定义全局变量和全局函数。因此我们就需要了解angularJS的模块化特性了，我们修改上面的实例

<!Doctype html>

<html ng-app="HelloAngular">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div ng-controller="helloAngular">

            <p>{{greeting.text}},Angular</p>

        </div>

    </body>

    <script src="js/angular-1.3.0.js"></script>

     <script>

            var myModule = angular.module("HelloAngular", []);

            myModule.controller("helloAngular", ['$scope',

                function HelloAngular($scope) {

                    $scope.greeting = {

                        text: 'Hello'

                    };

                }

            ]);

        </script>

</html>

和上面的实例比对，下面的实例中使用angular的module方法定义了一个模块，并在定义的模块上调用了一个controller方法，很明显是定义了一个myModule模块的一个控制器，该控制器的名字为helloAngular，其具体实现则为上面实例中的HelloAngular函数，这样我们就把控制器模块化了，而不在使用全局函数作为控制器。

注意：一切都是从模块开始的，我们在使用angularJS时，一定要先想到模块，所有的东西都是建立在模块的基础上，只有定义了模块才能调用其它方法。

上面实例中的ng-app相当于java中main函数，所以每个页面中只能定义一个ng-app，他定了所在的模块。

3、指令系统

angular的指令系统是最有特色、最吸引人的一个特性。下面先看一个实例：

<!Doctype html>

<html ng-app="MyModule">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <hello></hello>

    </body>

    <script src="js/angular-1.3.0.js"></script>

    <script>

        var myModule = angular.module("MyModule", []);

        myModule.directive("hello", function() {

            return {

                restrict: 'E',

                    template: '<div>Hi everyone!</div>',

                replace: true

            }

        });

    </script>

</html>

实例中的html代码中有一个hello标签，但我们知道标准的HTML代码中并没有hello标签，我们再看一下具体的js代码中，如上个实例，首先定义了一个模块myModule，然后在模块上调用了directive函数，很明显hello则是这个指令名称，而对应的方法也很明显，返回一个template，而这个templte的内容则成为了hello标签的内容了。

大家想一下，如果我们定义大量的指令，然后就可以在页面中随便调用了。

4、双向数据绑定

大部分框架实现的都是单向数据绑定，单向数据绑定的意思是将数据绑定到模板上，并且显示到界面上，这种模式的缺点是显示出来后，当数据更改时，并不能及时的更新到页面上，因此angular提出了双向数据绑定的定义。

我们来看一个实例：

<!Doctype html>

<html ng-app>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <div>

            <input ng-model="greeting.text"/>

            <p>{{greeting.text}},AngularJS</p>

        </div>

    </body>

    <script src="js/angular-1.3.0.js"></script>

</html>

界面截图：

该实例无论你在input中输入任何内容，都会实时的显示在下面的p标签中，我们可以看到该实例中我们没有写任何js代码，我们在input上绑定了一个ng-model，它的值为greeting.text，而在p标签中则获取这个值，实时显示在html中。

angularJS的核心特性的更多相关文章

  1. 关于AngularJS学习整理---核心特性

    接触.学习AngularJS已经三个多月了,随着学习的深入,有些东西刚开始不明白,现在开始慢慢明白起来.于是,开始整理这几个月的学习成果.要不又要忘了...  初学Angular,是看到慕课网大漠穷秋 ...

  2. AngularJS核心特性（四大点）

    本人刚刚接触AngularJS,还不太熟悉,就说说我目前遇到的一些注意点吧. 1.调用外来文件script文件 AngularJS核心特性一  MVC MVC设计模式 html文件 <!DOCT ...

  3. angular学习笔记（1）- 四大核心特性

    angular1学习笔记(1) -  angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...

  4. AngularJS 的常用特性（一）

    前言:AngularJS 是一款来自 Google 的前端 JS 框架,该框架已经被应用到了 Google 的多款产品中,这款框架最核心特性有:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入 ...

  5. Java Gradle入门指南之gretty插件（安装、命令与核心特性）

        Java Web应用开发时常使用Gradle来进行项目管理,可以十分便利地解决包依赖等问题.war插件的出现,让项目部署成为一个复制粘贴的过程,那有没有办法让Java web应用的部署,就像w ...

  6. ES6核心特性

    摘要:聊JS离不开ES6啊! 原文:ES6核心特性 作者:ljianshu 前言 ES6 虽提供了许多新特性,但我们实际工作中用到频率较高并不多,根据二八法则,我们应该用百分之八十的精力和时间,好好专 ...

  7. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...

  8. Zookeeper系列2 原生API 以及核心特性watcher

    原生API 增删改查询 public class ZkBaseTest { static final String CONNECT_ADDR = "192.168.0.120"; ...

  9. 乐字节-Java8核心特性实战之Stream（流）

    说起流,我们会想起手机 ,电脑组装流水线,物流仓库商品包装流水线等等.如果把手机 ,电脑,包裹看做最终结果的话,那么加工商品前的各种零部件就可以看做数据源,而中间一系列的加工作业操作,就可以看做流的处 ...

随机推荐

  1. Java笔记(十六)……内部类

    内部类概述 内部类是将一个类定义在另一个类里面,对里面那个类就成为内部类(内部类,嵌套类). 当描述事物时,事物的内部还有事物,该事物用内部类来描述,因为内部事物在使用外部事物的内容 访问特点 内部类 ...

  2. [综述]领域特定语言（Domain-Specific Language）的概念和意义

    领域特定语言(Domain Specific Language, DSL)是一种为解决特定领域问题而对某个特定领域操作和概念进行抽象的语言.领域特定语言只是针对某个特定的领域,这点与通用编程语言(Ge ...

  3. Apriori算法实例----Weka，R, Using Weka in my javacode

    学习数据挖掘工具中,下面使用4种工具来对同一个数据集进行研究. 数据描述:下面这些数据是15个同学选修课程情况,在课程大纲中共有10门课程供学生选择,下面给出具体的选课情况,以ARFF数据文件保存,名 ...

  4. HNU13377:Book Club 二分图

    题意:有n个人,m种需求,给出m行,每行a,b代表a想要的书在b那里,问能不能通过交换的方法来满足每个人的需求 思路:要符合题意的话一定是二分图.网上还一种dfs #include<cstdio ...

  5. 各种sensor名称统计

    gyroscopes 陀螺仪accelerometers 加速度计magnetometers 磁力计barometric pressure 气压remote pressure sensing 远程压力 ...

  6. HOG特征

    HOG(Histogram of gradient)统计图像局部区域的梯度方向信息来作为该局部图像区域的表征.HOG特征具有以下几个特点: (1)不具有旋转不变性(较大的方向变化),实际应用中不变性是 ...

  7. Storm系列(二)系统结构及重要概念

    在Storm的集群里面有两种节点:控制节点和工作节点,控制节点上面运行Nimbus进程,Nimbus负责在集群里面分配计算任务,并且监控状态.每一个工作节点上面运行Supervisor进程,Super ...

  8. HW2.16

    import java.util.Scanner; public class Solution { public static void main(String[] args) { final int ...

  9. HDU3727 - Jewel(主席树)

    题目大意 对一个序列进行以下四种操作: 1.Insert x 在序列尾部插入x 2.Query_1 s t k 查询区间[s,t]的第k小 3.Query_2 x 查询x的在序列中排名 4.Query ...

  10. Kooboo中主要的几个关键词中的关系

    Kooboo中主要的几个关键词中的关系 Content Type  //相当于数据库表 Content      //相当于数据 View         //部分View 她可以使用Content ...