AngularJSAngularJS初始(一)

  什么是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的数量双向绑定,

AngularJS 1AngularJS 2

  左边为数据单向绑定图解,通常是设你管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应用被之代码?.

相关文章