AngularJS 从入门到精通（一指令）

最新推荐文章于 2023-12-04 11:43:38 发布

YOYO-COOL

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： angularjs javascript 前端开发 angular js

本文链接：https://blog.csdn.net/lucius_yu00/article/details/42552959

一、介绍

AngularJS 是google 开发者设计的一个前端开发框架，它是由是由javascript 编写的一个JS框架。通常它是用来在静态网页构建动态应用不足而设计的。

AngularJS特点如下：

REST Client： RestFul 是主流的接口模式，而AngularJS实现RestFul 接口客户端只需要一行代码即可。

MVVM（Model-View-ViewModel）模式： Model 简单数据对象，View 视图（如HTML,JSP等），ViewModel是用来提供数据和方法，和View 进行交互。这种设计模式使得代码解耦合。

数据绑定： AngularJS是数据双向绑定。

依赖注入：AngularJS支持注入方式把需要的对象，方法等注入到指定的对象中。

指令： AngularJS内部自带各种常用指令，同时也支持开发者自定义指令。

HTML模板和扩展HTML： AngularJS可以定义与HTML兼容的自定义模板。

二、开始AngularJS

1. lib 引用，在HTML中引入anjularJS lib，如下：

            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

可以在AngularJS官网( https://angularjs.org/)下载最新的版本 (1.3.8) 。

2. 简单例子：

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {
  
  {firstName + " " + lastName}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>

</body>
&