angularJS培训之helloworld篇

浏览数：58 / 时间：2015年06月09日

学习一门新的语言我们总是来句‘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

<head>

<title>angularJs Demo</title>

</head>

<body >

<DIV>

<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的时候，页面会自动显示输入的内容，不需要绑定别的事件。

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

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

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

angularJS培训之helloworld篇