一.angularjs简介

AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。

说了这么多，估计你啥都没有理解。。。对吗？别着急，我来说说他的几个特点吧：模块化，数据双向绑定，依赖注入，指令。下面我们就跟着这几个特点进行学习。

二.angularjs基于MVC概念

所谓MVC，就是module（数据模型），view（视图），controller（控制器）

其实angularjs就是将这三个模块相结合，下面是我画的一张模型图，先大致看一下：

三.结合解释

上面也提到了，angularjs的特点是：模块化，依赖注入，双向绑定和指令。现在我来结合上图跟大家说明一下：

模块化：上图中的下面的filter，directive...四个方块就是module的四个代表性的方法（后面会跟大家一一讲解每个函数的用法和功能），也可以理解为各自的小模块，每个模块功能不同，但是分工明确，结构清晰，实现了模块化。

依赖注入：上面说到的四个小模块，看似是独立分开的，但是它们两两之间都有相互依赖的关系，可以互相引用，实现强大的功能（后面会详细介绍如何引用），这就是依赖注入。

指令：从上图中也可以看出，指令就是图中的directive方法了。angularjs中有很多自带的指令，比如ng-app（指定angularjs的作用域）,ng-model（定义一个数据的模型，实现双向绑定）,ng-repeat（重复一个标签）,ng-change（监听标签的值有没有变化）等等，而这里的directive就是最重要的功能就是自定义指令（也有教程说是html的扩展）。

双向绑定：双向绑定就是上图中的module和view，也就是数据和视图双向绑定。会用到刚才提到的ng-model指令。

四.看一个简单的双向绑定的例子。

index.html:

 <!DOCTYPE html>

 <html ng-app>

     <head>

     <meta charset="UTF-8">

     <title>Document</title>

         <script src="angular-1.2.19/angular.js"></script>  <!-- 引入了AngularJS包  -->

     </head>

     <body>

         <div>

             <input type="text" ng-model="text">

             <b>Hello {{text}}</b>

         </div>

     </body>

 </html>

大家可以将上面的代码拿到浏览器运行一下（注意引用angularjs的地址），你会惊奇地发现，angularjs真的很强大！！

下面简单给大家讲解一下上面代码中出现的难懂的地方：

  • ng-app 指定应用的作用范围，这里表示，整个html代码都能识别angularjs。
  • ng-model给元素绑定数据模型名称text，input的输入值会存到这个模型中。
  • {{text}}这是angularjs的一种表达式的写法，也就是中间的text是一个变量它与上面的模型名称相对应，能够实时监听input值的变化，即时更新视图展示。

哈哈，angularjs还是挺简单的吧，希望这个小笔记能够引起大家对angularjs的兴趣，后面我还会继续更新angularjs的学习笔记。希望对大家有帮助。如果对于上面的笔记有不懂的地方，尽管问我，我肯定会给大家解答的。祝大家生活愉快！

待续～～～

从0开始学angularjs－笔记01的更多相关文章

  1. 从0开始学angularjs－笔记04

    由于公司加班,刚到家不久,然而却毫无睡意,可能是老了吧--- 不废话了,没睡意那就做点有意义的事情吧,继续我们的angular学习之路,深夜博文,希望能造福大家! 这次我们来详细讲解angular的双 ...

  2. 从0开始学angularjs－笔记03

    大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构  2.$sc ...

  3. 从0开始学angularjs－笔记02

    上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...

  4. 从0开始学Swift笔记整理（五）

    这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...

  5. 从0开始学Swift笔记整理（四）

    这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person {        var n ...

  6. 从0开始学Swift笔记整理（三）

    这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...

  7. 从0开始学Swift笔记整理（二）

    这是跟在上一篇博文后续内容: --函数中参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方 ...

  8. 从0开始学Swift笔记整理（一）

    Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代 ...

  9. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

随机推荐

  1. [Qt5] How to connect c++ with QML

    Qt5处于过度阶段,架构繁琐,学习成本不低.尤其是UI代码竟然被重写,变了天. Qt中的c++可能是连接OPENCV与QML的一个不错的桥梁,在此学习这部分实用的技术. Reference: http ...

  2. redis java对象操作

    使用Jedis客户端 1. java 对象,需序列化 public class Person implements Serializable { private int id; private Str ...

  3. HTML5 Dashboard – 那些让你激动的 Web 技术

    HTML5 Dashboard 是一个 Mozilla 推出的项目,里面展示了最前沿的 HTML5,CSS3,JavaScript 技术.每一项技术都有简洁,在线演示以及详细的文档链接.这些技术将成为 ...

  4. SQLServer学习笔记系列3

    一.写在前面的话 今天又是双休啦!生活依然再继续,当你停下来的时候,或许会突然显得不自在.有时候,看到一种东西,你会发现原来在这个社会上,优秀的人很多,默默 吃苦努力奋斗的人也多!星期五早上按时上班, ...

  5. Windows Azure Active Directory (3) China Azure AD增加新用户

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的China Azure. 本文是对笔者之前的文档:Windows Azure Active ...

  6. jQuery选择器（二）

    jQuery中有"过滤选择器",通过特定的规则来筛选出所需的DOM元素,都是以(:)开头的. $("div:first")//选取出所有<div>元 ...

  7. html/css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  8. MVC中Action参数绑定的过程

    一.题外话 上一篇:MVC中Action的执行过程 ControllerContext 封装有了与指定的 RouteBase 和 ControllerBase 实例匹配的 HTTP 请求的信息. 二. ...

  9. ORLEANS REMOTE DEPLOYMENT

    Orleans Remote Deployment Table of Contents Overview: 1 Prerequisites. 2 Deployment Steps. 2 Orleans ...

  10. ASP.NET Core 1.0到底是什么？

    ASP.NET Core1.0 是微软的下一代ASP.NET框架.我们将ASP.NET升级到最新版本我们会发现最高级的版本是ASP.NET 4.6对应的FrameWork版本是4.6.1. 那么很多人 ...