首页 > web前端 > js教程 > 使用JavaScript的AngularJS库编写hello world的方法_AngularJS

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-05-16 15:53:26
原创
1229 人浏览过

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

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

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

步骤 1: 在部分包含Angular Javascript

将下面的代码包含入

中,以引入 Angularjs javascript 文件. 可以用如下写法从 Google 管理的库 获得最新的代码.
 
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
登录后复制

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

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

<html ng-app="helloApp">
登录后复制

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

将 ng-controller 指令应用到 元素. controller 指令可以被应用在任何元素上,比如div。在下面的代码中,, “HelloCtrl” 是控制器的名称,可以被放在元素处<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&#63;
登录后复制


步骤 6: 在

最新问题
angular.js - angularJS ng-style 用法
来自于 1970-01-01 08:00:00
0
0
0
angular.js - mock.js 支持 angularjs promise ajax 拦截
来自于 1970-01-01 08:00:00
0
0
0
angular.js - angularjs子页面 怎么引用js
来自于 1970-01-01 08:00:00
0
0
0
angular.js - angularjs如何默认选中radio
来自于 1970-01-01 08:00:00
0
0
0
angular.js - AngularJS的学习
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板