码迷,mamicode.com
首页 > Web开发 > 详细

angularJS培训之helloworld篇

时间:2014-09-19 19:39:46      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:angular   helloworld   

    学习一门新的语言我们总是来句‘hello,world!‘,来,我们看下angularJS的helloworld版本是怎么实现的。

1、首先我们下载angularJS库,你可以从官网angularjs.org或者github下载,也可以从github上的         angular-seed 项目中找到对应库文件,也可以通过Google的CDN网络加载文件。通过script标签引入到文件中

2、开发工具

   js开发的神器首推webstorm莫属,超强的重构能力,karma,grunt的支持,js代码自动补全能力的支持等等都是吸引js开发者不错的功能,安装后你可以在安装目录下找到一个快捷键的文档,更多的功能就慢慢探索吧,Good luck!不过对咱们来说有个不怎么好的消息,这个是要收费的。不过在咱们的天朝这个也不是什么大问题嘛,破解版、搜注册码都是搞定滴,下载请戳这里:http://www.jetbrains.com/products.html#javascript

   还有一个比较小巧的工具也值得尝试,就是sublime,工具虽然小巧但是可以安装各种类型的插件实现自动补全,这么好的工具你值得拥有!

3、angularJS first demo


<html ng-app>

<head>

<meta charset="utf-8">

<title>angularJs Demo</title>

<script src="lib/angular.js" type="text/javascript" charset="utf-8" ></script>

</head>

<body >

<DIV>

<input type="input" name="name" ng-model=‘name1‘>

<p>Hello,{{name1}}</p>

Hello,<span ng-bind="name1"></span>

</DIV>

<DIV>

name : {{‘Eason‘ + ‘_‘ + ‘hou‘}} 

</DIV>

</body>

</html>

说明:ng-app指令是angularJS特有的,用来说明angular程序的范围,这个指令可以放在任何的html元素中,如果放在body中,那么body部分就是angularJS程序的范围。


<input type="input" name="name" ng-model=‘name1‘> 在这个input中我们用ng-model指令来声明一个model,名字为name1,这样就能把输入的数据绑定到name1中,这个是angularjs的核心概念:data-bind,view输入会动态刷新到模型中


<p>Hello,{{name1}}</p>

通过{{}}进行数据绑定让我们可以把变量的值插入到DOM中,同事能保证它会自动同步。所以当你在input中输入world的时候,页面会自动显示输入的内容,不需要绑定别的事件。


<span ng-bind="name1"></span>

ng-bind也是数据绑定,和{{name1}}有着同样的功能。这个应用场景是:当我们的angular库加载失败的时候就会显示成“{{name1}}”而没有显示模型值,所以可以用ng-bind,如果库文件加载失败会显示为空。

helloworld 篇就先介绍到这里,下篇介绍scope和controller的基本用法,敬请期待!

本文出自 “Eason's hcc” 博客,请务必保留此出处http://hcc0926.blog.51cto.com/172833/1555198

angularJS培训之helloworld篇

标签:angular   helloworld   

原文地址:http://hcc0926.blog.51cto.com/172833/1555198

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!