一、什么是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 >
<head>
<meta charset="UTF-8">
<title>程序1</title>
</head>
<body>
<div>
name:<input placeholder="inputyourname" />
<br />
你的名字是 -
</div>
</body>
</html>
运行效果应该如下
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiclRnblN0LclHdpZXYyd2LcBzNvwVZ2x2bzNXak9CX90TQNNkRrFlQKBTSvwFbslmZvwFMwQzLcVmepNHdu9mZvwFVywUNMZTY18CX052bm9CX9UFVPh3Y61UNNpWTmZEWjZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39DM1gzMwMTMzETNyUDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
2.使用了AngularJS的HTML界面
接着我们添加,ng模块 ,使用ng的app组件和定义变量
<!DOCTYPE html>
<html >
<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