01-AngularJS-简介

来源：互联网发布：成都外包seo 编辑：程序博客网时间：2024/06/05 09:54

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？

0 0