首页 > 代码库 > AngularJS 介绍

AngularJS 介绍

2024-07-15 05:33:57   217人阅读

简介

AngularJS是为了解决静态网页技术在构建动态应用上的不足.

AngularJS通过使用我们称为 标识符 (directives)的结构，让浏览器能够识别新的语法。例如：
  - 使用双大括号{{}}语法进行数据绑定；
  - 使用DOM控制结构来实现迭代或者隐藏DOM片段；
  - 支持表单和表单的验证；
  - 能将逻辑代码关联到相关的DOM元素上；
  - 能将HTML分组成可重用的组件。

1.  ng-app ：指令标记了 AngularJS 脚本的作用域。

<html lang="en" ng-app>

2. 脚本标签

<script src="lib/angular/angular.js"></script>

3. 双大括号绑定的表达式：{{}}

AngularJS表达式 Angular expression 是一种类似于JavaScript的代码片段。

AngularJS表达式仅在AngularJS的作用域中运行，而不是在整个DOM中运行。

{{‘yet‘ + ‘!‘}}{{yourname || ‘World‘}}

4. ng-controller, ng-repeat

<html ng-app><head>  ...  <script src="lib/angular/angular.js"></script>  <script src="js/controllers.js"></script></head><body ng-controller="PhoneListCtrl">  ...</body></html>

eg:

Search: <input ng-model="query">Sort by:<select ng-model="orderProp">  <option value="name">Alphabetical</option>  <option value="age">Newest</option></select><ul class="phones">  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">    {{phone.name}}    <p>{{phone.snippet}}</p>  </li></ul>

 eg: checkbox, radio

<script> var myApp=angular.module(‘myApp‘,[])    .controller(‘secondCtrl‘,function($scope){        $scope.sex=1        $scope.data=[{id:0, sex:‘男‘},{id:1, sex:‘女‘}]    })  </script>

<div class="test">    <label ng-repeat="d in data">        <input type="radio" name="xingbie" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}}    </label>    <label ng-repeat="d in data">        <input type="checkbox" name="sex" ng-checked="sex==d.id" ng-model="d.id" />{{d.sex}}    </label></div>

 

 

 

 

参考资料:

1. 中文教程网址


联系
我们