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


Posted in Javascript onJune 23, 2015

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

完整的代码请看这里。

Javascript 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
js切换div css注意的细节
Dec 10 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
谈谈JS中的!!
Dec 07 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
layui实现三级导航菜单
Jul 26 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
浅谈setTimeout 与 setInterval
Jun 23 #Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
You might like
支持中文的php加密解密类代码
2011/11/27 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
小型女装店的创业计划书
2014/01/09 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
后备干部考察材料
2014/02/12 职场文书
十佳护士获奖感言
2014/02/18 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
美丽人生观后感
2015/06/03 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
Redis实现分布式锁的五种方法详解
2022/06/14 Redis