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与IE7中,innerHTML获取param的区别
Mar 15 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
jquery实现轮播图特效
Apr 12 jQuery
解决antd Form 表单校验方法无响应的问题
Oct 27 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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的静态方法与普通方法用法实例分析
2019/09/26 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
bootstrap table实例详解
2017/01/06 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python中拆分字符串的操作方法
2019/07/23 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
python 制作网站小说下载器
2021/02/20 Python
教师自我评价范文
2013/12/16 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
中学生家长评语大全
2014/04/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2014年纠风工作总结
2014/12/08 职场文书
毕业生个人总结
2015/02/28 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js