AngularJS快速入门

来源：互联网发布：数据库check约束男女编辑：程序博客网时间：2024/06/05 13:29

AngularJS.快速入门

一、 AngularJS简介

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

AngularJS是web应用前端的一个完整的解决方案，框架不仅提供了优雅的DOM操作和基于Ajax的数据交互技术，同时进行了良好的结构整理和常规的业务逻辑处理的封装，使得Angular构建的应用能够灵活的适应不同的项目场景。

同样，AngularJS框架从2013年开始在国内出现应用，一直到2016年活跃于web前端项目开发中，丰富的社区资源也是一个非常重要的原因。

上面Angular中的MVC指的是：

M：model 数据模型

V: view 视图

C: controller 控制器

M:保存数据

V：展示数据

MVVM:

M:model

V：view

VM：view-model

注意：

AngularJS中提供了如下的解决方案用以前端开发：

数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块.

二、引导程序

任何应用程序，运行过程中都会有一个运行的入口。

AngularJS应用程序也是一样，正常情况下，引导Ag应用的入口程序有两种：

ng-app指令：项目中常用的方式

bootstrap：手工引导

常规模式下，是通过ng-app指令引导Angular应用进行工作的。

网页中引入Angular之后，程序运行时会自动查找ng-app指令并从这个入口开始加载编译并解释执行。

三、 AngularJS入口（基本框架）

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>AngularJS Hello!</title>    <script src="angular.min.js"></script></head><body>    <!-- 将一个标签和控制器进行绑定，控制器中的数据，就可以使用在这个标签的内部了-->    <div ng-controller="myCtrl">        <!-- ng-model用来将表单元素的数据和变量双向绑定 -->        <input type="text" ng-model="hello">        <!-- 双大括号中，可以直接写变量名称，和变量的数据绑定，变量的数据发生改变，页面的数据会同时改变 -->        {{hello}}    </div><script>    /*定义一个Angular模块*/    var app = angular.module("myApp", []);    app.controller("myCtrl", function($scope){        $scope.hello = "hello angularjs!"    });</script></body></html>

0 0