这周末在家呆了两天，正好中午闲暇时间继续分享Angularjs相关，今天主要分享Angularjs总体介绍及数据绑定部分内容，下面直接进入主题。

1、基本概念：
　　AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事，通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足。
2、版本

　　angualrjs1.x：目前比较稳定版本。
　　angularjs2.x:基于typescript编写，他在1.x基础上改动很大，偏向于移动端的开发，ES6标准编写
　　angularjs4.x 最新版本

目前版本2.x不是在1.x的基础上升级的，基本上说是颠覆性的，目前开始两个版本来维护，2.x开始把1.x版本基本上重新架构，并优化了大量的东西，并更提倡组件化变成，这方面跟Vue，React类似。

3、核心特性
  MVC（或MVVM）设计思想：

很多人会想Angularjs是前端MVC框架，我认为MVC只是一个设计思想，我认为可以说有MVVM的影子在里面，因为MVVM是在MVC的基础上升级的，加了数据双向绑定功能，不过这只是我个人意见，请大神们指正。

双向数据绑定：

　　数据双向绑定不是AngularJs提出的，是很早就有的，有微软的WPF中运用MVVM思想、前端框架Knockoutjs都有数据双向绑定概念。
  模块化和依赖注入

　　模块化和依赖注入是AngularJs的核心内容，也是Angular的亮点。
  指令系统

指令体统也是Angular的核心，指令系统分内置指令和自定义指令，其中我认为自定义指令的功能很强大，能实现很多强大的功能，细节到讲解指令时详细讲解。

4、擅长领域

1）单页面应用程序Single Page Application（SPA）
    2）CRUD程序

有可能有些园友有可能对单页面应用不是很理解，简单举一个例子，比如我们传统的通过Iframe框架的属于多页面应用MPA，多页面应用的弊端为多次加载多个页面，单页面应用都通过Html段来加载或者切换方式。这里对MPA，SPA不做过多的介绍，大家可以百度一下就理解。

AngularJs适合于CRUD的应用系统，不适合于页面频繁交互的应用或者图形化页面及游戏类系统不适合该框架。

5、AngularJs应用构成

任何一个ng应用都是由控制器、服务、指令、路由、过滤器等模块类型构成，下面要我用一个图表示关系：

6、模块（module）
      在AngularJS中module是一个核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。
  模块的创建方式：
　　angular.module(‘myApp’,[]);
  模块的使用：
      在需要的地方（html某个标签上）添加ng-app
使用模块的好处：
     1）保持全局命名空间的清洁；
     2）编写测试代码更容易；
     3）易于在不同的应用程序之间复用代码。
    4）使用声明的方式，让人更加容易理解。

7、在应用中使用AngularJs

1）在应用中使用Angular时首先在页面中引用angular框架的js库代码。

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>首页</title>
  4.     <!--引用AngularJs库    -->
  5.     <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script>
  6.  
  7. </head>

　2）在应用Angular范围的html元素上添加ng-app模块，需要添加控制器的话加ng-controller，这个不一定是在body元素上，可以任意元素上，这个就是表明使用Angular的应用边界。

  1. <body ng-app="myapp" ng-controller="myCtrl">
  2.     <!--    1、表达式绑定 -->
  3.     <h1>{{expression}}</h1>
  4.     <!-- 2、指令绑定-->
  5.     <h2>{{ngmodel}}</h2>
  6.     <input type="text" ng-model="ngmodel">
  7.     <!--    3、ng-bind绑定-->
  8.     <h3 ng-bind="ngbind"></h3>
  9.     <h3 class="ng-bind:ngbind"></h3>
  10.     <!--    4、ng-bind-html绑定-->
  11.     <h4 ng-bind-html="htmlbind"></h4>
  12.     <!--    5、ng-bind-template -->
  13.     <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
  14. </body>

　　3、添加js代码，并定义模块及控制器等内容

  1. <script>
  2.     //模块定义
  3.     // 第一个参数：应用名称，第二个参数：应用依赖模块
  4.     var app = angular.module('myapp', ['ngSanitize']);
  5.  
  6.     //    控制器定义
  7.     //    第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
  8.     app.controller('myCtrl', function($scope) {
  9.         $scope.expression = "hello expression";
  10.         $scope.ngbind = "hello ng-bind";
  11.         $scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
  12.         $scope.subCtrl = "hello subCtrl";
  13.  
  14.     });
  15.  
  16. </script>

　　从以上代码段可以看出怎么定义模块及控制器的方法，并每个参数的意义都写了注释，大家可以看一下。

到时候给大家把源代码分享到GitHub上面，大家可以下载。

今天就给大家分享怎么多的内容吧，下次把数据绑定和控制器相关内容分享给大家，在此感谢大家的支持，并有什么不妥之处欢迎大家指正！

AngularJs学习笔记1——总体介绍的更多相关文章

  1. angularjs学习笔记1-angular总体简介及其特点

    以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用.而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨 ...

  2. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  3. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  4. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  5. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  6. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  7. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  8. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  9. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

随机推荐

  1. JAVA并发编程实战---第二章：线程安全性

    对象的状态是指存储在状态变量中的数据.对象的状态可能包括其他依赖对象的域.例如HashMap的状态不仅存储在HashMap本身,还存储在许多Map.Entry对象中.对象的状态中包含了任何可能影响其外 ...

  2. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

  3. Servlet的优化.GenericServlet

    如何更好的使用servlet?GernericServlet可以由自己仿照一个出来,下面就是介绍了如何写这样的一个类 1.init方法 妥善的保存config对象 2.空参init方法,为了防止开发人 ...

  4. CountDownLatch——闭锁的实现之一

    CountDownLatch实际上是一种闭锁实现.闭锁:是一种同步工具类,可以延迟线程的进度知道其到达终止状态--<Java并发编程实战>.这个怎么解释呢?简单来说,就是有1个线程需要等待 ...

  5. 《安卓网络编程》之第五篇 WebView的使用

    Android提供了WebView组件,,在Android的所有组件中,WebView的功能是最强大的,是当之无愧的老大.WebView组件本身就是一个浏览器实现,她的内核是基于开源WebKit引擎. ...

  6. Mac苹果系统 多系统启动：The rEFInd Boot Manager

    苹果系统 多系统启动 下载安装REFIT: 首先安装一下:REFIT, 在这个页面下载: http://refit.sourceforge.net/#download 选择mac disk image ...

  7. Linux常用命令说明（记录自己Linux命令使用情况，后续会持续更新）

    首次记录时间--20170602 感觉自己Linux命令使用掌握的情况非常差,今天先记录当前会的几个. 1#cd(change directory) 切换工作目录(或者叫修改当前目录) eg. cd ...

  8. Java之线程同步练习

    1.有一张银行卡:*属性:name,money(账户余额)* 多线程操作同一张银行卡: 金额:x(每次存钱取钱的数额,取钱时x为负数,存钱时x为整数) 定义一个add方法:用于存取钱,参数为x,即每次 ...

  9. Java Web入门学习（四）Eclipse与Maven、Tomcat整合配置

    Java Web学习(四)Eclipse与Maven整合配置 一.准备工作 1.Tomcat 8.5.15 2.Maven3.5 3.Eclipse Neon.3 Release (4.6.3) 二. ...

  10. 详解npm的模块安装机制 --社会我npm哥，好用话不多

      依赖树表面的逻辑结构与依赖树真实的物理结构 依赖树表面的逻辑结构与依赖树真实的物理结构并不一定相同! 这里要先提到两个命令:tree -d(linux)和npm ls(npm) 在一个npm项目下 ...