一、简单认识angular 1 AngularJS是什么？
AngularJs（简称ng）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个Javascript 框架，因为它的核心其实是对HTML标签的增强。何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
　 另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic  Javascript  MVW Framework”。

2 AngularJS简单介绍

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它非但不畏缩不前，反而正面出击，提出了有效的解决方案。很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供 我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。

3 那么，我们什么时候该用AngularJS呢？

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。

二、 AugularJS特性

AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。在这里我们浅谈一下angular比较简单的几个特性，后边咱们再具体谈论angular的其他特性。
首先我们先来了解一下angular的五个小特性，具体了解一下：

2.1 特性一：双向的数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。
我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。
传统来说，当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析
这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。
这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。
这里有一个非常简单的例子，用来演示一个input输入框和<h1>元素的双向绑定(例01)：
<!doctype html>
<html ng-app="demoApp">
  <head>
    <script src="./js/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="user.name" placeholder="请输入名字">
      <hr>
      <h1>Hello, {{user.name}}!</h1>
    </div>
  </body>
</html>
说明：实际效果请大家看AngularJS/demo/index.html

2.2 特性二：模板

在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。
最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：
function AlbumCtrl($scope) {
    scope.images = [
        {"image":"img/image_01.png", "description":"Image 01 description"},
        {"image":"img/image_02.png", "description":"Image 02 description"},
        {"image":"img/image_03.png", "description":"Image 03 description"},
        {"image":"img/image_04.png", "description":"Image 04 description"},
        {"image":"img/image_05.png", "description":"Image 05 description"}
    ];
}
<div ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
  </ul>
</div>
这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。

2.3 特性三：MVC

针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。
ViewModel
viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller
controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。
View
view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

2.4 特性四：服务和依赖注入

AngularJS服务其作用就是对外提供某个特定的功能。
AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。
为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：
function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}
你也可以定义自己的服务并且让它们注入：
angular.module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);
function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}
myController.$inject = ['$scope', 'notify'];

2.5 特性五：指令（Directives）

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：
myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});
然后，你可以使用这个自定义的directive来使用：
<my-component ng-model="message"></my-component>
使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

浅谈angular的作用相关推荐

  1. sql之浅谈视图的作用

    [数据库]☆★sql之浅谈视图的作用 在一个项目的实际开发过程中牵涉到复杂业务的时候,我们不可避免的需要使用中间表来进行数据连接,有的同学就说了,我可以采用Hibernate进行主外键进行关联啊?多对 ...

  2. 汽车钥匙芯片工作原理 浅谈汽车钥匙芯片作用及分类

    工程师谭军 发表于 2018-10-08 10:01:00 http://m.elecfans.com/article/791926.html 本文主要是关于汽车钥匙芯片的相关介绍,并着重对汽车钥匙芯 ...

  3. 浅谈Angular网络请求

    在Angular网络请求是一个最常见的应用之一,下列我将以 ng-alain 项目为基础描述 Angular 网络请求. 注:示例中代码都以简化的形式出现. 写在前面 Angular发起一个请求再简单 ...

  4. 从石头剪刀布浅谈算法的作用

    刚开始学习C语言的时候,常常听到前辈说,C语言的核心就是算法.但是对于小白来说,常常一脸懵逼,搞不懂啥叫算法?算法有什么用?我的if-else语句照样可以走天下.但是作为小白来说虽然不懂但是也不敢问, ...

  5. 浅谈Angular如何自定义创建指令@Directive

    ​知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...

  6. twrp双清勾选哪两个_浅谈TWRP的作用

    小白向教程,大佬请后退 不少小白也曾想过刷机,但却不能理解twrp作用与使用方法,下面就带领小白们来了解twrp 一.twrp是什么? TWRP是国外android爱好者开发的一款工具,全名是:Tea ...

  7. 技术总监和CTO的区别 浅谈CTO的作用----软件公司如何开源节流（一）

    我一直在思考软件公司如何开源节流. 当然,老板也在思考开源节流. 当然,老板思考的开源节流在公司运营层面上,而我作为CTO,我考虑的则是在产品运营角度上来思考这个问题.否则,一个软件公司,它的生存与发 ...

  8. 浅谈枚举的作用和用法

    1.枚举(Enum)类型特点: 能够列出所有可能的取值,并给它们取一个名字.(一种新的数据类型) 2.枚举(Enum)语法格式: enum typeName{ valueName1, valueNam ...

  9. ChannelOption.TCP_NODELAY, true-浅谈tcp_nodelay的作用

    2019独角兽企业重金招聘Python工程师标准>>> 在TCP/IP协议中,无论发送多少数据,总是要在数据前面加上协议头,同时,对方接收到数据,也需要发送ACK表示确认.为了尽可能 ...

最新文章

  1. ucontext实现的用户级多线程框架3（实现echo服务器）
  2. 一文讲清，MySQL主从架构
  3. 通过 运行实现快速打开应用程序
  4. WPF与Win32互操作
  5. PHP如何防止XSS攻击
  6. html js 浏览器语言,js 判断浏览器语言的方法
  7. Vue第一部分(1)：Vue简介以及第一个示例
  8. Java生成.jar库
  9. activex控件方法和事件
  10. 宝塔建站 mysql在哪_宝塔面板安装LAMP,创建网站,创建数据库
  11. php防止视频资源被下载
  12. 数据库服务器位置,怎么查看服务器数据库的位置
  13. linux系统sdio接口wifi编程,3个SDIO接口WiFi模块/WiFi+蓝牙组合模块介绍-SKYLAB
  14. echarts折线图鼠标悬浮竖线_设置Echarts鼠标悬浮样式
  15. python中for怎么无限循环_Python中无限循环有什么条件
  16. excel sumifs多条件求和
  17. 零基础成为网络工程师经验分享，附完整学习路线
  18. 解决吉特哈布原本可以访问突然访问不了的问题
  19. Java写的第一个小游戏(续)
  20. 发生系统错误 5。拒绝访问。

热门文章

  1. css3——max-height 和 min-height
  2. oracle 数据库密码生产同步模拟环境 ，随记常用命令
  3. 【ceph】cmake管理Ceph编译+Ceph工程目录+cmake 实战学习
  4. 欧拉计划17——数字字母计数
  5. 教你怎么在电脑上玩《代号：Ace》手游，《代号：Ace》二次元吃鸡手游电脑版教程
  6. 全球与中国新一代高级电池市场深度研究分析报告
  7. web自动化如何在不同浏览器运行_从理论到工具：带你全面了解自动化测试框架...
  8. 厦门工程技术人员职称申报操作笔记 02 论文
  9. vue-draggable-resizable定制化可拖动控件
  10. 计算机网络的标准化工作与相关组织