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

  接触、学习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标签一旦生成,就无法改变,要是改变其中元素,或者新的数据更新,又要重新再来一遍把它替换掉,浪费时间,占用运行内存。

再看双向数据绑定。

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

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

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

时间: 2024-12-20 15:52:20

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

AngularJs学习总结-基本特性

现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,通过script标签添加到网页中.即我们使用an

AngularJs学习总结-了解基本特性(-)

AngularJs学习总结-了解基本特性(-) 现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,

angularJS的核心特性

前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:MVC.Module(模块化).指令系统.双向数据绑定. 下面就以上四大核心特性,进行一些简要介绍: 1.MVC(Module——Control——View) 我们应该都知道MVC代表:数据模型层(Module)——业务逻辑和控制逻辑(Control)——视图层(View),先看一个简单的angula

转: angularjs学习总结(~~很详细的教程)

1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.这里便将我学习AngularJS写成文档,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己也是一名学习者,会以学习者的角度来整理我的行文思路,这里可能只是些探索,有理解或是技术上的错误还请大家指出:其次我特别喜欢编写小

AngularJs学习笔记0——前言

距离上次写博客有很长时间了,这段时间中也一直想坚持写博客,但是迟迟未动,一方面是因为刚换工作并适应新的环境导致工作比较忙碌,一直没有抽出时间来,其实说白了就是给自己的懒惰找借口,但是本人在园子里也有一段时间了,也一直坚持关注园子里的大神们的文章,感触颇多.最近也一直计划坚持写博客,并把工作中遇到问题及学习到的技能给大家分享,对给大家有那么一些帮助.最近也计划写一些最近工作中用到的技术做一个专题分享给大家,也对自己的一个总结吧. 前端时间因为工作中项目需要学习了一下AngularJs,我也网上查询

Spring?IOC设计原理解析:本文乃学习整理参考而来

Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. IoC容器的初始化 1. XmlBeanFactory(屌丝IOC)的整个流程 2. FileSystemXmlApplicationContext 的IOC容器流程 1.高富帅IOC解剖 2. 设置资源加载器和资源定位 3.AbstractApplicationContext的refresh函数载入

angularjs学习总结(快速预览版)

对html标签的增强 -> 指令 指令的本质是什么 声明的方式调用相应的脚本,实现一些操作,声明的所在的dom就是脚本的执行上下文? 自定义标签 -- 标签指令自定义属性 -- 属性指令特定格式注释 -- 注释指令 概念模板 视图 模型 模块 指令 依赖注入 路由 > MVVM其他MVC框架 backbone emberjsAngular不依赖其他任何框架AngularJs重新定义了前端应用的开发方式,AngularJs特别适合开发单页面应用(SPA) > AngularJs的特性1.

angularJS学习手册(1)

欢迎来到augularJS的学习 一.什么是angularJS? angular的英文意思是角,为什么要叫angular我也不知道. AngularJS是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换.将让你的开发非常爽.AngularJS有着诸多特性,最为核心的是

AngularJS学习笔记1

简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HTML声明动态内容. AngularJS有五个主要核心特性,如下介绍: 1.双向数据绑定 —— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然. 2.模板 —— 在AngularJS中,模板相当于HTML文件被浏览器解析到DOM中,AngularJS遍历这些