angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序

一、什么是angularJS

angularJS是基于javascript的框架，所谓框架，自然就是封装了很多功能，举个例子，使用原生javascript，如果你要写一个网页幻灯片，你可能需要几十行代码，甚至为了不同浏览器的兼容性，你可能要上百行代码，但是如果使用angularJS，你仅仅需要调用几个函数就能完成。这些功能。也就是说angularJS封装了很多套路。

如果你学过JQuery或你在纠结学JQuery还是Angular，那么你一定和以前的我一样，很想知道angular和jquery有什么区别？我想说不论是他们的内部机制还是使用方法，他们都不是同一种东西。JQuery更多的像是一个函数库，你使用它的感觉应该是所以对象，然后调用各种函数。angularjs不同，它有很多概念，比如：模块、数据绑定、路由等。你以后会慢慢了解到，这里我只想强调，如果你学过JQuery，那么在学angularJS的时候请不要用jquery和angular比较！，再不考虑基于jquery的其他框架的情况下，个人认为angularjs比jquery强大太多。个人认为如果学好了js，那么jquery会比比angularjs好学，但是如果已经学了jquery，向angular的思维方式转变会有困难，但不是不可克服，且一旦克服了思想转变的困难，你会对angular的理解更深入，使用时，更信手拈来。

如果你是新手，你也知道jquery，那么你可能会疑问，jquery和angularjs哪个好学？哪个有前景？这种问题千万不要拿去问那些工作经验丰富的大牛，因为你这么比较就像在问，猫和狗哪个比较好养？这是不同的东西，不同的人各有所好，你没办法下定论。我只能告诉你如果你希望你的代码漂亮易维护，且你希望学了以后能坚挺相当长的一段时间，且你还是个web初学者，那么我推荐你angularJS，至于jquery就让他作为你闲暇时像看报纸一样的去了解一下就好了。

二、我们需要先学会什么？

你需要熟练javascript、HTML、CSS。不需要精通(也就是不需要你去抠细节用法)，但是要掌握基本用法。比如javascript如何定义变量、函数、以及基本运算符、对象等，最重要的就是DOM编程；HTML常见标签的基本用法，这些标签能有怎样的显示效果？CSS的属性、选择器等。你可以购买书籍，也可以查询网站，这里我不再提供相关资料，百度有很多。

三、所需开发环境

1.使用IDE

如果你编程经验不丰富，英语不好，我推荐你使用国产的IDE——HBuilder。他使用简单，功能方面中规中矩，不说很棒，但是至少对初学者而言它很容易上手，而且由于是国产，他的文档都是中文的，非常详细。安利一下他的官网链接http://www.dcloud.io/

如果你有丰富的编程经验，你是其他方向的程序员准备向这个方向转，那么我推荐你使用JetBrains公司的WebStorm，他的界面非常漂亮，交互非常友好，唯一的缺点是没有中文文档。如果你做过安卓开发，用过谷歌官方的AndroidStudio，那么你应该会很容易接受它，因为AndroidStudio就是基于该公司的IntelliJ IDEA的，而该公司的各个IDE界面基本统一。值得注意的是，如果你是学校老师或学生，你可以申请认证，他们免费为学生和老师提供他们的所有产品，这样你就不需要去考虑怎么破解的问题啦！！~~安利一下JetBrains的官网https://www.jetbrains.com/,学生和教师认证激活入口https://www.jetbrains.com/student/，学生和教师认证激活教程https://imlonghao.com/32.html

2.安装AngularJS

开发工具选好了，接下来就是添加angularJS了，我首推使用CDN为你的项目引入angularJS你只需要在head标签内添加如下一行东西即可

<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>

这是又拍云的CDN，也就是说你的项目不需要下在angular的js文件，只需要这样子引入，那么浏览器在加载的时候会自动去这个连接加载angularjs的库，方便快捷，实际生产中还能降低服务器流量，缺点是电脑没有联网或这引用的服务器找不到这个资源的话，你的网页就用不了ng

当然你也可以下载angularjs的文件,缺点与上面相对，优点是离线也能在本机上运行

四、我的第一个angularjs应用

1.不使用angularJS的HTML界面

这里我po出一些代码，如果你看不懂没关系，以后你会慢慢理解的。

首先我们不使用AngularJS（以后简称ng），编辑以下代码，运行查看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>程序1</title></head><body><div>name:<input placeholder="inputyourname" /><br />你的名字是 -</div></body>
</html>

运行效果应该如下

2.使用了AngularJS的HTML界面

接着我们添加,ng模块，使用ng的app组件和定义变量

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>程序1</title><!-- 引入angularJS --><script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script></head><body><div ng-app="" ng-init="inputName='Funco_小风'"><!-- 定义变量inputName初始值为字符串'Funco_小风' -->name:<input type="text" placeholder="inputyourname" ng-model="inputName" /><!-- 通过ng-model将该input标签与变量inputName绑定 --><br />你的名字是 -{{inputName}}<!-- 显示变量inputName --></div></body>
</html>

显示效果应该如下

同时，如果你修改输入框内的字符，你应该会发现，下方显示的字符串会同步改变

如果你学过jquery，通过上面的例子就应该已经发现ng与jquery在使用上最明显的不同

你可以通过上方的代码和注释尝试能否理解这个最简单的ng程序，如果你完全无法理解，别着急，通过后面的学习你会慢慢理解。

但是，你应该至少能看懂代码中的HTML标签和标签属性是什么，否则，你需要考虑回过头深入学习HTML/CSS/JS