脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → 用AngularJS编写hello world

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

 更新时间：2015年06月23日 09:10:34   投稿：goldensun  
这篇文章主要介绍了使用JavaScript的AngularJS库编写hello world的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下

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

完整的代码请看这里。

您可能感兴趣的文章:

相关文章

  • Angularjs实现带查找筛选功能的select下拉框示例代码

    Angularjs实现带查找筛选功能的select下拉框示例代码

    这篇文章主要介绍了Angularjs实现带查找筛选功能的select下拉框的详细过程及示例代码，文中通过示例介绍的很详细，相信会对大家学习使用Angularjs具有一定的参考借鉴价值，有需要的朋友们可以一起来看看。
    2016-10-10
  • 简单实现AngularJS轮播图效果

    简单实现AngularJS轮播图效果

    这篇文章主要教大家如何简单实现AngularJS轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • angular.js指令中的controller、compile与link函数的不同之处

    angular.js指令中的controller、compile与link函数的不同之处

    最近一位大神问了我angular.js指令中的controller、compile与link函数的不同，想了想居然回答不出来，所以必须要深入的探究下，下面这篇文章主要介绍了关于angular.js指令中的controller、compile与link函数的不同之处，需要的朋友可以参考下。
    2017-05-05
  • AngularJS初始化过程分析(引导程序)

    AngularJS初始化过程分析(引导程序)

    这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下
    2014-12-12
  • 在Angular中实现一个级联效果的下拉框的示例代码

    在Angular中实现一个级联效果的下拉框的示例代码

    这篇文章主要介绍了在Angular中实现一个级联效果的下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Angular实现form自动布局

    Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • AngularJS中的过滤器使用详解

    AngularJS中的过滤器使用详解

    这篇文章主要介绍了AngularJS中的过滤器使用详解,过滤器是AngularJS中处理文本的一个非常有用的功能,需要的朋友可以参考下
    2015-06-06
  • 对angularjs框架下controller间的传值方法详解

    对angularjs框架下controller间的传值方法详解

    今天小编就为大家分享一篇对angularjs框架下controller间的传值方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs使用directive自定义指令实现attribute继承的方法详解

    Angularjs使用directive自定义指令实现attribute继承的方法详解

    这篇文章主要介绍了Angularjs使用directive自定义指令实现attribute继承的方法,结合实例形式较为详细的分析了基于directive自定义指令实现attribute继承的具体步骤与相关技巧,需要的朋友可以参考下
    2016-08-08
  • 解决angularjs前后端分离调用接口传递中文时中文乱码的问题

    解决angularjs前后端分离调用接口传递中文时中文乱码的问题

    今天小编就为大家分享一篇解决angularjs前后端分离调用接口传递中文时中文乱码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论