接触、学习AngularJS已经三个多月了，随着学习的深入，有些东西刚开始不明白，现在开始慢慢明白起来。于是，开始整理这几个月的学习成果。要不又要忘了。。。

　  初学Angular，是看到慕课网大漠穷秋老师教程学的，以下内容是参考教程，还有自己的整理写的，如有相似之处，莫怪莫怪。。。

步入正题。学习Angular，首先得了解、熟知、掌握它的四大核心特性。

　　一、MVC模式

　　

Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据。

View（视图）:  用户看到并与之交互的界面  ,相当于html元素组成的页面。

Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC好处：职责清晰，代码模块化，它能为应用程序处理很多不同的视图，可以复用。后期维护方便。

AngularJS的MVC是借助$scope(作用域)实现的。

二、模块化与依赖注入

Angular 应用，可以说一切都是从模块开始的，下分五大模块，如图：

分别对应的是路由、过滤、指令、服务、控制器。

引入方法：

<!doctype html>

<html ng-app="myapp">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script>

            //[]内可以依赖angular内置模块，或者自定义模块注入，在路由、指令、服务中使用。具体的还得靠自己实践后明白。

            var Myapp = angular.module('myapp',['ngRoute']);

            //控制器

            Myapp.controller('name', function(){

            });

            //指令

            Myapp.directive('name', ['', function(){

                // Runs during compile

                return {

                    // name: '',

                    // priority: 1,

                    // terminal: true,

                    // scope: {}, // {} = isolate, true = child, false/undefined = no change

                    // controller: function($scope, $element, $attrs, $transclude) {},

                    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements

                    // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment

                    // template: '',

                    // templateUrl: '',

                    // replace: true,

                    // transclude: true,

                    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),

                    link: function($scope, iElm, iAttrs, controller) {

                    }

                };

            }]);

        </script>

    </body>

</html>

三、指令

指令是Angular 中最有意味的一种特性，也是难点。先初步熟悉下，下几篇文章具体详解。
<!doctype html>

<html ng-app="MyModule">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <hello></hello>

        <div hello></div>

        <div class="hello"></div>

        <!-- directive:hello -->

        <div></div>

        <script>

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

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

                return {

                    restrict: 'AEMC',

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

                    replace: true

                }

            });

        </script>

    </body>

</html>

四、双向数据绑定

先看一下单向数据绑定。

它的处理流程是这样的，首先呢，写好模板加上从服务器调取的数据结合在一起，通过数据绑定机制生成一段html标签，然后把这段标签显示出来。

它的缺点：html标签一旦生成，就无法改变，要是改变其中元素，或者新的数据更新，又要重新再来一遍把它替换掉，浪费时间，占用运行内存。

再看双向数据绑定。

它的想法是这样的，视图和数据是对应的，当视图上面的内容发生变化时，数据模型也跟着变化；当数据模型发生变化时，视图也跟着变化。

双向数据绑定经常应用的场景，表单的应用。。。。。。。。

核心特性整理完了，有点水，接下来是五大模块。。。敬请期待！嘿嘿嘿嘿

关于AngularJS学习整理---核心特性的更多相关文章

  1. 《AngularJS学习整理》系列分享专栏

    <AngularJS学习整理>系列分享专栏   <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...

  2. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  3. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

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

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

  5. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  6. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  7. angularJS的核心特性

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

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

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

  9. Oracle Exadata 学习笔记之核心特性Part1

    近年来,国内众多厂商都有一体机的产品,不过更多都是围绕硬件本身的堆砌和优化,那么这些产品和Oracle一体机最大的区别在哪里呢?最近读了李亚的<Oracle Exadata技术详解>,系统 ...

随机推荐

  1. mysql性能优化分析 --- 下篇

    概要回顾 之前看过<高性能mysql>对mysql数据库有了系统化的理解,虽然没能达到精通,但有了概念,遇到问题时会有逻辑条理的分析; 这回继上次sql分析结果的一个继续延伸分析,我拿了; ...

  2. python把列表前几个元素提取到新列表

    需要添加几个就循环几次   list = ['a','b','c','d','e'] new_list = [] for i in range(3): print(list[i]) new_list. ...

  3. 帆软报表（finereport)使用row_number ()进行组内排序

    ROW_NUMBER()函数将针对SELECT语句返回的每一行,从1开始编号,赋予其连续的编号.在查询时应用了一个排序标准后,只有通过编号才能够保证其顺序是一致的,当使用ROW_NUMBER函数时,也 ...

  4. codeblocks 配置 opengl 编程宝典 的 gltools 环境

    懒得多说,亲测,这个问题,csdn 和 cnblog 上的博客真的没有一个能解决的. 这个帖子2L的答案则完美解决了问题,虽然步骤有些繁琐,过程还是英文,但考虑到了可能出现的各种问题,跟着走一遍就完美 ...

  5. struts2-第一章-基础用法2

    一,回顾 struts2框架搭建步骤 (1)创建maven项目 (2)web.xml配置struts2的核心过滤器(filter) (3)pom.xml配置servlet,struts的依赖 (4)把 ...

  6. jdbc连接数据库以及crud（简单易懂，本人亲测可用 有源代码和数据库）

    今天呢!重新整理了一边jdbc的相关操作:现在来说对于很多框架都使用mybatis和hibernate来操作数据库 ,也有很多使用自己简单封装的ssm或者是其他的一些框架来操作数据库,但是无论使用哪一 ...

  7. java日期间相隔年月日计算

    /**     * 获取date1相距date2多少天, date2>date1     * @param date1     * @param date2     * @return     ...

  8. 为什么要使用getters和setters/访问器？

    Why use getters and setters/accessors? 实际上会有很多人问这个问题....尤其是它成为Coding Style中一部分的时候. 文章出自LBushkin的回答 T ...

  9. SOUI视频教程

    第1讲-开发环境搭建 http://my.tv.sohu.com/us/282307706/89333168.shtml 第2讲- 基本应用程序框架代码解读 http://my.tv.sohu.com ...

  10. 测试工作之--adb代码

    1.抓log方法 (bat文件) mkdir D:\logcatset /p miaoshu=请描述操作:adb logcat -v threadtime > D:\logcat\%miaosh ...