AngularJS快速入门_快速入门angularjs

作者：知新_RL | 2024-07-24 11:48:38

踩

快速入门angularjs

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/874532