一.angularjs简介
AngularJS
是3个为动态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的学习笔记。希望对大家有帮扶。要是对于地点的笔记有不懂的地方,固然问小编,作者肯定会给大家解答的。祝大家生活欢乐!
待续~~~