Angularjs基础知识及示例汇总

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)下次本人将单独拿出来讲。

(0)

相关推荐

  • AngularJS学习第一篇 AngularJS基础知识

    AngularJS学习第一篇,了解指令.过滤器等相关内容. 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- 1. ng-app: 定义了 AngularJS 应用程序的根元素: ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序: <div ng-app="Demo"></div> 2. ng-init: 为 AngularJS 应用程序定义了 初始值: 通常情况下,我们使用一个控制器或模块来代替它: <div n

  • AngularJS基础知识

    angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听Model的变化.这些可以通过View来发送和渲染,由HTML来展示你的代码 3.方便的REST 4.数据绑定和依赖注入 5.可以操作XML一样操作HTML,AngularJS通过自己的编译器和directives来完成相关的设置 6.模板被作为DOM元素传递到Angular的编译器 7.Angul

  • AngularJS实用基础知识_入门必备篇(推荐)

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q

  • Angularjs 基础入门

    针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写 1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点. 2.加载与module相关的指令 3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节

  • AngularJS 最常用的八种功能(基础知识)

    AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers

  • Angularjs基础知识及示例汇总

    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

  • AngularJS基础 ng-include 指令示例讲解

    AngularJS ng-include 指令 AngularJS 实例 包含 HTML 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS基础 ng-mouseenter 指令示例代码

    AngularJS ng-mouseenter 指令 AngularJS 实例 在鼠标指针穿过元素时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </h

  • AngularJS基础知识笔记之过滤器

    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng

  • AngularJS基础知识笔记之表格

    表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>

  • AngularJS基础 ng-click 指令示例代码

    AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> &l

  • AngularJS基础 ng-class-odd 指令示例

    AngularJS ng-class-odd 指令 AngularJS 实例 为表格的奇数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><

  • AngularJS基础 ng-if 指令用法

    AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

随机推荐