首页 > 代码库 > Angular

Angular

1.Angular 内容概要   

简介、主要特性 应用场景 搭建开发环境 Angular的 ng-app、{{ }} Angular的表达式、作用域、控制器 数据双向绑定、模块、事件

2.Angular 简介

   Angular 是Google提供的一套基于MV*(MVC或MVVM)结构的JavaScript开发工具,它也是一套开源的项目框架。  

   MVC:Model(模型)-View(视图)-Controller(控制器) MVC模式的理解:在Web程序中可以将视图理解为浏览器,服务器端组件为控制器,模型即为业务逻辑模块,视图和控制器都依赖于模型。 MVC的处理过程:首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。

3.Angular 特性

  主要特性:指令系统 . 模块系统 . MVC模式 . 依赖注入 . 数据双向绑定。

  核心功能:对现有HTML编码以指令方式进行扩展,并使扩展后的HTML编码可以通过使用元素声明的方式来构建动态内容。

4.Angular 应用

应用场景:AngularJS主要考虑的是构建CRUD应用。 (增加Create、查询Retrieve、更新Update、删除Delete)

幸运的是,至少80%以上的WEB应用都是CRUD应用。  如酷炫的特效,动画,游戏等,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。

5.Angular 环境

官网地址:http://angularjs.org/

<script src=http://www.mamicode.com/”js/angular-1.2.20.min.js"></script>

6.Angular 程序

指令ng-app告诉angularjs它的控制范围。

使用双大括号{{ }}语法插入动态数据

Angular 表达式

使用 表达式 把数据绑定到 HTML; .表达式写在双大括号内:{{ 表达式 }}; .在表达式书写的位置“输出”数据; .AngularJS 表达式 很像 JavaScript 表达式, 它们可以包含文字、运算符和变量; .示例:{{ 5 + 5 }} 或 {{ name + " " + age }}

Angular 控制器

控制器 控制AngularJS 应用程序的数据, 是连接视图与数据的桥梁 。 控制器采用ng-controller指令定义,Angular通过控制器构造函数生成实体对象,生成对象的过程中,$scope对象作为参数注入其中,并允许用户访问和操作$scope对象。 控制器操作$scope对象,相当于为其添加属性和方法。

Angular 模块

-模块定义了一个应用程序,是应用程序中不同部分的容器; -模块可以提高代码的整洁和重用性,可以按任意顺序加载; -通过 AngularJS 的 angular.module( )函数来创建模块; -模块可在 AngularJS 应用中添加控制器,指令,服务等;

实例:<div ng-app=“myApp”>......</div> var app = angular.module(“myApp”, []);  应用程序myApp模块对应执行应用的 HTML 元素。

Angular 事件

Angular事件指令:

ng-click/dblclick

ng-mouseover/out

ng-keydown/up

ng-focus/blur

ng-submit

更多事件:https://segmentfault.com/a/1190000002634554

Angular