AngularJS基础01 从HelloWorld说起

作者：arccosxy 转载请注明出处：http://www.cnblogs.com/arccosxy/

准备工作

首先，创建一个名为index.html的HTML文件，代码如下：

<!DOCTYPE html>

<head>

     <title>Learning AngularJS</title>

</head>

<body>

</body>

</html>

接下来就是加载angular.js库，访问https://angularjs.org/获取AngularJS最新的CDN（内容分发网络）链接，或者用下面这个链接https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js，这是Google的CDN，把它加入到head标签中：

<!DOCTYPE html>

<head>

     <title>Learning AngularJS</title>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

</head>

<body>

     <div id='content'></div>

</body>

</html>

好了，现在我们有了一个加载了AngualarJS的HTML页面，go on!

一些设置

要告诉AngularJS将这个页面渲染为一个应用，需要做几件事情。

使用ng-app告诉AngularJS应该管理页面中的哪一部分。如果你正在构建一款纯AngularJS应用，你应该把ng-app指令写在<html>标签中。这里，我们演示让AngularJS只管理页面中的一部分，简单地在DIV标签中加入ng-app="MyTutorialApp"即可。

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp'></div>

</body>

</html>

现在，我们告诉了AngularJS这个DIV是一个angular应用。然后，我们需要声明使用哪一个控制器：

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    </div>

</body>

</html>

MainController是我给控制器起的名字，你可以取任何更有意义的名字。Ok，现在MainController将可以控制DIV中的一切，但是这个控制器在哪？我们需要创建它！在index.html所在的目录下新建名为app.js的JS文件，内容如下：

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

这个JS文件所做的是新建一个名为MyTotorialApp的AngularJS应用，并且把它赋给了变量app，我们稍后会使用到它。现在我们需要再创建一个名为maincontroller.js的文件，内容如下：

app.controller("MainController", function($scope){

});

这个文件为MyTotorialApp分配了一个名为MainController的控制器。这两个JS文件其实可以合并为一个，但为了方便维护和容易理解，我把它们拆成两个分离的文件。接下来，把这两个JS文件都加载进HTML页面中。注意，app.js需要在maincontroller.js之前被加载进来。

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

    </div>

</body>

</html>

现在，我们的准备工作已经做完了，接下来看一个应用是怎样产生的。

Hello World

当我们创建maincontroller.js的时候，你可能已经注意到了$scope这个变量，它被当做控制函数的参数，是我们分配控制器变量的地方，这些变量可以在HTML页面的DIV中被使用。不明白没关系，举个栗子来说明，在控制器内声明一个$scope变量。

app.controller("MainController", function($scope){

    $scope.welcome = "Hello World";

});

在上面的代码中我们新建了一个scope变量并分配一个字符串给它。接下来我们可以在HTML中访问它。

<!DOCTYPE html>

<head>

    <title>Learning AngularJS</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>

    <script src="app.js" type="text/javascript"></script>

    <script src="maincontroller.js" type="text/javascript"></script>

</head>

<body>

    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>

            {{welcome}}

    </div>

</body>

</html>

我们在HTML中用{{}}(两个花括号)把welcome变量包起来，这样AngularJS就知道该处理它了。注意，在这里welcome前面没有加$scope。现在用浏览器打开index.html，你会看到如下内容：

现在你应该大致上理解scope变量了，它们通过在HTML中用双花括号{{}}来访问。同时也应该明白scope变量只在该控制器范围内有效，你不能从DIV之外访问到welcome变量。

总结

ng-app，ng-controller

$scope变量