angularjs基础知识
Posted z.ain
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs基础知识相关的知识，希望对你有一定的参考价值。
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>
以上是关于angularjs基础知识的主要内容，如果未能解决你的问题，请参考以下文章
从 AngularJS url 中删除片段标识符（# 符号）