01-AngularJS-简介

xiaoxiao2021-03-25 147

AngulJS简介

谷歌公司动态为web应用设计的JavaScript框架，为了克服HTML在构建应用上的不足。它可通过<script>标签添加到HTML页面。AngularJS通过指令拓展了HTML，且通过表达式绑定数据到HTML。

AngularJS 四大核心思想

依赖注入、模块化、双向绑定、语义化标签

AngularJS 的优点：

不需要写大量代码，实现复杂功能；不要像jQuery大量操作复杂DOM代码，只需改变数据模型，加快开发。

什么是AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 - AngularJS 把应用程序数据绑定到 HTML 元素。 - AngularJS 可以克隆和重复 HTML 元素。 - AngularJS 可以隐藏和显示 HTML 元素。 - AngularJS 可以在 HTML 元素”背后”添加代码。 - AngularJS 支持输入验证。

AngularJS前端MVC的设计与搭建

为什么需要MVC？ 1、代码规模越来越大，切分职责是大势所趋。 2、为了复用：很多逻辑是一模一样的。 3、为了后期维护方便：修改一块功能不影响其他功能。 MVC只是手段，终极目标是模块化和复用。

前端MVC的困难：流程：浏览器加载脚本->加载完成之后JIT编译执行操作DOM的代码必须等待整个页面全部加载完成；多个JS文件之间如果出现相互依赖，程序猿必须自己解决； JS的原型继承也给前端带来了很多困难

M：模型model-数据库； V：视图-HTML页面； C：控制器-处理用户交互

MVC框架

<body ng-app="app"> //ng-app:设置aglJS管理边界 <div ng-controller="MyCtrl"> //ng-controller:设置控制器 V视图 <input ng-model="msg"> //ng-model:把元素值(比如输入域的值)绑定到应用程序 <h1>{{msg}}</h1> //{{}}:将msg绑定到h1 </div> </body> <script type="text/javascript"> angular.module('app',[]) //[]为其他aglJS模块，使用需引入该模块js .controller('MyCtrl',function($scope){ $scope.msg="angular" //数据模型 }) </script>

注：MyCtrl为控制器（C）；body为视图（V）； scope为M数据， scope.msg为数据模型Model。 module定义了AngularJS应用，Controller用于控制AngularJS应用。

什么是AngularJS？

转载请注明原文地址: https://ju.6miu.com/read-7613.html

技术

最新回复(0)