angular入门

来源：互联网发布：ssd优化编辑：程序博客网时间：2024/05/22 15:07

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">

<input type="text" ng-model="hello"><br />

{{hello}}
</div>
</body>
</html>

js代码：

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的官方网站：

http://angularjs.org

AngularJS1.x代码下载：

http://code.angularjs.org

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

1 0