欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

angularJS 入门基础_AngularJS

程序员文章站 2022-04-09 09:05:14
...
angular   

所有用到的库, 全部用的CDN:

复制代码 代码如下:

">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">






angular最强大的东西,数据的绑定binding




{{data}}






通过angular,展示数组对应的数据;.

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">






通过angular,展示数组对应的数据;






  • {{i.name}}----{{i.age}}








.数据过滤器的DEMO:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">






数据过滤器;


{{sourCode}}


{{sourCode | up}}





.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;:

复制代码 代码如下:

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


angular
  
">http://cdn.bootcss.com/jquery/2.1.1/jquery.js">>
">http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js">>
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">






angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;


{{json}}





angular的指令;


do you content for?
'
};
})