AngularJSAngularJS开端(一)

  angularJs指令

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

  这么些遵照了三个叫迪米特法则的设计情势,也被称作最少知识法则。由于HelloController的天职是创立greeting模型的起来值,那种格局正是,它不要求操心像$scope如何创设以及在那边找到它。

  不过,假设我们有哪些事物把那几个工作都为大家搞好了,同时不需求写代码?借使我能单纯注解界面包车型地铁某一有的映射到javascript的属性,让她们活动的联手?那种编制程序方式叫做数据绑定。大家在angular中包罗那种效用,因为当编辑视图和模型时,使用mvc来排除代码那是尤其棒的。移动多少从三个地方的四头机关发出。

  通过Angular的正视性注入系统,我们得以拿走那种效果。注重注入允许大家依照一种开发风格,那种支付风格中,不是开创信赖,大家的类仅仅添加他们须求的。

 

  像jquery库那种扩展到客户端的形式,让大家遵照相似的风骨,但出于更新的能力,单独地DOM的局地,而不是立异任何页面。那里,大家归总HTML字符串和多少,然后通过成分上安装innerHTML将协会插入到大家想要的Dom中。

<!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 1AngularJS 2

 

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

以此例子其实体现了angularjs的多寡双向绑定,

  AngularJS简单的Helloworld例子:

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

  在三番五次学习中,我们发现,$scope并不是大家唯一须求的。假如大家需求多少绑定它到用户浏览器钦命的U奥迪Q7L地址中,我们要求在构造函数中,添加3个$location对象,就那样:

  那全体都运作的卓殊好,可是你想将新数据插入到界面,可能变更基于用户输入的数据时,你必要做过多又不是价值不高的做事,来担保同时在界面和javascript属性中获得的数码正常的意况。

注:最上面的例子就能反映

  同时不局限于Angular自带的标识符。你能够写你本人的来扩大HTML模板,做别的你想做的事。

  视图从模型中获取数据体现给用户。当用户通过点击只怕输入和应用程序进行相互时,控制器通过变更模型中的数据响应。最后,模型层通告视图层,已经发出变动,一边更新彰显。

  模型 视图 控制器(MVC)

  重视注入(DI)

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

  什么是AngularJs?

  angular最了不起部分之一是你能够把您写的模版当成HTML。因为在框架的基本层,我们早已席卷了二个强劲的DOM转换引擎,能够让您扩展HTML语法,因而你才足以这么做。

  angularjs是一个为动态WEB应用设计的组织框架。它能让您使用HTML作为模板语言,通过扩张HTML的语法,让你能更清楚、简洁地营造你的应用组件。它的立异点在于,利用数量绑定借助注入,它使你不用再写多量的代码了。那些统统通过浏览器端的javascript完结,那也使得它能够全面地和别的服务器技术结合。

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

  angularjs数码绑定

  $scope对象把多少绑定自动的传递给了小编们。大家从不必要通过调用任何函数来创设它。大家只是须要把它内置HelloController构造函数中。

  angular带有很多标识符,协理您为你的应用程序定义视图。那一个标识符能够定义大家广阔的视图作为模板。它们得以证实应用程序如何是好事的仍旧创设可重复使用的零部件。

  大家已经在模板文件中看出了七个新的品质,这么些并不是HTML规范的一部分。示例中包蕴多少个大括号是用来多少绑定的,ng-controller是用来钦赐越发控制器来服务非常师徒,ng-model将1个输入框绑定到模型部分。大家称这几个叫HTML扩张指令

相关文章