AngularJS总结(一)

最近学习AngularJS的内容,小果做了总结文档,方便重复记忆.

AngularJS是一个为动态WEB应用设计的结构框架,这种方式可以扩展HTML语法,弥补构建动态WEB应用时静态文本的不足.

一.五个核心特性:

　　1.数据双向绑定;

　　2.模板;

　　3.MVVM;

　　4.依赖注入;

　　5.指令.

二.实现:

　　AngularJS通过指令的新属性来扩展HTML,是绑定在DOM元素上的函数;浏览器启动,Angular编译器遍历DOM树来解析HTML,寻找指令属性函数,并收集起来,进行排序,按照优先级顺序执行指令函数.(前缀:ng-)

三.优点:

　　1.实现前后端分离,后端只提供数据接口;路由以及模板等在前端完成;

　　2.html和js分离,展示和逻辑的分离;

　　3.减少js代码,减少DOM元素查找,事件绑定等代码;

　　4.适合API开发.

ok,代码君来了:

　　1.引入

   //初始化,标明是AngularJS应用程序,并标记作用域

　　2.初始化数据

     //赋值对象:字符串.数字.数组.对象...

　　3.绑定数据

　　　       //把相关事件绑定在指定标签上面,实现model与view的双向绑定

　　4.点击事件

　　5.遍历数据

　　　　

	　　
{{x}}
   //遍历集合中的每个数据元素
　　　　

　　6.动态定义css的对应的ClassName

　　
　　
　　

	{{name1 + "" + name2}}
　　

　　7.提取多个公共页面

     //必须用web站点才能打开,本地模式访问报错;写文件名要加单引号,否则系统当作变量处理

　demo展示

1.

　　

	输入的内容:
	

	显示输入值:
	{{name}}
　　
　

　　效果:(初始状态)

(输入新内容)

2.

　　

	输入内容1:
	

	输入内容2:
	

	　　内容显示:{{name1 + name2}}
	
　　

　　效果:(初始状态)

输入新内容:

3.

　　

	对象1:
	

	对象2:
	

	{{fruit.apple + "喜欢" + fruit.banana}}
　　

　　效果:

4.

　　

	{{arr[1] + arr[2]}}
　　

　　效果:

5.

　　

	hide/show
	

	　　输入内容: 
	　　

	　　Wow! 
	
　　

　　效果:(初始状态)

输入内容:

点击按钮

再次点击按钮

 6.

　　

　　

	

	用户:{{x.user}}
	密码:{{x.pass}}
	
　　
　　

　　效果:

7.

　　

	
		　　
		　　
		　　

		

			{{x.user}}
		　　

			{{x.pass}}
		　　

			{{x.else}}
		　　
		
	
　　

　　效果:

8.

　　

	
	　　
	　　
　　　　

		
{{key}}
		
{{value}}
　　

　　效果:

9.

.apple{
　　color: orangered;
　}
.banana{
　　color: green;
　}

　　

	Change
	

	
	
	

	　　{{name1 + name2}}
	
　　

效果:(初始状态)

点击按钮:

 正在准备综合性的第10个案例,十全十美,先吃饭O(∩_∩)O