angularjs学习第一天笔记
angularjs学习第一天笔记
您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！
第一天，简单了解了其中中一些基本概念
1、angularjs的解释
angularjs是Google旗下的一个前端js框架，其与html、css、js配合使用，从而使得web开发更加的简单快捷。
angularjs有4大特性：MVC、模块化、指令系统、双向数据绑定。在学习过程中也是围绕这几点进行系统的学习。
2、angularjs创建一个页面的简单特性
a.首先要引用angularjs类库
b.在html页面要标注ng-app属性，该标注表示所在范围内的DOM结构才收angularjs所控制
c.数据绑定模块的默认格式为{{参数名称}}，当然这个格式是可以自定义设置的
d.第DOM标签添加angular属性时，都是以ng-开始
e.angular框架中数据模型数据的变更会动态的绑定显示到view中
f.angular框架外的js修改数据模型的变化不会动态的绑定显示到view中，需要借助$apply手动更新
f.Scope提供$watch方法监视Model的变化
g.Scope提供$apply方法传播Model的变化
3、创建一个简单angularjs页面实现数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="myContro">
<div>名字：<input type="text" ng-model="name" placeholder="请输入姓名" /></div>
<div>你输入的姓名为：【{{name}}】请核对</div>
<div ng-click="clear()">清空输入</div>
</div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller("myContro", function ($scope) {
//// 清空输入函数
$scope.clear = function () {
$scope.name = "";
}
//// 2s后直接给name赋值，但是试图不会实时更新
setTimeout(function () {
$scope.name = "开始输入";
}, 2000);
//// 10s后给name赋值，并手动
setTimeout(function () {
$scope.$apply(function () {
$scope.name = "输入结束";
});
}, 10000);
//// $watch监控模型name中字的改变
$scope.$watch("name", function (newValue, oldValue) {
if (newValue != oldValue) {
console.log("name值又发生了改变：改变前的值：【" + oldValue + "】、改变后的值【" + newValue + "】");
}
});
});
</script>4、模块
为了代码的高效，整洁，提高代码的可重用性、可读性，angular引入了模块的概念module,简单的里面，模块就是讲页面代码分割成不同的独立模块。
一个应用可以包含多个模块，各个模块包含其核心的逻辑代码，不同模块间相互独立。一个ng-app代表一个模块。
AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数， 第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。 angular.module('myApp', []);
5、作用域
angular作用域是其最主要核心特征之一，通过$scope来表示。作用如下：
a.应用的作用域是和应用的数据模型相关联的
b.同时作用域也是表达式执行的上下文。
c.$scope 对象是定义应用业务逻辑、控制器方法和视图属性的地方。
d.作用域是视图和控制器之间的胶水
e.$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。
g.$scope也有父子级之分，和面向对象的类的继承一样，子级的$scope继承父级的$scope,其中跟$scope表示为：$rootScope
h.提供观察者以监视数据模型的变化
i.可以将数据模型的变化通知给整个应用，甚至是系统外的组件
j.可以进行嵌套，隔离业务功能和数据
k.给表达式提供运算时所需的执行环境
6、控制器
控制器的关键词为ng-controller,其作用还是讲页面逻辑根据功能模块分割中更小模块。
控制器是可以嵌套的，作用域也是嵌套的
定义使用方式如下：
var app = angular.module('模块名称', []);
app.controller('控制器名称', function($scope) {
控制器内的业务逻辑代码...
});
7、表达式
angular的表达式主要学习两个表达式：解析达式，关键词（ $parse）、插值字符串表达式，关键词（ $interpolate）
a.解析达式，关键词（ $parse），其结果是一个函数，也就是执行一个逻辑运算表达式
特征：解析异常不会抛出异常
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
<div>
表达式：<input type="text" ng-model="expression" placeholder="请输入表达式"/>
</div>
<div>
<input type="button" value="开始运算" ng-click="calculat()"/>
</div>
<div>表达式运算结果：{{reult}}</div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myContro", function ($scope, $parse) {
$scope.expression = "";
$scope.reult = "";
$scope.calculat = function () {
$scope.reult = $parse($scope.expression)($scope);
}
});
</script>b.插值字符串表达式，关键词（ $interpolate）
简单理解就是格式化字符串，通过{{站位字符串名称}}对字符串解析站位，然后通过关键词$interpolate返回的函数对站位字符串名称赋值，得到最终的字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
<div>
表达式：<input type="text" ng-model="name" placeholder="请输入名称" />
</div>
<div>
<input type="text" multiple="" ng-model="textValue"/>
</div>
<div>预览：{{reviewReult}}</div>
</body>
</html>
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myContro", function ($scope, $interpolate) {
$scope.name = "";
$scope.textValue = "";
$scope.reviewReult = "";
$scope.reviewReultTemp = "{{name}},您好,{{textValue}}";
var template = $interpolate($scope.reviewReultTemp);
$scope.$watch("name", function (newValue, oldValue, ) {
if (newValue != oldValue) {
$scope.reviewReult = template({ name: $scope.name, textValue: $scope.textValue});
}
});
});
</script>今天就到此为止，明天我们继续，加油！