AngularJS快速开始(一)--基本介绍

来源：互联网发布：网络骑士作品集编辑：程序博客网时间：2024/06/05 07:34

AngularJS快速开始(一)

说明

关于angularJS其他的一些介绍，请查看其他的一些帮助，本文主要带大家快速入门，基本步骤如下:

1.通过几章快速开始，通过一些简单例子，以及通过与jquery的比较，讲解angularJS的几个重要概念，如双向数据绑定,Controller,$scope,filter,指令,service等。

2.了解这些基础之后,通过一章讲解如果部署angularJS官方示例angular-phonecat,该示例是大家入门的最好学习教程,可惜关键的一点是没有nodejs相关开发经验,完全不知道这项目该如何启动学习

3.后续章节将陆续更新angularJS的一些高级特性,以及企业开发构建等

注意:如果你对AngularJS已经有了一些基本了解但是还跳不出jquery的思维模式,可以直接跳过本章,直接阅读快速开始(二)，快速开始(三)

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
将下面的源代码复制到您的HTML文件。
在web浏览器中打开这个HTML文件。

Hello World-The Basics Binding

Two-way binding is a fundamental feature of AngularJS.

源代码

    <!doctype html>    <html ng-app>        <head>        <!--这里使用了百度静态资源库文件,你也可以下载angularjs文件到本地引用 -->            <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>        </head>        <body>            Hello {{'World'}}!        </body>    </html>

注:百度静态资源库:http://cdn.code.baidu.com/

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

    <html ng-app>

这行载入AngularJS脚本：

    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

    Hello {{'World'}}!

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

    Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

编辑前面创建的helloworld.html文档。
将下面的源代码复制到您的HTML文件。
刷新浏览器窗口。

源代码

    <!doctype html>    <html ng-app>        <head>            <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>        </head>        <body>            Your name: <input type="text" ng-model="yourname" placeholder="World">            <hr>            Hello {{yourname || 'World'}}!        </body>    </html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
双大括号标记将yourname模型变量添加到问候语文本。
你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。这就是AngularJS双向数据绑定的概念。输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

计算价格-Controllers

Controllers are the ‘glue’ of an AngularJS application. They connect your markup with your data and act as a sort of switchboard

再来看一个简单的例子，帮助大家理解AngularJS Controllers的一些基本内容:

HTML

    <!doctype html>    <html ng-app>    <head>        <meta charset="UTF-8">        <script src="libs/angular1.3.0.js"></script>    </head>    <body >        <div ng-controller="InvoiceCntl"> <b>Invoice:</b>            <br>            <br>            <table>                <tr>                    <td>Quantity</td>                    <td>Cost</td>                </tr>                <tr>                    <td>                        <input type="integer" min="0" ng-model="qty" required ></td>                    <td>                        <input type="number" ng-model="cost" required ></td>                </tr>            </table>            <hr> <b>Total:</b> {{qty * cost | currency:"￥" }}!        </div>    </body>    <script src="script.js"></script>    </html>

界面想实现的效果，就是两个输入框，在里面输入值，然后下面会根据输入的值做出相应的变化

script.js

    // var demoApp = angular.module('demoApp', []);    // demoApp.controller("InvoiceCntl",['$scope',function($scope){    //     $scope.qty = 1;    //     $scope.cost = 19.95;    // }]);    function InvoiceCntl($scope) {        $scope.qty = 1;        $scope.cost = 19.95;    }

在HTML的界面div上，声明了控制器ng-controller="InvoiceCntl"，界面上输入框中的属性ng-model="qty"，ng-model="cost"实际上相当于声明了两个变量qty与cost。实现与控制器中变量的绑定。所以在JS中 $scope.qty = 1;$scope.cost = 19.95;相当于就给变量赋了初始值。数据绑定是通过{{ }}把变量的值插入到页面某部分和保持同步。

注意在js中注释的部分。注意在angularJS1.3.0以后版本中，就不能再全局去申明函数了。必须把控制器函数放在某一模块中。所以上面是将控制器放在模块中的写法，当然还存在模块依赖的说法，这些以后再逐一解释。

再来看一个例子

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>购物车</title>    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body ng-controller="CartController">    <h1>您的购物车</h1>    <div ng-repeat="item in items">        <span>{{item.title}}</span>        <input ng-model="item.quantity">        <span>{{item.price | currency:'￥'}}</span>        <span>{{item.price * item.quantity | currency:'￥'}}</span>        <button ng-click="remove($index)">删除</button>    </div></body><script>    var myApp = angular.module('myApp', []);    myApp.controller('CartController', ['$scope', function($scope){        $scope.items = [{            title: "可口可乐",            quantity: 8,            price: 2        }, {            title: "青岛啤酒",            quantity: 5,            price: 3.5        }, {            title: "张飞牛肉",            quantity: 5,            price: 12        }, ];        $scope.remove = function(index) {            $scope.items.splice(index, 1);        }    }]);</script></html>

下面来一步一步的介绍html以及javascript中每句关键代码的意思

    <html ng-app="myApp">

其中ng-app这个属性告诉Angular js所要管理的页面区域。这里我们将ng-app放在了HTML元素中，也就是告诉Angular JS我们希望它来管理整个页面。这个属性我们可以放在任意区域内，在html中写入ng-app="myApp"相当于申明该页面将由angularjs来托管，模块的名字叫做myApp

    <body ng-controller="CartController">

在Angular中，我们把用Javascript类来管理页面的方式称为controllers。通过在<body>控件中引入一个controller，我们定义CartController来管理< body>和</ body>之间的所有事务。

    <div ng-repeat="item in items">

ng-repeats表明将items数组中的所有元素拷贝到这个< div>中。在< div>的每一份copy中，给每个元素设定一个名为item的属性，这样我们就可以在模板中利用这个属性了。就像上述代码中运行结果中，在三个

控件中，分别包含了产品的名称，单价，总价以及一个可以删除当前条目的按钮。

    <span>{{ item.title }}</ span>

就像最简单的Hello，World动态显示中一样，我们通过{{ }}来实现数据绑定，同时允许我们在页面中改变变量值时能够同步的修改页面的显示值。{{ item.title }}表达式在循环中接收当前item的数值，并将这个item的title属性值插入到DOM中。

    <input ng-model="item.quantity">

通过ng-model的定义能够将input控件和item.quantity值绑定到一起。在区域中的{{ }}设定了一种单方面的数据绑定，表明在这个区域内插入一个值。但是在应用中用户需要能够在quantity变化时得知总价的变化。通过ng-model来实现数据的同步改变。ng-model将item.quantity的值插入到文本区域，同时也在用户在文本区域内输入新的数值时自动同步更新item.quantity的值。

    <span>{{item.price | currency:'￥'}}</span>    <span>{{item.price * item.quantity | currency:'￥'}}</span>

在页面下显示中用户其他单价和总价以的形式显示。Angular中有一个filters的特性，可以将文本进行相应的转换，同时也有一个名为currency的filter能够将文本转换成形式。对于filters的介绍将会在下一此重点介绍。

    <button ng-click="remove($index)">Remove</button>

这个代码允许用户通过点击页面中用户商品选项条目旁的删除按钮将用户购物选项删除。我们给这个点击按钮设定一个remove函数。同时也会将包含ng-repeat中迭代序列号的$item传递给该函数，这样我们就能知道移除哪一个item了。

    //首先创建模块    var myApp = angular.module('myApp', []);    //这个CartController管理着购物卡的管理逻辑。通过在Angular中需要对controller传递$scope参数，这样才可以在此处运行。$scope在UI层将数据和UI层元素绑定到一起。    myApp.controller('CartController', ['$scope', function($scope){        $scope.items = [{            title: "可口可乐",            quantity: 8,            price: 2        }, {            title: "青岛啤酒",            quantity: 5,            price: 3.5        }, {            title: "张飞牛肉",            quantity: 5,            price: 12        }, ];        $scope.remove = function(index) {            $scope.items.splice(index, 1);        }    }]);

通过定义scope.items，创建一个虚拟的数据散列集来表示用户购物车中的物品。可以通过在每个item之前加上scope来将数据绑定到UI中。当然，在正真的实用中这个不可能在内存中工作，它需要与服务器通信来保存数据。

    $scope.remove = function(index)    {        $scope.items.splice(index,1);    }

我们希望将remove函数绑定到UI中，所以需要再函数前添加$scope。在当前前台内存处理版本中，remove函数能够将数组中的items删除。因为< div>序列是通过ng-repeat将数据进行绑定的，所以当items删除后，< div>列表也将同步进行收缩。注意这个remove函数在用户点击去除按钮时将会在UI层引发。

注意下面这种写法，其实你也可以写成这个样子，这只是一个备注，如果你已经大概理解了，可以直接忽略下面的东西:

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>购物车</title>    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script></head><body ng-controller="CartController as filter">    <h1>您的购物车</h1>    <div ng-repeat="item in filter.items">        <span>{{item.title}}</span>        <input ng-model="item.quantity">        <span>{{item.price | currency:'￥'}}</span>        <span>{{item.price * item.quantity | currency:'￥'}}</span>        <button ng-click="filter.remove($index)">删除</button>    </div></body><script>    var myApp = angular.module('myApp', []);    myApp.controller('CartController', function(){        var filter = this;        filter.items = [{            title: "可口可乐",            quantity: 8,            price: 2        }, {            title: "青岛啤酒",            quantity: 5,            price: 3.5        }, {            title: "张飞牛肉",            quantity: 5,            price: 12        }, ];        filter.remove = function(index) {            filter.items.splice(index, 1);        }    });</script></html>

下一章主要通过与jquery示例的比较来展示angularJS

0 0