本文主要是介绍前端开发工程师——AngularJS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一.表达式和语句
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app><!-- ng-app指令： 表示告诉angular它管理当前标签所包含的整个区域，并且会自动创建$rootScope跟作用域对象--><!-- ng-model:表示当前输入框的值与谁关联（属性名：属性值） ，username表示属性名，{{username表示属性值}}他是表达式，获取属性值--><input type="text" ng-model="username"><p>您输入的内容是：<span>{{username}}</span></p><script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app ng-init="username='tom'"><!-- ng-init:用来初始化当前作用域变量 --><!-- ng-model双向数据绑定 --><input type="text" ng-model="username"><p>姓名1：<span>{{username}}</span></p><br/><input type="text" ng-model="username"><p>姓名2:<span>{{username}}</span></p><script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>
作用域对象和控制器对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body ng-app><!-- 控制器对象 用来控制Angular应用数据的实例对象ng-controller：用来指定控制器构造函数，Angular会自动new此函数创建控制器对象同时还会创建一个新的作用域对象$scope,他是$rootScope的子对象在控制器函数中声明$scope形参，Angular会自动将$scope传入--><div ng-controller="MyController"><input type="text" placeholder="姓" ng-model="firstname"><input type="text" placeholder="名" ng-model="lastname"><p>输入的姓名为：{{firstname + '-' + lastname}}</p><p>输入的姓名2为：{{getName()}}</p></div><script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script><script>function MyController($scope){console.log($scope);$scope.firstname = 'kobe';$scope.lastname = "tom";$scope.getName = function(){return $scope.firstname + '' + $scope.lastname;}}</script>
</body>
</html>这篇关于前端开发工程师——AngularJS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
