AngularJS入门笔记

发布时间:2016-06-01 17:01:05 作者:JIALY 257次浏览

      前端时间在网上看技术文档时,无意间就发现了它——Angularjs,随后看了一些与之相关的资料,然后就深深的被它吸引了。研究至今,我所认为的angularjs最奇妙之处在于它的自动化数据双向绑定功能。数据绑定能够帮助你避免书写大量的初始化代码从而节约开发时间,也让开发人员从频繁的操作DOM的痛苦深渊中解脱出来。无论是模型改变视图,还是视图影响模型,angularjs无疑都为静态HTML网页技术增添了不少色彩。当然其核心功能还包括模块化,MVC,语义化标签和依赖注入等。

      与传统的jQuery等类库不同的是,angularjs更注重于我们想要什么(what),让机器想出如何去做(how),即声明式编程。Angularjs也是建立在这样的信念上的:即声明式编程应该用于构件用户界面以及编辑软件构件,而命令式编程适合表示业务逻辑。

      Angularjs适合用来构建CRUD应用,而不适合用来开发游戏、图形界面编辑器等类型的应用。

      废话这么多,大家也不能马上理解,下面就通过示例讲解的方式带领大家走进angularjs的奇妙世界。

      要使用angularjs就需要在页面引入angualr.min.js文件。文件地址传送门:https://angularjs.org/

    <!DOCTYPE HTML >
    <html ng-app="Store">
             <head>
                       <title>App</title>
                       <script type="text/javascript" src="angularjs/angular.min.js"></script>
                       <script type="text/javascript" src="angularjs/js/app.js"></script>
             </head>
             <body>
                       <div ng-controller="StoreController as store">
                                <ul ng-repeat="product in store.products">
                                         <li>
                                                   <h1>{{product.name}}</h1>
                                                   <h2>{{product.price|currency}}</h2>
                                                   <p>{{product.description}}</p>
                                                   <button ng-show="product.canPurchase">Add to Cart</button>
                                         </li>
                                </ul>
                       </div>
             </body>
    </html>


    app.js代码如下:

    (function(){
             var app = angular.module('Store',[]);
             app.controller('StoreController',function($scope){
                       this.products = gem;
             });
            
             var gem =[{
                       name:'西瓜',
                       price:2.95,
                       description:'不甜不要钱哦',
                       canPurchase:false,
             },{
                       name:'香蕉',
                       price:3.95,
                       description:'香蕉个巴拉',
                       canPurchase:true,
             },{
                       name:'桃子',
                       price:2.95,
                       description:'吃个桃子,偷的浮生半日闲',
                       canPurchase:true,
             },{
                       name:'苹果',
                       price:2.95,
                       description:'青苹果,酸酸甜甜就是我',
                       canPurchase:false,
             }]
    })();

      首先在html页面的html标签里有ng-app标记,ng-app标记的是angularjs应用的边界,告诉angularjs应该管理那一块。一个ng-app范围可以理解为一个模块,一个页面可以包含多个ng-app标记。

      js创建模块方式如下:

      var app = angular.module(‘Store’,[]);

      如上我们创建了一个名为Store的模块,在页面中我们就可以用ng-app标记来引用。接下来我们看到了ng-controller控制器标记,一个ng-controller就是一个js函数。在ng-controller里我们可以注入$scope对象,$scope为上下文对象,其范围只在当前controller里有效。$scope对象的顶层对象是根$rootScope,定义在$rootScope的属性和方法为全局的属性和方法。

      上面例子中,我们在controller里定义了变量products对象,在页面中我们是通过ng-repeatng-show和表达式输出products的详细信息。ng-repeat标记用来循环遍历数组或对象数组。ng-show标记表示是否显示该元素,与之对应的标记是ng-hide标记,表示是否隐藏元素。在angularjs中使用双大括号来输出表达式的值,例如{{product.name}}。

    以上就是angularjs的基本使用,就是如此的简单,简单的标记组合就能创造出富态的页面。


    推荐:

    图灵教程:http://www.ituring.com.cn/article/13471

    Google教程,入口由官网进:https://angularjs.org/


关键字词: angularjs 入门教程