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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
利用javaScript处理常用事件详解
Apr 14 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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&amp;MYSQL留言板源码
2020/07/19 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
php生成curl命令行的方法
2015/12/14 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JavaScript面象对象设计
2008/04/28 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python help()函数用法详解
2014/03/11 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Python输入二维数组方法
2018/04/13 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
考博自荐信
2013/10/25 职场文书
护士找工作求职信
2014/07/02 职场文书
逃课检讨书
2015/01/26 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
重阳节活动主持词
2015/07/04 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python