2KB项目，专业的源码交易网站 帮助 收藏 每日签到

2KB项目

申请开店
全部分类
首页 产品中心 任务大厅 商家中心 新闻资讯 手机版 开源软件

AngularJS Hello World 代码实例，只需 6 步

  • 时间：2019-01-23 18:35 编辑：2KB 来源：2KB.COM 阅读：354
  • 扫一扫，手机访问
  • 分享
摘要：
AngularJS 英文原文：AngularJS Hello World Code Example

本文展示了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>

完整的代码请看这里。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。


2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
上一篇：写给精明 Java 开辟者的顶级测试技能
下一篇：使用 Countly 来分析 Apple Watch 统计数据
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了？(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头，因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志，退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备：Roku，Apple TV，Firebar，Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览：更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯，这30位人物定义了2010年代(2020-01-01 15:14)
2KB开店
2KB写作助手
网站运营助手
联系我们

Q Q： 7090832

电话：400-0011-990

邮箱：7090832@qq.com

时间：9:00-23:00


加入微信公众号【赠送大礼包】
联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部