AngularJS入门教程-优快云博客

本文链接：https://blog.youkuaiyun.com/xupeng1986/article/details/41201303

先搭建一下卡法环境，

先去官网下载最新的1.3.2的AngularJS版本: https://angularjs.org/（BUild栏选择Uncompressed）

先把源码copy进我的webstorm（把所有的类库都放在vendor文件夹下的angular下（文件名为：angularjs.js））

好了，这样在body的最后就可以加载AngularJS了：

<script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>

ng-app

ng-app指令告诉AngularJS应该管理页面中的哪一块

 
 放在body里面，此时管理整个body里所有的元素（可能是AngularJS的指令，也可能是其他的东西)
在AngularJS中用“{{}}”在view中显示内容，如果body中没有注明ng-app,就会被认为是HTML元素了。
 
 
  
  
  
  

  
  AngularJS的表达式
 
 
 
 AngularJS的表达式通过$parse服务解析执行
与javascript表达式的区别：
 
 属性求值：所有的属性的求值是对于scope的，而javascript是对于window对象的。
宽容性：表达式求值，对于undefined和null，AngularJS是宽容的，但是javascript会产生NullPointEcxeptions
没有控制流程的语句：在AngularJS中不能做一下任何的事情：条件分支，循环，抛出异常。
过滤器：我们可以就将表达式的结果传入过滤链（filter chains）
 
 
 
 <!-- AngularJS的表达式-->

 
 
   
   
{{100+100}} 输出结果为200
{{name}}此时name代表的是变量而不是字符串
{{"name"}}此时为字符串

<pre name="code" class="html"><!DOCTYPE html>

<pre name="code" class="html"><html>

<pre name="code" class="html"><head>

<pre name="code" class="html">    <meta charset="UTF-8">

<pre name="code" class="html"></head>

<pre name="code" class="html"><body ng-app>

<pre name="code" class="html">    <input type="text" />

<pre name="code" class="html">    {{100+100}}

<pre name="code" class="html">    {{name}}

<pre name="code" class="html">    {{100}}

<pre name="code" class="html">    <script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>

<pre name="code" class="html"></body>

<pre name="code" class="html"></html>


<pre style="font-family: Menlo; background-color: rgb(255, 255, 255);"><span style="background-color: rgb(239, 239, 239);"><span style="font-family: Arial; line-height: 26px;"><span style="color: rgb(51, 51, 51);"><span style="font-size: 32px;">ng-model</span></span></span></span>

<pre name="code" class="html"><!DOCTYPE html>

<pre name="code" class="html"><html>

<pre name="code" class="html"><head>

<pre name="code" class="html">    <meta charset="UTF-8">

<pre name="code" class="html"></head>

<pre name="code" class="html"><body ng-app>

<pre name="code" class="html">    <!--

<pre name="code" class="html">    view==> 1234

<pre name="code" class="html">    model==>1234

<pre name="code" class="html">    we do have three views(line14,15 and 16),

<pre name="code" class="html">    then the data is two way binding now!!

<pre name="code" class="html">    -->

<pre name="code" class="html">

<pre name="code" class="html">    <input type="text" ng-model="name"/>

<pre name="code" class="html">    {{name}}

<pre name="code" class="html">    <input type="text" ng-model="name"/>

<pre name="code" class="html">    <script type="test/javascript" src="../../vendor/angular/angularjs.js"></script>

<pre name="code" class="html"></body>

<pre name="code" class="html"></html>



<div>
</div>

Data Binding