Angularjs基础知识及示例汇总

转载 2015年11月20日 15:47:44

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

MySql基础知识总结

MySql基础知识总结
  • weixin_37547197
  • weixin_37547197
  • 2017年06月08日 09:02
  • 293

C++基础知识汇总

C++面试题——基础概念篇 唐璐 http://blog.csdn.net/worldwindjp/         面试C++程序员的时候一般都是3板斧,先是基础问答,然后一顿...
  • weiyuefei
  • weiyuefei
  • 2016年08月01日 20:59
  • 968

神经网络基础知识简介

神经网络简介 1 几种常见的神经元 (1)  线性神经元 (2)  二进制神经元 (3)  逻辑神经元(sigmoid 神经元) (4)  随机二进制神经...
  • u010601901
  • u010601901
  • 2015年07月07日 21:52
  • 548

AngularJS的基本知识详解

1、 AngularJS是什么?         AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。      首先,它是一个框架,不是类库,是像EXT一样提供一整套方...
  • AbbyDream
  • AbbyDream
  • 2017年03月01日 19:26
  • 599

linux基础知识总结

Linux是多用户,多任务的操作系统,这意味着多人可以同时使用一台主机。因为每个用户的个人喜好与隐私问题,文件的所有者就显得尤为重要。将用户分为不同的组别当然是为了方便管理。因此用户与文件之间的关系就...
  • wangdan199112
  • wangdan199112
  • 2015年02月28日 20:07
  • 1385

C++类的基本知识总结

最近看了C++ primer plus,学习了类,想写点什么给初学者,也算是一份收获: 首先,C++是OOP,既然这样,就要适合这种思维的编程思考,比如说:用class、方法等等这些。 先说class...
  • u012541747
  • u012541747
  • 2015年04月24日 17:41
  • 582

AngularJs入门实例

《一》、四大核心思想  1、依赖注入   2、模块化   3、双向绑定   4、语义化标签《二》、使用ng指令  1、ng-app 指令定义了AngularJs应用程序   2、ng-cont...
  • mqy1023
  • mqy1023
  • 2016年05月30日 19:41
  • 1476

Python基础知识点总结

Python基础知识点
  • u012845311
  • u012845311
  • 2017年03月23日 14:53
  • 586

神奇的angularJS——简单的angular例子

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线,它非但不畏缩不前,反而正面出击,提出了有效的解决方案。 很多前端应用的开发框架,比如Backbone、...
  • ft6302244
  • ft6302244
  • 2014年12月30日 11:21
  • 11113

Zigbee入门之基础概念

大二就开始接触ZigBee硬件开发确实是一个不小的挑战,尤其是对一个计算机专业的同学而言。 最近开始写项目申请书,各种资料看的头都大了。为了以后更好的进行开发,这次记录了一些名词和解释 ...
  • u014293306
  • u014293306
  • 2015年04月12日 15:35
  • 1041
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angularjs基础知识及示例汇总
举报原因:
原因补充:

(最多只允许输入30个字)