AngularJS第一讲

最新推荐文章于 2018-08-20 23:19:00 发布

聂家小月

最新推荐文章于 2018-08-20 23:19:00 发布

阅读量289

点赞数 1

本文链接：https://blog.csdn.net/sky_moon_y/article/details/70825680

版权

AngularJS入门——第一讲

1、AngularJS简介

（1）AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、依赖注入等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。

（2）AngularJS的框架是特殊的，已经实现了的web应用，你只要对它填充具体的业务逻辑。这里的框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。

（3）AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；

使用DOM控制结构来实现迭代或者隐藏DOM片段；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

2、AngularJS下载地址

http://code.angularjs.org

3、Angularjs专业术语概述

术语	描述
模板template	包含了Angular特殊扩展标记的HTML代码
指令directive	扩展的HTML代码，自定义的标签、属性等等
模型model	保存在JS中，用来和用户交互的数据
作用域scope	模型数据在HTML页面中产生作用的范围
表达式expression	AngularJS在HTML页面中可以运算的语法
编译器compiler	被用来解释HTML代码中的Angular代码
过滤器filter	对HTML页面中输出的数据进行指定格式展示
视图view	统称用户看到的HTML视图页面
数据绑定data binding	JS中特定的数据和HTML页面上的数据的关联关系
控制器controller	给视图view提供功能支持的东东
依赖注入 dependency injection	Angular自动创建对象并传递对象的一种方式
注入器 injector	专门用来实现依赖注入（DI）的容器
模块module	Angular用来对项目进行最高层次封装的东东
服务service	Angular用来对视图view提供业务功能支持的东东
组件component	用于对网页的公共部分进行封装重用的Angular代码通常会包含模板、指令、服务等等

4、Angularjs步骤

（1）引入AngularJS的JS文件

（2)Html自定义属性ng-app,AngularJS是模块化，作用是为了启动AngularJS应用程序

（3）定义控制器ng-controller="名称"

（4）依赖注入$scope的属性

5、案例

（1）

<!DOCTYPE html>

<html ng-app="myApp">
....
<div ng-controller="myCtrl">
....
{{hello}}
-->

<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 />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="hello"><br />
<input type="text" ng-model="greeting"><br />
<input type="text" ng-model="greeting"><br />
<input type="text" ng-model="greeting"><br />

{{hello}}<br />
{{greeting}}
</div>
<script>
/*定义一个Angular模块*/
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope){
$scope.hello = "hello angularjs！今天开始，要进行JS高级开发部分"
$scope.greeting = "hello angularjs！今天开始，要进行JS高级开发部分"
});
</script>
</body>
</html>