Angularjs中国社区

作者:betway计算机知识

angularjs是google开采的一款高大上的前端mvc开荒框架。

Angularjs官网: 官方网址有demo,访问大概要求FQ

Angularjs中华夏族民共和国社区: 适合初专家

引用文件:

使用angular注意

  1. 引用angularjs库:.... 能够在本节示例的github上下载
  2. 供给在你利用的区域丰盛ng-app="appName",大概直接ng-app(全局)。
  3. 安装调节器 ng-controller="Ctrl"。

测试一下示范请小心以下几点

  1. 内需在head以前引进angularjs代码,作者运用的是angular-1.0.1.min.js,请小心版本有别。
  2. 具备小示例都是在以下区域运行,记得在效益区域拉长 ng-app。

上边通过一些小的案例来注脚angularjs默许的宽泛的通令和用法。

hello world程序(双数额绑定)

应用ng-model={{name}}来绑定数据

<label for="name">name:</label>  <input type="text" ng-model="name" id="name"/>  <hr>  hello:{{name || 'liteng'}}  

 

 

事件绑定使用小案例

<div>    单价:<input type="number" min=0 ng-model="price" ng-init="price=299">    数量: <input type="number" min=0 ng-model="quantity" ng-init="quantity=1">     <br>    总价:{{(price) * (quantity)}}    <dt>      <dl>注:</dl>      <dd>涉及html5的input:<a  >http://www.w3school.com.cn/html5/att_input_type.asp</a></dd>      <dd>ng-init:设定初始值</dd>    </dt>  </div>  

 

ng-init:可默许钦点属性值

<p ng-init="value='hello world'">{{value}}</p>  

 

ng-repeat:用于迭代数据类似于js中的 i for info

<div ng-init="friends=[{name:'Jhon',age:25},{name:'Mary',age:28}]"></div>    <p>我有{{friends.length}} 朋友.他们是</p>    <ul>      <li ng-repeat="friend in friends">        [{{$index 1}}]:{{friend.name}}年龄为:{{friend.age}}      </li>     </ul>  

 

ng-click:dom的点击事件

<div ng-controller="ctrl">    <button ng-dblclick='showMsg()'>{{a}}</button>  </div>  <script>       function ctrl($scope){        $scope.a='hello';        $scope.showMsg=function(){          $scope.a='world';        }       }    </script>  

 

ng-show:设置成分彰显

注:ng-show="!xx":在属性值后边加!表示显著呈现,假若不加!表示不明确则不出示

<div ng-show="!show">    ng-show="!show"  </div>  <div ng-show="show">    ng-show="show"  </div>  

 

ng-hide:设置成分隐藏

<div ng-hide="aaa">    ng-hide="aaa"  </div>  <div ng-hide="!aaa">    ng-show="!aaa"  </div>  

 

运用ng-show制作toggle效果

<h2>toggle</h2>    <a href ng-click="showLog=!showLog">显示logo</a>    <div ng-show="showLog">      <img ng-src="http://liteng.org/sites/default/files/logo.png" alt="图片 1">    </div>  

 

ng-style:和默认style类似

此地请留意书写格式:字符串要求用引号包罗

<div ng- px',height:200 'px',backgroundColor:'red'}">    box  </div>  

 

filter:过滤字段

<div>{{9999|number}}</div> <!--9,999-->  <div>{{9999 1 |number:2}}</div><!--10,000.00-->  <div>{{9*9|currency}}</div><!--$81.00-->  <div>{{'hello world' | uppercase}}</div><!--HELLO WORLD-->  

 

ng-template:能够加载模板

<div ng-include="'tpl.html'"></div>  

 tpl.html

<h1>hello</h1>  

 

$http:三个看似ajax的法子很平价

<div  ng-controller="TestCtrl">    <h2>HTTP请求-方法1</h2>      <ul>       <li ng-repeat="x in names">       {{x.Name}} {{x.Country}}       </li>      </ul>       </div>  <h2>方法2</h2>    <div ng-controller="TestCtrl2">       <ul>       <li ng-repeat="y in info">        {{y.aid}} {{y.title}}       </li>       </ul>  </div>  <script>  //方法1        var TestCtrl=function($scope,$http){           var p=$http({            method:'GET',            url:'json/date.json'           });           p.success(function(response,status,headers,config){              $scope.names=response;           });           p.error(function(status){              console.log(status);           });        }            //方法2        function TestCtrl2($scope,$http){         $http.get('json/yiqi_article.json').success(function(response){               $scope.info=response;         });          }  </script>   

 

上述全数的code:

实现的demo:

博客来源:

关于angularjs的路由(router)和指令(directive)下次自家将独立拿出去讲。

自家来源:www.liteng.org如需转发请表明出处。不然将追究法律责任

版权归作者和今日头条全部,请友情转发。


本文由betway-必威手机用户端-必威注册发布,转载请注明来源

关键词: 必威电子游戏