前几天师傅让我了解一下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. Storm系列(十七)DRPC介绍

    Storm版本0.9.5 在storm中DRPC服务应用于远程分布式计算,根据客户端提交的请求参数,而返回Storm计算的结果. DRPC服务启动流程(远程模式) 启动DRPC服务,启动命令:stor ...

  2. JavaScript- The Good Parts Chapter 6

    Thee(你) I’ll chase(追逐:追捕) hence(因此:今后), thou(你:尔,汝) wolf in sheep’s array.—William Shakespeare, The ...

  3. nyoj 282 You are my brother

    You are my brother 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 Little A gets to know a new friend, Litt ...

  4. oracle中使用sql查询时字段为空则赋值默认

    转至:http://www.th7.cn/db/Oracle/201501/86125.shtml oracle 通过 nvl( )函数sql 查询时为 空值 赋默认值 oracle 函数介绍之nvl ...

  5. Java异常处理的误区和经验总结

    本文着重介绍了 Java 异常选择和使用中的一些误区,希望各位读者能够熟练掌握异常处理的一些注意点和原则,注意总结和归纳.只有处理好了异常,才能提升开发人员的基本素养,提高系统的健壮性,提升用户体验, ...

  6. EF搜索数据自动将表名变复数问题

    原因这个是自己生成的需要在model加Table 其他博主写了aweier2011

  7. POJ 1657 Distance on Chessboard 简单的计算问题

    Distance on Chessboard Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23096   Accepted ...

  8. js split str.split(&quot; &quot;); split使用方法 在某处截字符串

    <script language="javascript">    str="2,2,3,5,6,6"; //这是一字符串var strs= new ...

  9. zend studio-字体大小设置

    在使用zend studio的过程中为了方便我们编码,很多时候需要设置编码的字体的大小,设置步骤如下: 选择[Windows]-[preference]-[general]-[appearance]- ...

  10. [置顶] Ubuntu 12.04中文输入法的安装

    Ubuntu 12.04中文输入法的安装 Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu的中 ...