前几天师傅让我了解一下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. vijosP1319 数列

    vijosP1319 数列 链接:https://vijos.org/p/1319 [思路] 数学. 相当于交换进制2为k. [代码] #include<iostream> using n ...

  2. HW4.11

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 100; i & ...

  3. 《Concrete Mathematics》-chaper5-二项式系数

    二项式系数,也是我们常用的组合数,最直观的组合意义就是从n个元素取k个元素所有可能的情况数,因此我们自然的得到下面二项式系数的定义式. 那么我们通过具有组合意义的二项系数,给出更加一般的二项式系数的定 ...

  4. 在VirtualBox中安装了Ubuntu后，Ubuntu的屏幕分辨率非常小，操作非常不便。通过安装VirtualBox提供的“增强功能组件”，-摘自网络

    在VirtualBox中安装了Ubuntu后,Ubuntu的屏幕分辨率非常小,操作非常不便.通过安装VirtualBox提供的“增强功能组件”,可以解决这一问题,并且使用非常方便. 一.环境 | En ...

  5. chroot 命令实例讲解

    我是一个刚接触 Linux 和 Unix 的新手.我该如何改变一个命令的根目录?我要怎样改变一个进程的根目录呢,比如用 chroot 命令将web服务与文件系统隔离?我要如何使用 chroot 恢复密 ...

  6. vmware虚拟机下ubuntu 13.04使用zeranoe脚本交叉编译ffmpeg

    2013-07-01今天是建党节,习总书记指出,党的建设要以“照镜子.正衣冠.洗洗澡.治治病”为总要求.希望我们的党越来越纯洁,为人民谋福利.言归正传,每次项目中需要编译相应的ffmpeg,都很费时费 ...

  7. A Tour of Go Range

    The range form of the for loop iterates over a slice or map. package main import "fmt" , , ...

  8. 巧用TAG属性保存对象的指针

    指针的数据类型是整型,一个指针就是一个整型的数值. 所以凡整型的变量(这个整型的变量可以是声明在INI文件中,也可以是声明在函数中的)也好,对象的整型的属性也好,都可以用来存储一个指针. 但对象往往没 ...

  9. Sqlite在Windows、Linux 和 Mac OS X 上的安装过程

    一:在 Windows 上安装 SQLite 1,下载 请访问SQLite下载页面http://www.sqlite.org/download.html,从Windows 区下载预编译的二进制文件.需 ...

  10. UIImageC处理

    UIImageC处理 1.等比缩放 - (UIImage *) scaleImage:(UIImage *)image toScale:(float)scaleSize { UIGraphicsBeg ...