首页 > Web开发 > 详细

angularjs学习笔记

时间:2017-03-01 20:41:12      阅读:185      评论:0      收藏:0      [点我收藏+]

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是不会相互调用的,控制器之间的交互会通过事件进行

angularjs学习笔记

原文:http://www.cnblogs.com/zijinyouyou/p/6484944.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!