首页 > 代码库 > angularJS培训之helloworld篇
angularJS培训之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="http://www.mamicode.com/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篇