Angularjs基础知识及示例汇总  更新时间:2015年01月22日 09:52:35   投稿:hebedich   本文给大家总结了一些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}}来绑定数据 复制代码 代码如下: name: hello:{{name || ‘liteng’}}  http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html 事件绑定使用小案例 复制代码 代码如下:   单价:   数量:        总价:{{(price) * (quantity)}}       注:     涉及html5的input:http://www.w3school.com.cn/html5/att_input_type.asp     ng-init:设定初始值    http://2.liteng.sinaapp.com/angularjsTest/event-bind.html ng-init:可默认指定属性值 复制代码 代码如下: {{value}}  http://2.liteng.sinaapp.com/angularjsTest/ng-init.html ng-repeat:用于迭代数据类似于js中的 i for info 复制代码 代码如下:   我有{{friends.length}} 朋友.他们是             [{{$index+1}}]:{{friend.name}}年龄为:{{friend.age}}         http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html ng-click:dom的点击事件 复制代码 代码如下:   {{a}}  http://2.liteng.sinaapp.com/angularjsTest/ng-click.html ng-show:设置元素显示 注:ng-show=”!xx”:在属性值前面加!表示确定显示,如果不加!表示不确定则不显示 复制代码 代码如下:   ng-show=”!show”   ng-show=”show”  http://2.liteng.sinaapp.com/angularjsTest/ng-show.html ng-hide:设置元素隐藏 复制代码 代码如下:   ng-hide=”aaa”   ng-show=”!aaa”  http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html 运用ng-show制作toggle效果 复制代码 代码如下: toggle   显示logo          http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html ng-style:和默认style类似 这里请注意书写格式:字符串需要用引号包含 复制代码 代码如下:   box  http://2.liteng.sinaapp.com/angularjsTest/ng-style.html filter:过滤字段 复制代码 代码如下: {{9999|number}} {{9999+1 |number:2}} {{9*9|currency}} {{‘hello world’ | uppercase}}  http://2.liteng.sinaapp.com/angularjsTest/filter.html ng-template:可以加载模板 复制代码 代码如下:  tpl.html 复制代码 代码如下: hello  http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html $http:一个类似ajax的方法很管用 复制代码 代码如下:   HTTP请求-方法1                     {{x.Name}}+{{x.Country}}             方法2                            {{y.aid}}+{{y.title}}               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)下次本人将单独拿出来讲。 您可能感兴趣的文章: AngularJS 最常用的八种功能(基础知识) AngularJS学习第一篇 AngularJS基础知识 Angularjs 基础入门 AngularJS基础知识 AngularJS实用基础知识_入门必备篇(推荐) angularjs 基础 相关文章 AngularJS快速入门 本文通过几个循序渐进的例子,给大家详细讲解了如何快速入门AngularJS,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下。 2015-04-04 简单说说angular.json文件的使用 这篇文章主要介绍了简单说说angular.json文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-10-10 AngularJS教程 ng-style 指令简单示例 本文主要介绍AngularJS ng-style 指令,这里对ng-style 指令做了详细的基础资料整理,并附有代码示例,有需要的朋友可以参考下 2016-08-08 anime.js 实现带有描边动画效果的复选框(推荐) anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下 2017-12-12 AngulerJS学习之按需动态加载文件 本篇文章主要介绍了AngulerJS学习之按需动态加载文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-02-02 Angular 1.x个人使用的经验小结 这篇文章主要给大家介绍了关于Angular 1.x个人使用的一些经验,属于一些基础入门教程,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 RequireJs的使用详解 本文主要介绍了RequireJs的使用。具有很好的参考价值,下面跟着小编一起来看下吧 2017-02-02 angularjs实现的购物金额计算工具示例 这篇文章主要介绍了angularjs实现的购物金额计算工具,涉及AngularJS事件监听、数值计算相关操作技巧,需要的朋友可以参考下 2018-05-05 详解基于angular-cli配置代理解决跨域请求问题 本篇文章主要介绍了详解基于angular-cli配置代理解决跨域请求问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 Angularjs自定义指令Directive详解 Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧 2017-05-05 最新评论

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

您可能感兴趣的文章:

  • AngularJS 最常用的八种功能(基础知识)
  • AngularJS学习第一篇 AngularJS基础知识
  • Angularjs 基础入门
  • AngularJS基础知识
  • AngularJS实用基础知识_入门必备篇(推荐)
张贴在3