码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS 介绍

时间:2014-08-01 12:50:11      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   strong   io   

简介

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. 中文教程网址

AngularJS 介绍,布布扣,bubuko.com

AngularJS 介绍

标签:style   blog   http   color   java   使用   strong   io   

原文地址:http://www.cnblogs.com/gordensong/p/3884352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!