使用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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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
咖啡知识大全
2021/03/03 新手入门
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
武汉高蓝德国际.net机试
2016/06/24 面试题
Linux文件系统类型
2012/09/16 面试题
Overload和Override的区别
2012/09/02 面试题
人事助理自荐信
2014/02/02 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2014年个人总结范文
2015/03/09 职场文书
职工培训工作总结
2015/08/10 职场文书