跟我从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:

 1 <!DOCTYPE html>
 2 <html ng-app>
 3     <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6         <script src="angular-1.2.19/angular.js"></script>  <!-- 引入了AngularJS包  -->
 8     </head>
 9     <body>
10         <div>
11             <input type="text" ng-model="text">
12             <b>Hello {{text}}</b>
13         </div>
14     </body>
15 </html>

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

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

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

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

待续~~~

时间: 2024-08-09 10:34:29

跟我从0开始学angularjs-笔记01的相关文章

从0开始学angularjs-笔记04

由于公司加班,刚到家不久,然而却毫无睡意,可能是老了吧--- 不废话了,没睡意那就做点有意义的事情吧,继续我们的angular学习之路,深夜博文,希望能造福大家! 这次我们来详细讲解angular的双向数据绑定.我会从以下列表依次讲解. 简单的例子 取值表达式与ng-bind的使用 双向绑定的典型场景-表单 动态切换标签样式 ng-show和ng-hide 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实

从0开始学angularjs-笔记03

大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构  2.$scope的含义  3.模块化和依赖注入. 一.演示一个完整的项目结构. 下面的所有这些代码,都是转载于@大漠穷秋 老师的.我转载来之后放到了github上,大家可以去这个链接看源代码.一边看,一边学习,效果最好了---- 下面我们来看这个截图, 这就是一个完整的angularjs项目应该有的目录结构.

从0开始学Swift笔记整理(三)

这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性返回数据.存储属性可以存储数据,分为常量属性(用关键字let定义)和变量属性(用关键var定义). 存储属性概念: 我们在前面曾用到过属性,Employee类和Department结构体.它们的类图如下,Employee 的部门属性dept与Department之间进行了关联. 我们可以在定义存储属

从0开始学Swift笔记整理(一)

Swift 是一种适用于 iOS 和 OS X 应用的全新编程语言,它建立在最好的 C 和 Objective-C 语言之上,并且没有 C 语言的兼容性限制.Swift 采用安全的编程模式,增加了现代功能使 编程更容易.更灵活.更有趣.Swift 以成熟且备受宠爱的 Cocoa 和 Cocoa Touch 框架为 支撑,这是一个重新构想软件开发的机会. --我的第一行Swift代码 import Foundation             //表示引入Foundation框架 var str

从0开始学Swift笔记整理(五)

这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风格的API比较麻烦,但是在OS X和iOS开发过程中,有时候使用Core Foundation框架的API是非常方便的,例如在与C语言混合编码的时候. Core Foundation框架与Foundation框架紧密相关,他们具有与相同的接口,但是不同.Core Founda

从0开始学Swift笔记整理(四)

这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var name: String var age: Int func description() -> String { //实例方法 return "\(name) 年龄是: \(age)" } class func printClass() ->() { //静态方法 print( "P

cocos2dx3.0 超级马里奥开发笔记(一)——loadingbar和pageview的使用

学完cocos2dx课程的第一个项目选择了超级玛丽.可以说有自己的想法,简单但是确实不简单. 我花了一天把一份2.1版本的超级玛丽源码升级到了3.0,改改删删,参考那个源码虽然好多不懂,但是马虎升级成功,游戏正常玩耍. 本着不为把游戏做出来而写代码的想法,罗列了一下这个游戏可以使用到的知识点.数据持久化的三种方式.loading页面.tmx地图解析.cocosStudio场景.屏幕适配.关卡如何选择.代码结构的优化(各种类的抽象继承),在基本功能出来后可以自己去设计变态关卡等. 两天实现了loa

【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇

为了进一步学习PHP,本周我选定了慕课网的PHP工程师学习计划, 从今天2015-07-06 10:24:47开始从头学习:计划本周尽快学习完成本课程,谨此作为笔记. 有个好的学习计划和思路非常非常重要,非常感谢慕课网提供本套学习计划,希望更多地学习平台能提供像这样全面一条龙学习思路清晰地教程. 计划图:链接 我的学习状况:2015-07-06 10:29:46 开始随记: php工程师学习计划笔记——01 入门必学web基础 htmlcss基础课程 篇 入门篇: text-align:cent

【从0开始学Java】1.面向对象的特征有哪些方面

+Q325957484可以领取学习视频 1.面向对象的特征有哪些方面 1.Java基础培训,从0开始学Java:抽象 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象包括两个方面,一是过程抽象,二是数据抽象. 2.Java基础培训,从0开始学Java:继承 继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法.对象的一个新类可以从现有的类中派生,这个过程称为