首页 / ANGULAR / angularjs基础知识
angularjs基础知识
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angularjs基础知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6204字，纯文字阅读大概需要9分钟。
内容图文
js中的函数，判断这个函数是构造函数还是自调用的函数，只需要看this指向。如果this指向的是window,那肯定是自调用，如果this的实例是这个函数，那就是构造函数。
比如angularjs中的MyController都是会自动new一个构造函数的。可以这样证明:
function MyController($scope){
console.log(this instanceof MyController); //返回true证明被new过。(构造函数)
}
依赖对象:完成某个特定的功能需要依赖某个对象才能实现，这个对象就是依赖对象。
依赖注入:依赖的对象以形参的方式被注入进来使用，这种方式就是声明式依赖注入。
angularjs中的“$scope”对象就是依赖对象，并且是依赖注入的形式进行使用。
angularjs中的$scope，形参必须是特定的名称，否则angularjs无法注入抛异常。
回调函数的event就是依赖对象，回调函数有形参，就是依赖注入。
function aa(event){
alert(event.clientX);
}
angularjs中的模块对象和表达式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjs测试</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<!--<body ng-app="" ng-init="age=12">
<div ng-controller="MyController">
<input type="text" ng-model="firstName"/>
<input type="text" ng-model="lastName" />
<p>姓名1:{{firstName+‘-‘+lastName}}</p>
<p>姓名2:{{getName()}}</p>
<p>年龄:{{age}}</p>
</div>
<script type="text/javascript">
function MyController($scope) {
console.log($scope);
$scope.firstName = "kobe";
$scope.lastName = "zain";
$scope.getName = function () {
return $scope.firstName +‘ ‘+ this.lastName;
}
}
</script>
//angularjs1.2.29的写法，现在不适用了。
</body>-->
<body ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="empName" />
<p>员工名字1：{{empName}}</p>
</div>
<div ng-controller="myController2">
<input type="text" ng-model="empName" />
<p>员工名字2:{{empName}}</p>
</div>
<script type="text/javascript">
console.log(angular);
//优化，链式调用//angular.module("myApp", [])// .controller("myController", function ($scope) { //隐式声明依赖注入// $scope.empName = "zain";// })// .controller("myController2", function ($scope) {// $scope.empName = "kobe";// })//以上的代码会有问题//js代码压缩后形参会用abcd字母代替//代码压缩的$scope会被abcd代替，angular解析不了。//解决方案
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) { //显示声明依赖注入
$scope.empName = "zain";
}])
.controller("myController2", ["$scope", function ($scope) {
$scope.empName = "kobe";
}])
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest2</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!--使用angularjs表达式:
*语法: {{expression}}
*作用:显示表达式的结果数据
*注意:表达式中引用的变量必须是当前域对象有的属性（包括其原型属性）
操作的数据:
*基本类型数据: number/string/boolean
*undefined,Infinity,NaN,null解析为空串:""，不显示任何效果
*对象的属性或方法
*数组-->
<div ng-controller="myCtrl">
<p>{{"aaa"}}</p>
<p>{{abc}}</p>
<!--对字符串进行反序输出-->
<p>{{abc.split(‘‘)}}</p>
<p>{{abc.split(‘‘).reverse()}}</p>
<p>{{abc.split(‘‘).reverse().join(‘‘)}}</p>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.abc = "NBA";
}])
</script>
</body>
</html>
angularjs中的常用指令1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest3</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<p>价格计算器:(自动)</p>
数量: <input type="number" ng-model="count" />
价格: <input type="number" ng-model="price" />
<p>总计: {{count*price}}</p>
</div>
<div>
<p>价格计算器:(手动)</p>
数量: <input type="number" ng-model="count2" />
价格: <input type="number" ng-model="price2" />
<button ng-click="getTotalPrice()">计算</button>
<p>总计: {{totalPrice}}</p>
</div>
<div>
<h2>人员信息列表</h2>
<ul>
<li ng-repeat="person in persons">
{{$odd}}--{{$index}}---{{person.username}}
</li>
</ul>
</div>
<!--*ng-bind：解决使用{{}}显示数据闪屏(在很短时间内显示{{}})-->
<div>
<p>{{123}}</p>
<p ng-bind="123"></p>
</div>
<div>
<button ng-click="changeLike()">切换喜欢</button>
<p ng-show="islike">我喜欢贾静雯</p>
<p ng-hide="islike">贾静雯喜欢我</p>
</div>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.count=20;
a.price = 1;
a.count2 = 10;
a.price2 = 2;
a.totalPrice=20;
a.getTotalPrice = function () {
a.totalPrice= a.count2 * a.price2;
}
//初始化人员数据
a.persons = [
{ username: ‘zain‘, age: 27 },
{ username: ‘kobe‘, age: 27 },
{ username: ‘jack‘, age: 27 },
{ username: ‘choke‘, age: 27 },
{ username: ‘json‘, age: 27 }
];
a.islike = true;
a.changeLike = function () {
a.islike = !a.islike;
}
}])
</script>
</body>
</html>
angularjs中的常用指令2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularjstest4</title>
<script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
<style>
.oddB{
background:gray;
}
.evenB{
background:red;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div style="width:200px;height:200px;" ng-style="mystyle"
ng-mouseenter="enter()" ng-mouseleave="leave()">
</div>
<ul>
<li ng-class="{oddB:$odd,evenB:$even}" ng-repeat="t in persons">
{{t.username}}--{{t.age}}
</li>
</ul>
</div>
<script type="text/javascript">
angular.module("myApp", [])
.controller("myCtrl", ["$scope", function (a) {
a.mystyle = {
background:"green"
};
a.enter = function () {
a.mystyle.background = "deepPink";
};
a.leave = function () {
a.mystyle.background = "green";
};
a.persons = [
{ username: "zain", age: 27 },
{ username: "jack", age: 27 },
{ username: "solin", age: 27 },
{ username: "json", age: 27 },
{ username: "joke", age: 27 },
{ username: "zuak", age: 27 }
];
}])
</script>
</body>
</html>
原文：https://www.cnblogs.com/zhumeiming/p/9785631.html
内容总结
以上是互联网集市为您收集整理的angularjs基础知识全部内容，希望文章能够帮你解决angularjs基础知识所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。