angularjs入门

AngularJS - 快速入门

时间:2015-08-07 16:47来源:网络整理 作者:KKWL 点击:
刚开始接触时总是去wiki或各种百科以了解一番。它们会告诉我一些MVVM、双向数据绑定、依赖注入等等名词,觉得这些名词好上档次,然后我很可能就不打算用这个东西了。 AngularJS是什

刚开始接触时总是去wiki或各种百科以了解一番。它们会告诉我一些MVVM、双向数据绑定、依赖注入等等名词,觉得这些名词好上档次,然后我很可能就不打算用这个东西了。

AngularJS是什么?

完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术( HTML、 CSS 和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。

不考虑那些名词,本篇帮助你快速了解 AngularJS 的基本用法。

文用的AngularJS版本为1.2.x,1.3.x中不再用本文中提到的方式声明controller。

先从这段开始:

==> > {{name}} {{6+8}} </div>

AngularJS的指令都是以 ng 开头,或者也可以使用 data-ng 开头。 AngularJS的表达式用两个大括号表示: {{expression}}

这便是AngularJS最基本的功能: 数据绑定 。

我们可以对各种类型进行绑定并显示:

  • Number

    =>
  • String

    =>
  • Object

    =>
  • Array

    PS: 可以使用 ng-repeat 进行迭代

    =="element in myArr"> {{ element }} </p> </div>
  • Controllers

    我们用 controller 对一个AngularJS应用进行控制。

    用 ng-controller 定义一个controller,声明所有被它包含的元素都属于这个控制器。

    例如:

    =>{{ person.sayHi() }}> { $scope.person = []; $scope.person.name='Kavlez' $scope.person.job='brogrammer' $scope.person.sayHi = + $scope.person.name + ", I'm a(an) " + $scope.person.job; } } </script>

    当然,我们应该使用更高效的组织方式。

    AngularJS支持将Controller定义在其他js文件中,比如上面的例子可以改为:

    => ="js/app.js"></script> Module

    到目前为止,定义一个Angular app都用 ng-app="" 的方式。

    可行,但是这个app下的变量和函数都是 global 的,而且会造成controller污染(pollute)。

    而通常,我们用 module 把app组织起来。 我们可以通过 ng-app="名称" 或 angular.modele() 来声明一个module。

    该方法有两个参数:

  • 模块的名称
  • 依赖列表
  • 比如,之前的例子可以改为:

    ="fighterController"> <script> var myApp = angular.module("myApp",[]); myApp.controller(} </script> </div>

    如果将app和controller放到两个文件分别定义,则:

    ===> var myApp = angular.module("myApp",[]);

    myAppControllers.js:

    myApp.controller(} Filter

    这个东西可以加在表达式里面,改变表达式的输出格式。我们可以用以下Filters:

    Filter Description

    uppercase 转大写

    lowercase 转小写

    currency 转货币格式

    orderBy 按指定属性排序

    filter 按指定关键字进行过滤

    前3种可以直接用在表达式中,比如:

    {{name | uppercase}} {{name | lowercase}} {{total | currency}}

    filter和orderBy通常用于数组:

    ==="f in fighters|filter:search"> {{ f }} > { $scope.fighters = [ {name:'Ryu',country:'Japan'}, {name:'Ken',country:'USA'}, {name:'Chun Li',country:'China'}, {name:'GuiLe',country:'USA'}, {name:'Zangief',country:'Russia'} ]; } </script> </div>

    当然,数据不会这样放在一个controller里。

    我们可以通过 $http 来请求数据并进行绑定。

    上面的例子可以改为:

    ,$http) { var url = '请求地址'; .fighters = response; }) }

    AngularJS权威教程 清晰PDF版

    希望你喜欢,并分享我的工作~ 带你走近AngularJS系列 :

  • 带你走近AngularJS - 基本功能介绍
  • 带你走近AngularJS - 体验指令实例
  • 带你走近AngularJS - 创建自定义指令
  • 如何在 AngularJS 中对控制器进行单元测试

    在 AngularJS 应用中通过 JSON 文件来设置状态

    AngularJS 之 Factory vs Service vs Provider

    AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据

    AngularJS 的详细介绍 :请点这里

    AngularJS 的下载地址 :请点这里

    本文永久更新链接地址:

    ------分隔线----------------------------