AngularJS基础01 从HelloWorld说起

浏览数：19 / 时间：2015年06月09日

作者：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>