angular
Angular
Angular 简介
Angular 是Google提供的一套基于MV*(MVC或MVVM)结构的JavaScript开发工具，它也是一套开源的项目框架。
MVC：Model（模型）－View（视图）－Controller（控制器）
MVVM：Model－View－ViewModel（视图模型）
M层和V层功能基本是同样的：M负责业务逻辑，
V负责UI逻辑 Controller 接受用户的输入并调用M和V来完成用户的请求
ViewModel 封装了表现逻辑和业务逻辑的运行状态
Angular 特性
指令系统
. 模块系统
. MVC模式
. 依赖注入
. 数据双向绑定
Angular 应用
应用场景：AngularJS主要考虑的是构建CRUD应用。 （增加Create、查询Retrieve、更新Update、删除Delete）
幸运的是，至少80%以上的WEB应用都是CRUD应用。 如酷炫的特效，动画，游戏等，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。
Angular 表达式
.使用 表达式 把数据绑定到 HTML；
.表达式写在双大括号内：{{ 表达式 }}；
.在表达式书写的位置“输出”数据；
.AngularJS 表达式 很像 JavaScript 表达式， 它们可以包含文字、运算符和变量、过滤器；
.示例：{{ 5 + 5 }} 或 {{ name + " " + age }}
Angular的控制器(controller) ：
控制器 控制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 事件
ng-click/dblclick
ng-mouseover/out
ng-keydown/up
ng-focus/blur
ng-submit ……
更多事件：https://segmentfault.com/a/1190000002634554
模块的例子：
<script>
// var app=angular.module('myApp',['herApp']);//创建一个模块，依赖herApp
// var app2=angular.module('myApp');//获取一个模块
var app=angular.module('myApp',[]);
app.controller('Myctrl',function($scope){
//模块中添加控制器
$scope.say=function(){
return '大家好';
}
});
app.controller('Myctrl2',['$scope','$rootScope',function(scope,rscope){//防止上线代码压缩后获取不到
scope.say=function(){
return '大家好';
};
rscope.age='12';
}]
);
</script>
2.angular程序例子
<!DOCTYPE html>
<html ng-app>
<!-- //初始化指令，告诉angular他的管理范围（从什么位置开始启动angular) -->
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.2.20.min.js"></script>
</head>
3.angular事件
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.5.8.min.js"></script>
</head>
<body>
<div ng-controller="Myctrl">
<button ng-click="jisuan()">点击</button>
<h1>{{result}}</h1>
<button ng-click="toggle()">按钮</button>
<h1 ng-show="bool">爱上空间</h1>
</div>
<script>
var app=angular.module('myApp',[]);
var bool=false;
app.controller('Myctrl',['$scope',function(scope){
scope.result=0;
scope.jisuan=function(){
scope.result+=1;
};
scope.toggle=function(){
scope.bool=!scope.bool;
}
}]);
</script>
</body>
</html>
浙公网安备 33010602011771号