码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs初识

时间:2017-05-22 21:31:46      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:javascript   客户端   开发   网站   

概念:

    基于javascript开发的‘客户端应用框架‘,使我们可以更加快捷,简单的开发web应用。适用于CRUD或SPA单页面网站的开发(前后端数据交互频繁)

作用域:

  $scope:局部

  $rootScope:全局

  双向数据绑定:mvvm

  $timeout  用法类似setTimeout

  但是$timeout会改变view中的值

  ng-click   类似于onclick

  ng-model 

  监听器:(监听数据变化)

  三个参数:

  监听的对象

  回调函数---->有两个参数(新的值,旧的值)

  true:是否深度监听   

实例:

    

<!doctype html>

<html lang="en" ng-app="phonecatApp">

<head>

<meta charset="UTF-8">

<title>AngularJs初识</title>

<!--引入AngularJs的文件-->

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

 var phonecatApp = angular.module(‘phonecatApp‘, []);

 phonecatApp.controller(‘PhoneListCtrl‘,function($scope) {

  $scope.huawei={

  ‘price‘:1499,

  ‘num‘  :1   ,

  ‘fre‘  :20

  };

  $scope.max = function(){

  return  $scope.huawei.price*$scope.huawei.num;

  }

  $scope.$watch($scope.max,function(newVal,oldVal){

  newVal>=100?$scope.huawei.fre=0:$scope.huawei.fre=20;

  },true);

 })

</script>

</head>

<body>

<div ng-controller=‘PhoneListCtrl‘>

 <p>价格: <input type="text" ng-model=‘huawei.price‘/></p>

 <p>个数: <input type="text" ng-model=‘huawei.num‘/></p>

 <p>费用: <span></span>{{max() | currency:‘¥‘}}</p>

 <p>运费: <span></span>{{huawei.fre | currency:‘¥‘}}</p>

 <p>总额: <span></span>{{max()+huawei.fre| currency:‘¥‘}}</p>

</div>

</body>

</html>



本文出自 “12897581” 博客,请务必保留此出处http://12907581.blog.51cto.com/12897581/1928368

AngularJs初识

标签:javascript   客户端   开发   网站   

原文地址:http://12907581.blog.51cto.com/12897581/1928368

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!