首页 > 代码库 > AngularJS总结(一)
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.引入
<div ng-app=""></div> //初始化,标明是AngularJS应用程序,并标记作用域
2.初始化数据
<div ng-app="" ng-init=""></div> //赋值对象:字符串.数字.数组.对象...
3.绑定数据
<div ng-app="" ng-init=""> <input type="text" ng-model=""/> //把相关事件绑定在指定标签上面,实现model与view的双向绑定 </div>
4.点击事件
<div ng-app="" ng-init=""> <button ng-click=""></button> </div>
5.遍历数据
<div ng-app="" ng-init="arr=[‘3‘,‘5‘,‘9‘]"> <ul> <li ng-repeat=“x in arr”>{{x}}</li> //遍历集合中的每个数据元素 </ul> </div>
6.动态定义css的对应的ClassName
<style type="text/css"> .active{ color:red; } .inactive{ color:green; } </style>
<body ng-app="" ng-init=""> <input type="text" ng-model="name1" /> <input type="text" ng-model="name2" /> <div ng-class="{true:‘active‘,false:‘inactive‘‘}[isActive]"> {{name1 + "" + name2}} </div> </body>
7.提取多个公共页面
<div ng-include="‘header.html‘"></div> //必须用web站点才能打开,本地模式访问报错;写文件名要加单引号,否则系统当作变量处理
demo展示
1.
<body> <div class="ang" ng-app=""> 输入的内容:<input type="text" ng-model="name" ng-init="name=‘猕猴桃姑娘‘"/> <br /> 显示输入值: {{name}} </div> </body>
效果:(初始状态)
(输入新内容)
2.
<body> <div class="ang" ng-app="" ng-init="name1=‘天气‘;name2=‘不错‘"> 输入内容1:<input type="text" ng-model="name1" /> <br /> 输入内容2:<input type="text" ng-model="name2" /> <div> 内容显示:{{name1 + name2}} </div> </div> </body>
效果:(初始状态)
输入新内容:
3.
<body> <div class="ang" ng-app="" ng-init="fruit={apple:‘苹果‘,banana:‘香蕉‘}"> 对象1:<input type="text" ng-model="fruit.apple" /> <br /> 对象2:<input type="text" ng-model="fruit.banana" /> <br /> {{fruit.apple + "喜欢" + fruit.banana}} </div> </body>
效果:
4.
<body> <div class="ang" ng-app="" ng-init="arr=[1,2,3,4]"> {{arr[1] + arr[2]}} </div> </body>
效果:
5.
<body> <div class="ang" ng-app="" ng-init="click=false"> <button ng-click="click=!click">hide/show</button> <div ng-hide="click"> 输入内容: <input type="text" ng-model="fruit" /> <br /> Wow! <span ng-bind="fruit"></span> </div> </div> </body>
效果:(初始状态)
输入内容:
点击按钮
再次点击按钮
6.
<body> <div class="ang" ng-app="" ng-init="arr=[{‘user‘:‘apple‘,‘pass‘:‘1111‘},{‘user‘:‘banana‘,‘pass‘:‘2222‘}]"> <ul> <li ng-repeat="x in arr"> 用户:<span>{{x.user}}</span> 密码:<span>{{x.pass}}</span> </li> </ul> </div> </body>
效果:
7.
<body> <div class="ang" ng-app="" ng-init="arr=[{‘user‘:‘apple‘,‘pass‘:‘1111‘,‘else‘:‘苹果‘},{‘user‘:‘banana‘,‘pass‘:‘2222‘,‘else‘:‘香蕉‘}]"> <table border="1"> <tr ng-repeat="x in arr"> <td> {{x.user}} </td> <td> {{x.pass}} </td> <td> {{x.else}} </td> </tr> </table> </div> </body>
效果:
8.
<body> <div class="ang" ng-app="" ng-init="obj={‘user‘:‘apple‘,‘pass‘:‘1111‘,‘else‘:‘苹果‘}"> <table border="1"> <tr ng-repeat="(key,value) in obj"> <td>{{key}}</td> <td>{{value}}</td> </tr> </table> </div> </body>
效果:
9.
.apple{ color: orangered; } .banana{ color: green; }
<body> <div class="ang" ng-app="" ng-init="name1=‘you‘;name2=‘you‘;isActive=‘false‘"> <button ng-click="isActive=!isActive">Change</button> <br /> <input type="text" ng-model="name1" /> <input type="text" ng-model="name2" /> <div ng-class="{true:‘apple‘,false:‘banana‘}[isActive]"> {{name1 + name2}} </div> </div> </body>
效果:(初始状态)
点击按钮:
正在准备综合性的第10个案例,十全十美,先吃饭O(∩_∩)O
AngularJS总结(一)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。