<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <div> <p>登录</p> <form action='login' method='POST'> <table> <tr> <td><label for="user">账号：</label></td> <td><input type="text" /></td> </tr> <tr> <td><label for="pwd">密码：</label></td> <td><input type="password" /></td> </tr> <tr> <td colspan='2'> <a href="https://www.jb51.net/signup" >注册</a> <input type="submit" value='登录'/> </td> </tr> </table> </form> </div> </body> </html>
第五步，在AngularDemo目录里，执行“npm start”命令，启动网站。
第六步，在浏览器里访问“:3000/admin.html”。应该会看到下面的效果哦：
创建基本AngularJS应用的步骤
前面我们不管三七二十一先把AngularDemo跑起来了。现在我们看下创建一个基本的AngularJS应用的步骤。
第一步是实现一个Node.js Web服务器。这个express为我们代劳了，我们就用默认的应用模板，你去看app.js的话，应该发现它把public目录使用app.static中间件处理了一下，我们可以直接在浏览器里访问public目录下的文件，比如:3000/admin.html。
第二步就是实现一个AngularJS HTML模板，比如我们的admin.html。这是最重要的，我们展开来看看。
1. 加载AngularJS库
嗯，script元素，放在HTML文档body元素的最后，如admin.html那样。浏览器会帮你下载并执行angular-1.4.3.min.js文件。HTML代码如下：
<script src="https://www.jb51.net/javascripts/angular-1.4.3.min.js"></script>
2. 实现你的Angular模块
比如我们示例中的admin.js，它实现了一个控制器来支持HTML模板。
3. 加载你的主模块
script元素，就放在angular库的后面，放后面，这是必须的。HTML代码如下：
<script src="https://www.jb51.net/javascripts/admin.js"></script>
4. 定义根元素
admin.html有这么一行代码：
<html ng-app="x-admin">
admin.js的第1行代码
angular.module('x-admin', [])
这两行代码是对应的，HTML里使用ng-app指令指定了Angular模块名字。而这个模块名字，就是你的js代码里使用angular.module定义模块时提供的第一个参数。对于我们的示例，模块名字叫“x-admin”。
在HTML中关联了ng-app后，就可以添加控制器了。
关于ng-app指令和angular.module方法，参考这里吧：。国内的，无需翻qiang。
使用angular.module定义模块时，第二个参数是依赖的模块列表，Angular会自动为你解决依赖注入问题。比如你依赖ui bootstrap，可以这么写：
angular.module('x-admin', ['ui.bootstrap'])
需要注意的是：文档里描述指令时，都是ngApp这种形式，而写代码时，是ng-app。angular的文档还是不错的，赞一个。
5. 添加控制器
admin.html文档中有这行代码：
<div ng-controller="x-controller">
上面的代码把名字是“x-controller”的控制器分配到
元素中，这样我们就可以在这个元素中使用js里定义的同名控制器的作用域内的数据（Model）。
admin.js的第2行代码：
controller('x-controller', function ($scope, $http) {
定义了一个控制器。具体的语法参考这里吧：。国内的，无需翻qiang。
controller是angular.Module的一个方法，用来定义控制器，原型是： controller(name, constructor);
第一个参数是控制器的名字，第二个参数是控制器的构造函数。构造函数的参数是控制器依赖的服务。
还有一种语法controller(name,[])，第二个参数是控制器的依赖数组。比如：
复制代码 代码如下:
controller('x-controller',['$scope', '$http', function($scope, $http){}]);
我看1.3.x，1.4.x的文档里controller方法的原型都是第一种，第二种是我在《Node.js+MongoDB+AngularJS Web开发》里看到。两种我都测试了，都可以用。但跟什么版本什么关系，存疑了。
6. 实现作用域模型
使用Module的controller方法定义控制器时，会让开发者提供控制器的构造函数。当Angular编译HTML时，会使用开发者提供的控制器构造函数创建控制器的实例。构造函数内，会初始化一些数据，关联到作用域scope上。在作用域scope里的数据和方法，都可以直接被HTML引用。