AngularJSAngularJS总计(一)

  效果:

点击按钮:

3.

输入内容:

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

  3.减小js代码,减弱DOM成分查找,事件绑定等代码;

二.实现:

  效果:(发轫状态)

5.

  AngularJS通过指令的新属性来扩充HTML,是绑定在DOM成分上的函数;浏览器运营,Angular编写翻译器遍历DOM树来解析HTML,寻找指令属性函数,并征集起来,实行排序,依据事先级依次执行指令函数.(前缀:ng-)

7.

AngularJS 1

AngularJS 2

<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>

  7.提取多少个公共页面

  2.模板;

AngularJS 3

  2.开端化数据

<div ng-include="'header.html'"></div>     //必须用web站点才能打开,本地模式访问报错;写文件名要加单引号,否则系统当作变量处理

 

 6.

  效果:

AngularJS 4

三.优点:

AngularJS 5

AngularJS 6

AngularJS 7

  4.借助注入;

AngularJS 8

<div ng-app=""></div>   //初始化,标明是AngularJS应用程序,并标记作用域
<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>
<div ng-app="" ng-init="">
    <input type="text" ng-model=""/>      //把相关事件绑定在指定标签上面,实现model与view的双向绑定
</div>

点击按钮

  效果:

双重点击按钮

  效果:(早先状态)

 

AngularJS 9 

 

  效果:

AngularJS 10

  3.绑定数据

 demo展示

  

<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>
<div ng-app="" ng-init=""></div>     //赋值对象:字符串.数字.数组.对象...

AngularJS 11

9.

  2.html和js分离,体现和逻辑的分手;

AngularJS是三个为动态WEB应用设计的布局框架,那种措施能够扩充HTML语法,弥补创设动态WEB应用时静态文本的不足.

输入新内容:

  5.遍历数据

一.三个基天性子:

  效果:

<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>
<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>

  1.多少双向绑定;

功效:(初步状态)

2.

<body>
  <div class="ang" ng-app="" ng-init="arr=[1,2,3,4]">
    {{arr[1] + arr[2]}}
  </div>
</body>

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

  4.点击事件

  3.MVVM;

 

<body>
  <div class="ang" ng-app="">
    输入的内容:<input type="text" ng-model="name" ng-init="name='猕猴桃姑娘'"/>
    <br />
    显示输入值:
    {{name}}
  </div>
</body> 

  

  1.引入

.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>

AngularJS 12

1.

  4.适合API开发.

AngularJS 13

  5.指令.

AngularJS 14

近期读书AngularJS的情节,小果做了计算文书档案,方便重复记念.

<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! 
    </div>
  </div>
</body>

ok,代码君来了:

AngularJS 15

<body>
  <div class="ang" ng-app="" ng-init="arr=[{'user':'apple','pass':'1111'},{'user':'banana','pass':'2222'}]">
  <ul>
    <li ng-repeat="x in arr">
    用户:{{x.user}}
    密码:{{x.pass}}
    </li>
  </ul>
  </div>
</body>

4.

<div ng-app="" ng-init="">
    <button ng-click=""></button>   
</div>

(输入新内容)

 

<div ng-app="" ng-init="arr=['3','5','9']">
    <ul>
      <li ng-repeat=“x in arr”>{{x}}</li>   //遍历集合中的每个数据元素
    </ul>
</div>

8.

  效果:(早先状态)

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

相关文章