欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

使用JavaScript的AngularJS库编写hello world的方法

程序员文章站 2022-03-14 16:35:50
 本文展示了angularjs框架实现的hello world代码示例. 如下是一些你在看hello world 示例和接下来的代码示例时需要重点关注的方面....

 本文展示了angularjs框架实现的hello world代码示例.

如下是一些你在看hello world 示例和接下来的代码示例时需要重点关注的方面.

  •     ng-app, ng-controller, ng-model 指令
  •     带有两个大括弧的模板

步骤 1: 在<head>部分包含angular javascript

将下面的代码包含入 <head></head> 中，以引入 angularjs javascript 文件. 可以用如下写法从 google 管理的库 获得最新的代码.
 

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

步骤 2: 将 ng-app 指令应用到 <html> 元素

如下将ng-app指令应用到 <html> 元素. 可以选择给app指定名称. 它可以被简单的写作<html ng-app>. 这一指令被用来标记angular会识别作为我们应用程序的根元素的html元素. 这给了应用程序开发者告诉angular整个html页面或者只是其中一部分应该作为angular应用程序来对待的*.
 

<html ng-app="helloapp">

步骤 3: 将 ng-controller 指令应用到 <body> 元素

将 ng-controller 指令应用到 <body> 元素.  controller 指令可以被应用在任何元素上，比如div。在下面的代码中，, “helloctrl” 是控制器的名称，可以被放在<head>元素处<script></script>中的控制器代码引用.
 

<body ng-controller="helloctrl">

步骤 4: 将ng-model指令应用到输入元素

可以使用ng-model指令将输入同模型绑定在一起.
 

<input type="text" name="name" ng-model="name"/>

步骤 5: 编写模板代码

下面是展示名称为“name”的模型的模型值的模板代码. 注意名称为“name”的模型被绑定到了步骤四中的输入上.
 

hello {{name}}! how are you doing today?

 
步骤 6: 在<script>中创建控制器代码

向下面这样在script元素中创建控制器代码. 在下面的代码中， “helloapp”是在<html>元素中使用ng-app指令定义了的模块的名称. 接下来的一行代码展示了用在<body>元素中使用ng-controller指令定义的名称“helloctrl”创建一个控制器. 控制器 “helloctrl”被注册到了这个模块——“helloapp”. 最后一行代码展示将模型同 $scope 对象关联了起来 

<script>
  var helloapp = angular.module("helloapp", []);
  helloapp.controller("helloctrl", function($scope) {
  $scope.name = "calvin hobbes";
  });
</script>

完整的代码请看。

上一篇： 浅析CSS3 用text-overflow解决文字排版问题

下一篇： Win10键盘按钮全变快捷键打不出字怎么恢复?

推荐阅读