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变量
