Angular.js入门(2)

不知道入门(1)大家看了没有，今天进行下一步延伸

（1）JS提取出去
        实现简单的MVC框架
（2）binding指令双向数据绑定
　　　　　　{{表达式}} 页面可以直接执行
　　　　　　ng-model='uname‘     {{uname}}
　　　　　　<div ng-bind='uname'></div>
　　　　　　以下方法加载时候不会出现空的大括号在那，有内容时候才输出
　　　　　　（1）<h1 ng-bind='uname'></h1>
　　　　　　（2）<h1 ng-clock  class='ng-clock'>{{uname}}</h1>
输出内容
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>bind</title>
 6     <style type="text/css">
 7         .red{ background: red; width: 10px;height: 10px;}
 8     </style>
 9 </head>
10 <body  ng-app="app">
11     <div  ng-controller="myCtrl">
12         <input type="text" ng-model="sname"/><br/>
13         <div ng-bind="'用户名:'+sname"></div><br/>
14         <span  class="{{sname}}">{{sname}}</span>
15     </div>
16 <script  type="text/javascript" src="js/angular.min.js"></script>
17 <script type="text/javascript">
18     var app = angular.module('app',[]);
19     app.controller('myCtrl',function($scope){
20            $scope.sname='';
21      });
22 </script>
23 </body>
24 </html>
简单登录实现

---------------------------------------------------------我是华丽分割线-----------------------------------------------------------------------------------------------------

进阶部分：

（1）Controllers使用

 定义controller
在controller中声明变量
使用ng-bind绑定数据并显示controller的作用域
控制器绑定在哪里，就到标签的结束到哪里
 
（2）在$scope中变量和方法的使用
在$scope上定义方法并在页面上进行绑定。
在$scope上定义变量并在方法中使用。
$scope.reverse = function(){
    return $scope.msg.split("").reverse().join("");
};
$scope.login = function(){
    console.log($scope.user);
};
 
ng-show='errormsg.length>0';  什么时候显示
 
services与指令的使用
自定义Service服务
Service的应用
常用指令的使用
常用指令NG-REPEEAT使用
 
控制器中使用服务
vaule  constant  factory                service                   
变量    常量         参数Data+函数      参数Data+函数  
 
在多个Controller中共享数据，使用factory
比如：下单和购物车用一个列表时候，可以使用工场的清单
 
 
常用指令 ng-bind  ng-model  ng-show/hide  ng-if  ng-submit   ng-disabled
 
ng-check   nc-src  ng-href  ng-class  ng-selected   
ng-disabled = "from的name .$invalid"
from ng-submit = "regirester()"
 
ng-repeat   $first  $last
ng-repeat = 'a  in list';
{{$index + a.address}}  $index 下标
ng-if =“last” 如果是最后一个
ng-class = "{'selected':$first}"  选中第一个
 

 

posted @ 2016-04-28 17:40  耐心_bunny  阅读(235)  评论(0)  编辑  收藏  举报