标签：
本篇体验AngularJS的Hello World，虽然简单，但体现了AnuglarJS的一些重要概念。
大致思路是这样的：
首先在页面引入AngularJS的核心js文件：
<script src="angular.min.js"></script>
接着，在定义js文件中为当前页面注册一个module:
var myApp = angular.module("helloApp",[])
以上，module的名称为helloApp, []数组用来存放与当前module有依赖关系的其它modules，比如[‘ngRoute‘,‘....‘]。
然后，为module注册controller。
方式一，数组注释法(array-style notation)
myApp.controller("TestController",[‘$scope‘,‘Project‘,function($scope,Project){
$scope.hello = "Hello World!";
}]);
以上，controller()的第一个参数是controller的名称，第二个参数的数组，数组的最后一个元素一定是匿名函数，其它元素是AngularJS的全局service，或者说是全局对象。需要注意的是：数组中的全局service的位置和名称必须和匿名函数的形参一一对应。
方式二，我们还可以这样写，简单注入方式(Simple injection method)
myApp.controller("TestController", function($scope){
$scope.hello = "Hello World!";
});
AngularJs会扫描function的参数，提取参数的名称(name)作为function的依赖。所以这种方式要求保证参数名称的正确性，但对参数的顺序并没有要求。
不过，以上的写法在给js文件优化压缩的时候，会改变$scope变量的名称，比如替代为a，由于AngularJS只认$scope不认识a，这样会导致报错。所以，这种方法不推荐。第一种注入方式可以帮我们解决这个问题。
另外，全局service是以注入的方式被当前controller所使用。在AngularJS中，很多全局service都是通过依赖注入的方式被运用。
最后，页面中要做3件事情。
1、使用ng-app声明当前module的名称
<html ng-app="helloApp">
2、使用ng-controller声明需要使用的controller
<body ng-controller="TestController">
3、使用{{}}显示$scope中的变量
<p>{{hello.name}}</p>
完整的代码如下：
<!doctype html> <html ng-app="helloApp"> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script src="angular.min.js"></script> <script> var myApp = angular.module("helloApp", []) myApp.controller("TestController", [‘$scope‘, function($scope) { $scope.hello = "Hello World!"; }]); </script> </head> <body ng-controller="TestController"> <p>{{hello}}</p> </body> </html>
当然，实际项目中$scope变量通常用来存储对象。比如：
var myApp = angular.module("helloApp", []) //声明对象并对其赋值 var messages = {}; messages.name = ‘Hello World!‘; myApp.controller("TestController", [‘$scope‘, function($scope) { $scope.hello = messages; }]);
在页面中按如下调用：
<p>{{hello.name}}</p>
当然与上面写法等同是：
<p ng-bind="hello.name"></p>
标签：
原文地址：http://www.cnblogs.com/chrisghb8812/p/5692272.html
