angularjs学习笔记

1.ng-app=""为整个anguarjs入口，所以一个页面中只能有一个ng-app标签

2.数字，字符串，对象和数组的应用：

    <div ng-app="" ng-init="quantity=2;cost=5">
               <p>我的第一个表达式:{{5+5}}</p><!--结果为10-->
               <p>总价：{{ quantity * cost }}</p><!--结果为10-->
   </div>

    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
           <p>姓名：{{firstName+"  " +lastName}}</p>
           <p>姓名：<span ng-bind="firstName+' ' +lastName"></span></p>
  　</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
           <p>姓名：{{person.lastName}}</p>
</div>

    <div ng-app="" ng-init="points=[1,2,3,4,5]">
           <p>第三个值为：{{points[2]}}</p>
       </div>

3.angularjs指令：ng-app初始化一个angularjs应用程序，ng-init初始化应用程序数据，ng-model把元素绑定到应用程序，ng-repeat对应集合或数组中的每一项会克隆一次html元素

<div ng-app="" ng-init="firstName='John'">
        <p>在输入框中尝试输入：</p>
        <p>姓名:<input type="text" ng-model="firstName"/>
         <p>你输入的为：{{firstName}}</p> 
</div>

<div ng-app="" ng-init="names=['ZhangSan','LiSi','WangWu']">
     <p>使用ng-repeat来循环数组</p>
     <ul>
         <li ng-repeat="x in names">{{x}}</li>
     </ul>
</div>

ng-model可以将输入的值与angularjs创建的变量绑定，同时也可实现双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
     名字:<input ng-model="name"/>
     <h1>你输入了：{{name}}</h1>
</div> 
 <script >
     var app=angular.module("myApp",[]);
     app.controller("myCtrl",function($scope){
         $scope.name="John Doe";
     });
 </script>

 4.controller使用注意事项：

　　A.不要试图复制controller，一个控制器一般指负责一小块试图

　　B.不要在controller中操作dom，这不是控制器的职责

　　C.不要在controller中做数据格式化，ng有更好的表单控件

　　D.不要在controller中做数据过滤，ng有$filter服务

　　E.一般来说，controller是不会相互调用的，控制器之间的交互会通过事件进行

5.$scope概述：

　　A.angular组成如下：a.View视图，即HTML;b.Model模型，当前视图中可用的数据，c.controller控制器，即javascript函数，可以添加或修改属性。scope是模型，一个javascript对象，带有属性和方法，这些属性和方法可以在视图和控制器当中使用

　　B.根作用域$rootscope,所有的 应用都有一个$rootscope，它可以作用在ng-app指令包含的所有html元素。$rootscope可作用于整个应用中，是各个controller中scope的桥梁，用$rootscope定义的值可以在各个scope中使用。$rootscope即为angular作用域的顶层