Angular js学习知识点整理

angularjs是JavaScript的一个框架

angularjs表达式写在两个花括号里面{{}}，可以包含文字，运算符和变量 ，写在html中，绑定数据   例：{{job}}、{{5+5}}、{{person.name}}

angularjs指令

ng-app 一般写在父级，表示父级里面的所有东西都是angular应用，只有被na-app包含的块才会受angularjs的影响

ng-model 进行数据绑定 

angularjs实现快递运费计算逻辑思维

实现目标：输入物品重量，自动计算出快递费的价格

小程序需要变量 、表达式、控制结构

实现步骤

1、先调用angularjs插件

2、先建一个div块，作为父级，<div ng-app=“”>作为一个小程序块，ng-app是作为一个小程序的根元素，只有这个程序会受angularjs影响

3、输入dom。<p>商品重量为<input type="text" name="kg" ng-model=“kg”>kg</p> ng-model的kg变量捕捉input框输入的变量

4、获取dom。<p>运费为<span>{{price()}}</span>元</p> kg就是ng-model捕捉获取到的变量，表达式{{}}引用变量

实现快递费的更加合理化进行修改优化

1、ng-app进行命名，就是给这个小程序命个名字，方便以后的修改管理 ng-app="jisuanfei" 而且可以不影响全局变量

2、设置快递费的初始值，在1kg以内的商品快递为15元，超过1kg快递费增加

3、为了实现功能，给小程序加一个控制器 ng-controller="contro" 控制器可以增加新的功能，设置初始值，进行自定义行为

4、实现小程序的功能

var app = angular.module('',[])   //创建一个小程序，module模块。

					//有两个参数，一个为小程序的名字（ng-app），一个为空

app.controller('contro',funciton($scope){  //小程序控制器 拥有控制权 可以控制函数 函数传了一个值为作用域

						// $scope作为小程序变量与控制器之间的接口

$scope.kg=1;

$scope.price=function(){

if($scope.kg<=1){

reture 15;

}else{

	return (15+($scope.kg-1)*10);

}

}

})