zoukankan      html  css  js  c++  java
  • 浅谈angular框架

      最近新接触了一个js框架angular,这个框架有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,以上这些全部都是属于angular特性,虽然说它的功能十分的强大,在开发中非常的实用,对于初接触者来说,要想熟练使用仍然需要一些时间来熟悉其中基础的语法规则,一些基本的用法,虽然说代码不需要死记硬背,但是对于新学习一个知识点,记住其中的一些基础概念,基本的用法,在这里不是提倡大家去背一些代码,该处谈到的熟悉指的是自己多动手去写,实在是想不起了再查看资料,尽量凭借自己的记忆去写一些代码,只有经历这样一个十分痛苦的过程,才会有所收获。

      在angular中首先需要我么熟悉的就是一些指令比如说ng-app,na-repeat等等,对于这些基础性的概念没有什么捷径,唯一的捷径就是反复的练习,在我们的项目实战中

    AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
    使用双大括号{{}}语法进行数据绑定;使用DOM控制结构来实现迭代或者隐藏DOM片段;支持表单和表单的验证;能将逻辑代码关联到相关的DOM元素上;能将HTML分组成可重用的组件。
      下面我将就例子而言做一个简单的分析;
    <!doctype html>
    <html ng-app>--------------------相当于我们js中的全局变量作用的东西,在这里使用之后整个html文档都在angular的范围之内。
    <head>
    <script src="angular-1.3.0.min.js"></script>--------------类似于js的引入方法
    <script src="script.js"></script>
    </head>
    <body>
    <div ng-controller="InvoiceCntl">----------------------》控制器
    <b>Invoice:</b>
    <br>
    <br>
    <table>
    <tr><td>Quantity</td><td>Cost</td></tr>
    <tr>
    <td><input type="integer" min="0" ng-model="qty" required ></td>
    <td><input type="number" ng-model="cost" required ></td>
    </tr>
    </table>
    <hr>
    <b>Total:</b> {{qty * cost | currency}}-------->在这里如果使用{{i}}的输出方式的话,代码在页面执行的过程中会有一点延时性,所以一般为了较好的用户体验,我们
                              都是使用的ng-bind来输出我们循环得到的值,这样的话就会避免在页面上的瞬间闪速。
    </div>
    </body>
    </html>
    script.js:
    function InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19.95;
    }
     
    值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成 静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。
      以上都是属于angular的一些好处,但是我们知道任何一个框架都不会是十全十美的,有他的优秀的一方面但同时一定会有他不足的一方面,看上去angular十分的强大,的确是的,如果是在开发一些大型的网站的时候,效率是非常的高,但是如果是我们用在小地方的话就会十分的低效率,因为即使你需要使用angular在控制台输出一个简单的hello world的话,你就需要配置整个angular,需要书写很多代码,即使这些代码对于你的开发工作没有用处。所以对一个框架我们还是需要全面的看待,在适合的时候使用。
  • 相关阅读:
    Objective-c 语法,类/属性/函数(iOS学习笔记,从零开始。)
    设置UIButton 对齐方式
    iOS Runtime[转载]
    使用带粒子效果的 CAEmitterLayer
    使用maskView设计动画效果
    url、href、src 详解
    良好的JavaScript编码风格(语法规则)
    关于闭包
    盒子模型详解
    git入门笔记汇总——(廖雪峰博客git入门)
  • 原文地址:https://www.cnblogs.com/lanveer/p/4088523.html
Copyright © 2011-2022 走看看