Angularjs基础知识及示例汇总_AngularJS

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

Angularjs官网：https://angularjs.org/ 官网有demo,访问可能需要FQ

Angularjs中国社区：http://www.angularjs.cn/ 适合初学者

引用文件：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

使用angular注意

引用angularjs库：https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本节示例的github上下载
需要在你使用的区域加上ng-app="appName",或者直接ng-app（全局）。
设置控制器 ng-controller="Ctrl"。
测试一下示例请注意以下几点

需要在head之前引入angularjs代码,作者使用的是angular-1.0.1.min.js，请注意版本区别。
所有小示例都是在以下区域运行，记得在作用区域加上 ng-app。
下面通过一些小的案例来说明angularjs默认的常见的指令和用法。

hello world程序(双数据绑定)

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

复制代码 代码如下:

name:

---

hello:{{name || 'liteng'}}

 http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

事件绑定使用小案例

复制代码 代码如下:

  单价：
  数量:   
 

  总价：{{(price) * (quantity)}}
 

   

注:

   

涉及html5的input：http://www.w3school.com.cn/html5/att_input_type.asp

">http://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type.asp>
   

ng-init:设定初始值

 

 http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init:可默认指定属性值

复制代码 代码如下:

{{value}}

 http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

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

复制代码 代码如下:

 

我有{{friends.length}} 朋友.他们是

 

   
• 
        [{{$index+1}}]:{{friend.name}}年龄为：{{friend.age}}
     

  

 http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom的点击事件

复制代码 代码如下:

  {{a}}

<script> <br /> function ctrl($scope){<br /> $scope.a='hello';<br /> $scope.showMsg=function(){<br /> $scope.a='world';<br /> }<br /> }<br /> </script>

 http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show:设置元素显示

注：ng-show="!xx":在属性值前面加！表示确定显示,如果不加！表示不确定则不显示

复制代码 代码如下:

  ng-show="!show"

  ng-show="show"

 http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide:设置元素隐藏

复制代码 代码如下:

  ng-hide="aaa"

  ng-show="!aaa"

 http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

运用ng-show制作toggle效果

复制代码 代码如下:

toggle

  显示logo
 

    http://liteng.org/sites/default/files/logo.png" alt="">
 

 http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style:和默认style类似

这里请注意书写格式：字符串需要用引号包含

复制代码 代码如下:

  box

 http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

filter:过滤字段

复制代码 代码如下:

{{9999|number}}

{{9999+1 |number:2}}

{{9*9|currency}}

{{'hello world' | uppercase}}

 http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template:可以加载模板

复制代码 代码如下:

 tpl.html

复制代码 代码如下:

hello

 http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http:一个类似ajax的方法很管用

复制代码 代码如下:

 

HTTP请求-方法1

   

       
• 
          {{x.Name}}+{{x.Country}}
         

   

方法2

 

    

       
• 
              {{y.aid}}+{{y.title}}
         

    

<script><br /> //方法1<br /> var TestCtrl=function($scope,$http){<br /> var p=$http({<br /> method:'GET',<br /> <a href="'json/date.json'">url:'json/date.json'<br /> });<br /> p.success(function(response,status,headers,config){<br /> $scope.names=response;<br /> });<br /> p.error(function(status){<br /> console.log(status);<br /> });<br /> }<br /> //方法2<br /> function TestCtrl2($scope,$http){<br /> $http.get('json/yiqi_article.json').success(function(response){<br /> $scope.info=response;<br /> });<br /> }<br /> </script>

 http://2.liteng.sinaapp.com/angularjsTest/ajax.html

以上所有的code:https://github.com/litengdesign/angularjsTest

实现的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html

至于angularjs的路由（router）和指令（directive）下次本人将单独拿出来讲。