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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
vue 根据选择条件显示指定参数的例子
Nov 09 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中的错误处理、异常处理机制分析
2012/05/07 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
TCP/IP的分层模型
2013/10/27 面试题
关于群众路线的心得体会
2014/11/05 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
导游词格式
2015/02/13 职场文书
总结Python使用过程中的bug
2021/06/18 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python