zoukankan      html  css  js  c++  java
  • AngularJS初始(一)

      什么是AngularJs?

      angularjs是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用数据绑定依赖注入,它使你不用再写大量的代码了。这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合。

      AngularJS简单的Helloworld例子:

    <!DOCTYPE HTML>
    <!-- 告诉AngularJs引擎从这里开始是ng-app管理 -->
    <html lang="en-US" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>AngularJS例子</title>
    </head>
    <body>
        <!-- ng-model数据模型 -->
        <input type="text" ng-model='name' placeholder="yourname" />
        <!-- {{}}angular表达式 -->
        <h1>Hello {{name}}</h1>
        <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>
    </body>
    </html>

    这个例子其实展示了angularjs的数据双向绑定,

      左边为数据单向绑定图解,通常是要你管jquery,backbone这类框架,     右边为angularjs数据双向绑定。

      模型 视图 控制器(MVC)

      MVC背后的核心概念就是,你在你的代码之间明确分离管理数据(模型),应用程序逻辑(控制器),并将数据给用户(视图)。

      视图从模型中获取数据展示给用户。当用户通过点击或者输入和应用程序进行交互时,控制器通过改变模型中的数据响应。最终,模型层通知视图层,已经发生改变,一边更新显示。

      在Angluar应用中,视图层就是DOM,控制器就是Javascript类,模型数据存储在对象属性中。

      angularjs数据绑定

      像jquery库这种扩展到客户端的模式,让我们遵循相似的风格,但由于更新的能力,单独地DOM的部分,而不是更新整个页面。这里,我们合并HTML字符串和数据,然后通过元素上设置innerHTML将结构插入到我们想要的Dom中。

      这一切都运行的相当好,但是你想将新数据插入到界面,或者改变基于用户输入的数据时,你需要做很多又不是价值不高的工作,来确保同时在界面和javascript属性中获取的数据正常的状态。

      但是,倘若我们有什么东西把这些工作都为我们做好了,同时不需要写代码?倘若我能仅仅声明界面的某一部分映射到javascript的属性,让他们自动的同步?这种编程方式叫做数据绑定。我们在angular中包括这种功能,因为当编写视图和模型时,使用mvc来消除代码那是非常棒的。移动数据从一个地方的绝大部分自动发生。

    注:最上面的例子就能体现

      依赖注入(DI)

      $scope对象把数据绑定自动的传递给了我们。我们没有必要通过调用任何函数来创建它。我们只是要求把它放到HelloController构造函数中。

      在后续学习中,我们发现,$scope并不是我们唯一需要的。如果我们需要数据绑定它到用户浏览器指定的URL地址中,我们需要在构造函数中,添加一个$location对象,就这样:

    function HelloController($scope,$location){
        $scope.greeting={text:'Hello'}
        //使用$location 在这
    }

      通过Angular的依赖注入系统,我们可以得到这种效果。依赖注入允许我们遵循一种开发风格,这种开发风格中,不是创建依赖,我们的类仅仅添加他们需要的。

      这个遵循了一个叫迪米特法则的设计模式,也被称作最少知识法则。由于HelloController的任务是建立greeting模型的初始值,这种模式就是说,它不需要担心像$scope如何创建以及在那里找到它。

      angularJs指令

      angular最优秀部分之一是你可以把你写的模板当成HTML。因为在框架的核心层,我们已经包括了一个强大的DOM转换引擎,可以让你扩展HTML语法,因此你才可以这样做。

      我们已经在模板文件中看到了多个新的属性,这些并不是HTML规范的一部分。示例中包括两个大括号是用来数据绑定的,ng-controller是用来指定那个控制器来服务那个师徒,ng-model将一个输入框绑定到模型部分。我们称这些叫HTML扩展指令

      angular带有很多标识符,帮助你为你的应用程序定义视图。这些标识符可以定义我们常见的视图作为模板。它们可以说明应用程序如何工作的或者创建可重复使用的组件。

      同时不局限于Angular自带的标识符。你可以写你自己的来扩展HTML模板,做任何你想做的事。

      angularjs的的模块管理参见如何组织大型JavaScript应用中的代码?.

    简简单单,pfan!出来混的,一切都是要还的。
  • 相关阅读:
    PHP设计模式——迭代模式
    采用navicat导出表结构及数据insert声明
    [Angular] Protect The Session Id with https and http only
    [D3] Creating a D3 Force Layout in React
    [D3] Animate Chart Axis Transitions in D3 v4
    [D3] Animate with the General Update Pattern in D3 v4
    [Web Security] JSON Hijacking
    [Angular] Progress HTTP Events with 'HttpRequest'
    [RxJS] How To get the results of two HTTP requests made in sequence
    [RxJS] Avoid mulit post requests by using shareReplay()
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/3989735.html
Copyright © 2011-2022 走看看