使用JavaScript的AngularJS库编写hello world的方法
本文展示了AngularJS框架实现的helloworld代码示例.
如下是一些你在看HelloWorld示例和接下来的代码示例时需要重点关注的方面.
- ng-app,ng-controller,ng-model指令
- 带有两个大括弧的模板
步骤1:在<Head>部分包含AngularJavascript
将下面的代码包含入<head></head>中，以引入Angularjsjavascript文件.可以用如下写法从Google管理的库获得最新的代码.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
步骤2:将ng-app指令应用到<Html>元素
如下将ng-app指令应用到<html>元素.可以选择给app指定名称.它可以被简单的写作<htmlng-app>.这一指令被用来标记Angular会识别作为我们应用程序的根元素的html元素.这给了应用程序开发者告诉Angular整个html页面或者只是其中一部分应该作为Angular应用程序来对待的自由.
<htmlng-app="helloApp">
步骤3:将ng-controller指令应用到<Body>元素
将ng-controller指令应用到<Body>元素. controller指令可以被应用在任何元素上，比如div。在下面的代码中，,“HelloCtrl”是控制器的名称，可以被放在<head>元素处<script></script>中的控制器代码引用.
<bodyng-controller="HelloCtrl">
步骤4:将ng-model指令应用到输入元素
可以使用ng-model指令将输入同模型绑定在一起.
<inputtype="text"name="name"ng-model="name"/>
步骤5:编写模板代码
下面是展示名称为“name”的模型的模型值的模板代码.注意名称为“name”的模型被绑定到了步骤四中的输入上.
Hello{{name}}!Howareyoudoingtoday?
步骤6:在<Script>中创建控制器代码
向下面这样在script元素中创建控制器代码.在下面的代码中，“helloApp”是在<html>元素中使用ng-app指令定义了的模块的名称.接下来的一行代码展示了用在<body>元素中使用ng-controller指令定义的名称“HelloCtrl”创建一个控制器.控制器“HelloCtrl”被注册到了这个模块——“helloApp”.最后一行代码展示将模型同$scope对象关联了起来
<script>
varhelloApp=angular.module("helloApp",[]);
helloApp.controller("HelloCtrl",function($scope){
$scope.name="CalvinHobbes";
});
</script>
完整的代码请看这里。