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 相关文章推荐
JavaScript 函数式编程的原理
Oct 16 Javascript
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
再谈javascript原型继承
Nov 10 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
element多个表单校验的实现
May 27 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
php如何调用webservice应用介绍
2012/11/24 PHP
php递归创建目录的方法
2015/02/02 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python Django框架实现自定义表单提交
2016/03/25 Python
python生成式的send()方法(详解)
2017/05/08 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python实现tail -f 功能
2020/01/17 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
法人委托书
2014/07/31 职场文书
公司授权委托书范本
2014/09/18 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
入党后的感想
2015/08/10 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js
TS 类型兼容教程示例详解
2022/09/23 Javascript