AngularJS从0起先学angularjs-笔记01

一.angularjs简介

    AngularJS
是3个为动态WEB应用设计的构造框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更驾驭、简洁地创设你的使用组件。它的立异点在于,利用 数据绑定 和 信赖注入,它使你绝不再写大批量的代码了。那一个统统是因此浏览器端的Javascript达成,那也使得它能够周到地和其他劳动器端技术构成。 
 

   
说了那般多,揣摸您啥都并未掌握。。。对啊?别着急,小编的话说她的多少个特点吗:模块化,数据双向绑定,重视注入,指令。上面大家就跟着那多少个特色开始展览学习。

 

二.angularjs基于MVC概念

    所谓MVC,就是module(数据模型),view(视图),controller(控制器)

   
其实angularjs正是将那多个模块相结合,下边是本人画的一张模型图,先差不离看一下:

 

 

    AngularJS 1

 

 

三.结合解释

   
上边也事关了,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的学习笔记。希望对大家有帮扶。要是对于地点的笔记有不懂的地方,固然问小编,作者肯定会给大家解答的。祝大家生活欢乐!

待续~~~

 

相关文章