从0开始学angularjs-笔记01

一.angularjs简介

    AngularJS
是一个吗动态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真的怪强劲!!

    下面简单吃大家讲解一下方代码AngularJS中冒出的难懂的地方:    

  • ng-app 指定应用之意范围,这里表示,整个html代码都能识别angularjs。
  • ng-model被元素绑定数据模型名称text,input的输入值会满怀到此模型中。
  • {{text}}即是angularjs的一律种植表达式的写法,也便是中档的text是一个变量它和地方的模型名称相对应,能够实时监听input值的转移,即时更新视图显示。

 

   
哈哈,angularjs还是十分简单的吧,希望是小笔记能引起大家对angularjs的兴,后面我还会连续更新angularjs的念笔记。希望对大家有救助。如果对地方的记有未晓的地方,尽管问我,我必会给大家解答之。祝大家在愉快!

待续~~~

 

相关文章