AngularJS简单的helloworld示例

一. 首先下载angularJS库文件
http://download.csdn.net/detail/stickallthetime/8548061

二. html内容如下


<html lang="zh-cn" charset="utf-8" ng-app="helloworld">
<head>
    <title>hell angulartitle>
    <script src="angular.js">script>
    <script src="helloworld.js">script>
head>
<body>
    <div ng-controller="helloworld">
        <p>{{1+1}}p>
        <p>{{helloworld}}p>
    div>
body>
html>

html中的ng-app和ng-controller是angularJS已经定义好的指令。
ng-app指令定义了一个angularJS应用的根节点。一个html文档可以使用ng-app指令定义多个angularJS应用,但是需要注意的是只有第一个ng-app指令定义的应用会被angularJS自动启动。如果需要在一个html文档运行多个应用,那么就需要使用angular.bootstrap方法去手动启动。上述例子中,将ng-app放在标签上,整个文档就当成一个应用。
ng-controller指令指定了一个控制器类对应在html模板中的作用范围,控制器类主要用于实现应用的业务逻辑,包含了模板需要使用的模型数据以及一些函数定义。
html中用{{ }}包含的是angular表达式,
三. helloworld.js如下

var helloworldModule = angular.module("helloworld", []);
helloworldModule.controller("helloworld", ["$scope", function ($scope) {
    $scope.helloworld = "hello angular!";
}]);

上面的js文件中首先定义了一个对应于html中用ng-app定义的应用的angular模块。然后,定义了对应于ng-controller定义的控制器的控制器类。控制器函数中的 scope scope.helloworld = "hello angular!";` 为$scope变量添加的属性就是这个控制器作用于范围内可以使用的模型变量。
四. 显示结果如下
AngularJS简单的helloworld示例_第1张图片

你可能感兴趣的:(AngularJS)