AngularJS简单的helloworld示例

最新推荐文章于 2020-07-19 09:04:21 发布

DayBreak2020

最新推荐文章于 2020-07-19 09:04:21 发布

阅读量2.7k

点赞数

分类专栏： AngularJS 文章标签： angularjs helloworld

本文链接：https://blog.csdn.net/stickallthetime/article/details/44755059

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

二. html内容如下

<!DOCTYPE html>
<html lang="zh-cn" charset="utf-8" ng-app="helloworld">
<head>
    <title>hell angular</title>
    <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放在<html>标签上，整个文档就当成一个应用。
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变量添加的属性就是这个控制器作用于范围内可以使用的模型变量。
四. 显示结果如下
这里写图片描述

DayBreak2020

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS简单的helloworld示例

一. 首先下载angularJS库文件 angular-1.2.2二. html内容如下<!DOCTYPE html><html lang="zh-cn" charset="utf-8" ng-app="helloworld"><head> <title>hell angular</title> <script src="angular.js"></script> <
复制链接

扫一扫

专栏目录