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作用域的顶层

原文地址:https://www.cnblogs.com/zijinyouyou/p/6484944.html