从0开始学angularjs－笔记01
一.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的更多相关文章
- 从0开始学angularjs－笔记04
由于公司加班,刚到家不久,然而却毫无睡意,可能是老了吧--- 不废话了,没睡意那就做点有意义的事情吧,继续我们的angular学习之路,深夜博文,希望能造福大家! 这次我们来详细讲解angular的双 ...
- 从0开始学angularjs－笔记03
大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$sc ...
- 从0开始学angularjs－笔记02
上一节课主要跟大家讲解了angularjs的几种特性和看了一个简单的双向绑定的例子.最近都没有时间写博客了....忙成狗呀...今天周末,在写一篇吧~~ 今天主要跟大家详细讲解一下angularjs的 ...
- 从0开始学Swift笔记整理（五）
这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...
- 从0开始学Swift笔记整理（四）
这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var n ...
- 从0开始学Swift笔记整理（三）
这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...
- 从0开始学Swift笔记整理（二）
这是跟在上一篇博文后续内容: --函数中参数的传递引用 类是引用类型,其他的数据类型如整型.浮点型.布尔型.字符.字符串.元组.集合.枚举和结构体全部是值类型. 有的时候就是要将一个值类型参数以引用方 ...
- 从0开始学Swift笔记整理（一）
Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代 ...
- SaToken学习笔记-01
SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...
随机推荐
- CSS默认可继承样式
前面的话 一直想总结出一份可继承样式的列表.常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 [注意]关于样式的详细信息移步至此 常用可继承样式 col ...
- hdu 1241 Oil Deposits (一次dfs搞定有某有)
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...
- C#编写简单的聊天程序
这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学习并不够深入,这篇文章是对于自己知识的一个巩固,同时希望能为初学的朋友提供一点参考.文章大体分为四个部分:程序的分析与设计.C#网络编 ...
- 检查点（Checkpoint）过程如何处理未提交的事务
每次我讲解SQL Server之前,我都会先简单谈下当我们执行查询时,在SQL Server内部发生了什么.执行一个SELECT语句非常简单,但是执行DML语句更加复杂,因为SQL Server要修改 ...
- Swift泛型协议的N种用法
They said "you should learn a new language every year," so I learned Swift. Now I learn ...
- 基于HTML5 Canvas实现工控2D叶轮旋转
之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转. http://www.hightopo.com/guide/guide/core/serialization/e ...
- 优化MySchool数据库总结
- [转]HTML5 本地图片预览
[原文链接] https://www.huangwenchao.com.cn/2015/03/html5-image-preview.html 问题 加入我们在 HTML 里面有一个图片上传控件: & ...
- 深入Java事务的原理与应用
一.什么是JAVA事务 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID原则.ACID是原子性(atomicity).一致性(consistency).隔离性 ( ...
- 不可或缺 Windows Native (12) - C++: 引用类型
[源码下载] 不可或缺 Windows Native (12) - C++: 引用类型 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 引用类型 示例CppReferen ...