前言
AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并可扩展的服务，包括数据绑定、DOM操作、MVC和依赖注入等特性。
AngularJS核心知识点
- 指令（directive）和 数据绑定(Data Binding)
- 模板(Module)
- 控制器(Controller)
- 路由(Route)
- 服务(service)
- 过滤器(Filter)
指令与数据绑定
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
常用指令：
ng-app 初始化一个 AngularJS 应用程序。
ng-init 初始化应用程序数据。
ng-model 把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 对于集合中（数组中）的每个项会 克隆一次 HTML 元素
除了 AngularJS 内置的指令外，我们还可以创建自定义指令,使用 .directive 函数来添加自定义的指令。
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-init="name = '欢迎学习AngularJS'">
<p>{{name}}: <input type="text" ng-model="name"></p>
</div>
<div ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{quantity * price}}</p>
</div>
<!-- ng-repeat -->
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<!-- 自定义指令 -->
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>我是一个自定义指令!</h1>"
};
});
</script>
</body>
</html>
模板
AngularJs的模板指的是前端模板。AngularJS有内置的前端模板引擎，即所有页面渲染的操作都是放在浏览器端来渲染的，从而减轻服务端的压力。
AngularJs中的模板就是指带有ng-app指令的HTML代码。AngularJs发现Html页面是否需要用AngularJs模板引擎去渲染的标志就是ng-app标签。
在AngularJs中，我们写的其实也并不是纯的Html页面，而是模板，最终用户看到的Html页面（也就是视图）是通过模板渲染后的结果。
控制器
AngularJs中控制器的作用是模型和视图之间的桥梁，而AngularJs的模型对象就是scope。所以Angularjs控制器只是scope和视图之间的桥梁，它通过操作scope对象来改变视图。
关于 controller 中作用域的问题：
controller 中，如果局部 scope 和 rootScope 都存在，且有相同名字的变量，{{变量名}} 指局部变量而不是全局变量，作用域只有当前 controller；{{root.变量名}} 是全局变量，在 ng-app="" 下任何一个 controller 中都能使用。如果没有 $scope, 只有 rootScope，那么 {{变量名}} 和 {{root.变量名}} 就没区别了。
<div ng-app="myApp" ng-controller="cntoController">
<div><textarea ng-model="val"></textarea></div>
<div>{{val}}</div>
<div><button ng-click="click()">重置</button></div>
<br>
<!-- 控制器方法 -->
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
// 创建模块
var myApp = angular.module("myApp", []);
myApp.controller("cntoController", ["$scope", function ($scope) {
var defaultValue = "Learninghard 前端系列";
$scope.val = defaultValue;
$scope.click = function () {
$scope.val = defaultValue;
};
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
}]);
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{first}}<br>
{{$root.first}}<br>
{{second}}<br>
{{$root.second}}<br>
</div>
<div ng-controller="myCtrl2">
{{first}}<br>
{{$root.first}}<br>
{{second}}<br>
{{$root.second}}
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$rootScope) {
$scope.first = 'ctrl局部first';
$rootScope.first = '全局first';
});
app.controller('myCtrl2', function ($scope,$rootScope) {
$scope.second = 'ctrl2局部second';
$rootScope.second = '全局second';
});
</script>
路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页 Web 应用。
<body ng-app='myApp'>
<div><a href="#/list1">列表</a></div>
<br />
<div ng-view></div>
</body>
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
// 路由配置
var route = $routeProvider;
route.when('/list1', {
controller: 'listController',
templateUrl: 'route-list.html'
});
route.when('/view/:id', {
controller: 'viewController',
templateUrl: 'route-view.html'
});
route.when("/", {
redirectTo: '/list1'
});
route.otherwise({
redirectTo: '/list1'
});
}]);
</script>
服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
<script>
<!-- $location获取当前页面的url -->
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
<!-- $http服务-->
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
<!--$timeout 服务 -->
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
<!-- 自定义服务 -->
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
myApp.factory("service", function() {
var list = [
{ id: 1, title: "博客园", url: "http://www.cnblogs.com" },
{ id: 2, title: "知乎", url: "http://www.zhihu.com" },
{ id: 3, title: "codeproject", url: "http://www.codeproject.com/" },
{ id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/" }
];
return function(id) {
//假如ID为无效值返回所有
if (!id) return list;
var t = 0;
angular.forEach(list, function(v, i) {
if (v.id == id) t = i;
});
return list[t];
}
});
myApp.controller("listController", ["$scope", "service", function($scope, service) {
$scope.list = service();
}]);
</script>
过滤器
过滤器可用于转换数据，常用过滤器：
uppercase 格式化字符串为大写。
lowercase 格式化字符串为小写。
currency 格式化数字为货币格式。
currency 格式化数字为货币格式。
orderBy 根据某个表达式排列数组。
filter 从数组项中选择一个子集。
自定义过滤器
<p>姓名为 {{ lastName | uppercase }}</p>
<p>姓名为 {{ lastName | lowercase }}</p>
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<p>输入过滤:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
网友评论