angularjs入门

AngularJS 30分钟入门【转

时间:2015-08-07 16:43来源:网络整理 作者:KKWL 点击:
引用自:,翻译如下: 简介 我三年前开始使用 AngularJS,那时它还是一个新鲜事物。 现在 AngularJS已经成为了一个最受欢迎的 JavaScript 框架之一,多亏了AngularJS 团队作出的努力。 这个教

引用自:,翻译如下: 简介

我三年前开始使用 AngularJS,那时它还是一个新鲜事物。 现在 AngularJS已经成为了一个最受欢迎的 JavaScript 框架之一,多亏了AngularJS 团队作出的努力。

这个教程使用的是1.3.4版本,涵盖非常基础东西,但是都是在使用过程中总结出来的最佳实践经验。

Setup

开始前,你先创建一个文件夹,命名为 angularjs-tutorial ,然后在文件夹中建立下面几个文件,文件目录结构如下:

- angularjs-tutorial | - main.ctrl.js | - app.js | - index.html

打开 index.html 文件,输入一下简单的 HTML内容,文件头部引用来自其它站点CDN的 AngularJS文件 and Twitter Bootstrap样式文件。我们准备使用 Twitter Bootstrap 作为 CSS 框架,这样会让我们更容易更快地创建视图布局,可以让我们将注意力放在 AngularJS上面。如果你想了解更多 Twitter Bootstrap 有关的知识,请点击我的相关教程 Twitter Bootstrap Tutorial。

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS Tutorial</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> <script src="app.js"></script> <script src="main.ctrl.js"></script> </head> <body> </body> </html>

这些 HTML 代码也引用了我们自己创建的 app.js 和main.ctrl.js 文件。

让你的网页Angular化

在我们的 app.js 我们要先搞一个 AngularJS module 出来用在我们的app里面。复制下面的代码到 app.js

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

这个 angular.module() 函数用作angular module的 setter 和getter 。第一个参数是 module 的名称,我们起名为 app, 第二个参数我们提供了一个数组。如果给出了一个数组,那么angular会创建并取得相应的app module,稍后我们创建自己的controller你就可以看到。

 提示:在更复杂的应用中,我们会用module数组来代替上面所说的空数组。

现在我们需要告诉angular,我们想将这个module用在什么地方,打开 index.html ,将 ng-app='app' 添加到 <body> 标签,如下所示:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AngularJS Tutorial</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> </head> <body ng-app="app"> </body> </html>

这里告诉了angular ,所有在body里面的东西都是我们 AngularJS application 的一部分,我们这里的AngularJS application 命名为 app.

控制器 controller

AngularJS 提供一种宽松的 MVC 结构,更准确来说是 MVVM 模式。控制器是你处理业务逻辑的地方,本质上来说,控制器是用来控制数据并且将数据提供给视图用于显示的东西。 为了声明我们的 controller,打开 main.ctrl.js 文件,将下面的代码添加进去。

angular.module('app').controller("MainController", function(){ var vm = this; });

在声明的代码中,我们首先获取了一个 我们之前声明的app module,然后用 controller 函数初始化一个新的controller。这个 controller 函数有两个参数,第一个参数是控制器名称,第二个参数是一个函数,这个函数是用来放我们的控制代码的,我们要实现的功能就是写在这个函数里面。

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