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=”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