当前位置:   article > 正文

AngularJs 基础教程 —— Angular.js为什么如此火呢_angularjs什么时候比较火

angularjs什么时候比较火

  Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换。

  我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练。

  数据绑定和scopes(作用域)

  首先第一个浮出大脑的问题是:angular支持数据绑定吗?

  下面让我们来了解angular.js的数据绑定:

  Edit in plucker

  Insert your name:

  Echo: {{user.name}}

  在这代码片段中,在我们解释细节之前,我还是希望尝试下其效果:

  注:此刻暂时不要太心急去了解ng-app。

  如你所见,我在input中输入的将会显示在后边echo。这是如何工作的?简单来说,angular的ng-model(更多关于指令的将在文章后续)给我带来了双向绑定机制。

  如此是好,但是user.name存储在哪里呢?其存储在我们的$scope上,当我们在input中输入任何字符都会及时的更新scope对象上的user.name属性。然后我们可以利用angular的表达式{{...}}现实在HTML中。所以当我们在input中输入时,其会及时更新scope上的user,name属性,在由修改HTML显示。

  好吧,这并不难,但是你所说的$scope是个什么东东呢?在angular中$scope是连接controllers(控制器)和templates(模板view/视图)的主要胶合体。我们可以把我们的model存放在scope上,来达到双向你绑定。

  这就好比:

  这意味着我们我们从template上为$scope设置了一个属性对象user.name,所以我们也可以在controller中访问这个对象(user.name).

  让我们来看个更复杂的示例:

  Edit in plunker

  var app = angular.module('app', []);

  app.controller('MainCtrl', function($scope) {

  $scope.message = 'World';

  });

  Hello, {{ message }}

  在这里首先我们定义了angular application,只是简单的创建了一个angular module,其接受一个module名字和依赖数组为参数。

  紧接着创建了一个controller,通过调用 app module的controller方法,并传入一个controller 名字和function。function函数接受$scope参数(可以接受更多的参数,放在后面部分)。所以我们可以开始双向绑定了。

  在$scope中我们附加了message的字符串属性。

  在view中你可能注意到了body tag多出了一些东东,这是干什么的?这些是angular的指令(directives),它给HTML带来了新的语法扩展,在这例子中我们使用了两个angular内置的指令:

  ng-app:它会告诉angularbody节点包含了我们的angular应用,换句话说,在body中的一切会被angular所接受管理。其参数为我们的app module的名字,和我们在javascript中命名一致。

  ng-controller:在这指令在我们传入的是controller 名字,此例中为MainCtrl。

  最后我们将message插入我们的remplate。

  所以其可视化表示将是:

  聪明的你可以会冒出一个疑问:我们能够在$scope上绑定function?

  当然。

  Edit in plunker

  var app = angular.module('app', []);

  app.controller('MainCtrl', function($scope) {

  $scope.greet = function() {

  $scope.message = "Hello, " + $scope.user.name;

  }

  });

  What's your name?:

  Click here!

  {{ message }}

  我在示例controller中很容易了解到如何添加function到$scope。示例中function将修改$scope.message为“hello ,”和从input输入的$scope.user.name的字符串连接。

  然后在HTML中创建一个附加了angular bg-click 指令的button。ng-click指令是的button在被点击时会执行我们为其赋值的greet()表达式。

  注意:在input中enter并不会工作,这是展示ng-click如何工作。

  指令

  我们已经看见了一些指令了,指令是个什么东东?

  指令为HTML引入了新的语法。HTML已经很强大了,但是有时我需要更多...

  看下面的例子:

  示例代码在做什么?除了看见id外,我真的什么也不能获知。

  然后我们只得从多余30个javascript文件中去查找,最后我们看见如下代码:

  $('#chart').pieChart({ ... });

  Aha!原来是个饼图(pie chart)容器。

  在这里如果你不去查找javascript文件将无法获知页面到底是做什么的,实现了什么功能。

  下面我们再来看看angular code,

  是不是语义很清晰,我们可以一眼看出这是一个pie chart,不仅如此,而且还知道width,height,以及其数据。

  如果你对pie chart 示例感兴趣,请猛击这里

  angular内置指令

  angular给我带来了大量的内置指令。我们已经在前面看见了ng-app,ng-controller,ng-click,ng-model(angular的内置指令都以ng开始),接下来让我了解更多的内置指令。

  有时在页面中有部分内容我们只希望到达某状态(属性为true)才显示:

  Edit in plunker

  Show

  I am only visible when show is true.

  ng-show仅当angular其表达式值为true时,才显示该元素或子元素。

  注意:在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller),利用angular表达式作为指令的参数。在首次表达式为undefined,然后我们设置为为true,在false如此交替。

  angular同时也提供了ng-hide指令。

  让我们看些更有趣的指令,如果有个List或者数组呢?

  Edit in plunker

  var app = angular.module('app', []);

  app.controller('MainCtrl', function($scope) {

  $scope.developers = [

  {

  name: "Jesus", country: "Spain"

  },

  {

  name: "Dave", country: "Canada"

  },

  {

  name: "Wesley", country: "USA"

  },

  {

  name: "Krzysztof", country: "Poland"

  }

  ];

  });

  {{person.name}} from {{person.country}}

  棒极了,我们在controller中定义了一个list对象,在HTML用ng-repeat就能简单的显示了。

  它是如何工作的?

  ng-repeat会为集合中的每一项创建一个新的模板,在示例中有四项数据,将会重复创建下面code四次,

  {{person.name}} from {{person.country}}

  每次复制都会创建自己新的scope,我们没有为每项手动创建scope,我们可以把scope理解为其scope,但是在这里我们仍然能够访问父scope。

  可视化的展示为:

  我们能自定义directive?

  当然,我们能以不同粒度方式创建angular的directive,例如modal dialogs accordions, paginators, charts,search from ...

  angular指令总是与可视化有关?不,我们仍然可以创建一些非可视化的指令集。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/874542
推荐阅读
相关标签
  

闽ICP备14008679号