AngularJS快速入门
AngularJS简介:
AngularJS是一个基于MVC处理模式,实现了MVVM数据双向绑定的用于开发动态Web项目的框架,以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场,是前端敏捷开发使用的主流的必须掌握的框架之一。
注:
库:封装原生JavaScript实现的大量函数的集合,是提供了各种特定功能的函数库,通过引入的库中的函数,可以快捷实现一些特定的处理过程,如截取字符串等等...
框架:一种封装了原声JavaScript实现的函数、功能、组件、处理流程的特殊实现,通过引入框架中的配置,可以实现一定的逻辑处理功能,如Bootstrap中的轮播图等等...
AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:
1、使用双大括号{{}}语法进行数据双向绑定
2、使用DOM控制结构来实现迭代或者隐藏DOM片段
3、支持表单的表单的验证
4、能将逻辑代码相关联到相关的DOM元素上
5、能将HTML分组成可重用的组件
AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。其中在前端开发常用的有:数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块。
实例:
html代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World!</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- 将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了-->
<div ng-controller="myCtrl">
<!-- ng-model用来将表单元素的数据和变量双向绑定 -->
<input type="text" ng-model="hello"><br />
<!-- 双大括号中,可以直接写变量名称,和变量的数据绑定,变量的数据发生改变,页面的数据会同时改变 -->
{{hello}}
</div>
</body>
</html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World!</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- 将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了-->
<div ng-controller="myCtrl">
<!-- ng-model用来将表单元素的数据和变量双向绑定 -->
<input type="text" ng-model="hello"><br />
<!-- 双大括号中,可以直接写变量名称,和变量的数据绑定,变量的数据发生改变,页面的数据会同时改变 -->
{{hello}}
</div>
</body>
</html>
js代码:
<script>
/*定义一个Angular模块*/
var app = angular.module("myApp", []);
/*定义一个Angular模块*/
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.hello = "hello angularjs!今天开始,要进行JS高级开发部分"
});
</script>
上面例子中改变表单input中的值,页面中的值也会改变,这就是AngularJS数据的双向绑定。
AngularJS中的标识符:
ng-app="myApp":是AngularJS应用程序运行的入口,当AngularJS程序要运行时,找到了ng-app开始运行,加载主要模块myApp模块。
ng-controller="myCtrl":是Angular讲标签与控制器进行绑定。
AngularJS的表达式:
AngularJS 表达式写在双大括号内:
{{ expression }}
AngularJS 表达式把数据绑定到 HTML,这与
ng-bind指令有异曲同工之妙
AngularJS 将在表达式书写的位置"输出"数据
AngularJS 表达式很像
JavaScript 表达式:它们可以包含文字、运算符和变量
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS的社区:
http://docs.angularjs.org
http://www.angularjs.net.cn/tutorial/1.html
https://github.com/aztack/AngularJS-translation
https://github.com/dolymood/learning-angular
http://www.angularjs.cn/
https://www.zouyesheng.com/angular.html
http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx
http://blog.jobbole.com/52857/
http://blog.jobbole.com/62999/
AngularJS的官方网站:
AngularJS1.x代码下载:
AngularJS1.x官方教程:
https://code.angularjs.org/1.6.4/docs/tutorial
AngularJS1.x官方开发向导:
https://code.angularjs.org/1.6.4/docs/guide
AngularJS1.x官方API:
https://code.angularjs.org/1.6.4/docs/api