Angularjs基础知识及示例汇总


Posted in Javascript onJanuary 22, 2015

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}}来绑定数据

<label for="name">name:</label>

<input type="text" ng-model="name" id="name"/>

<hr>

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

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

事件绑定使用小案例

<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 href="http://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type.asp</a></dd>

    <dd>ng-init:设定初始值</dd>

  </dt>

</div>

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

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

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

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

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>

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

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>

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

ng-show:设置元素显示

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

<div ng-show="!show">

  ng-show="!show"

</div>

<div ng-show="show">

  ng-show="show"

</div>

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

ng-hide:设置元素隐藏

<div ng-hide="aaa">

  ng-hide="aaa"

</div>

<div ng-hide="!aaa">

  ng-show="!aaa"

</div>

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

运用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="">

  </div>

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

ng-style:和默认style类似

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

<div ng-style="{width:100+'px',height:200+'px',backgroundColor:'red'}">

  box

</div>

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

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-->

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

ng-template:可以加载模板

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

 tpl.html

<h1>hello</h1>

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

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

<div class="container" 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>

 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)下次本人将单独拿出来讲。

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 #Javascript
使用jquery操作session方法分享
Jan 22 #Javascript
jQuery实现“扫码阅读”功能
Jan 21 #Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 #Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 #Javascript
JavaScript的内存释放问题详解
Jan 21 #Javascript
script标签属性用type还是language
Jan 21 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
DWR Ext 加载数据
2009/03/22 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python实现字符串加密成纯数字
2019/03/19 Python
python版百度语音识别功能
2019/07/09 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python右对齐的实例方法
2020/07/05 Python
深入了解Python enumerate和zip
2020/07/16 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
PHP面试题集
2016/12/18 面试题
自荐信怎么写好
2013/11/11 职场文书
《王二小》教学反思
2014/02/27 职场文书
经济类毕业生求职信
2014/06/26 职场文书
授权委托书公证
2014/09/14 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
年会邀请函范文
2015/01/30 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers