【一起来烧脑】一步学会AngularJS系统
2019-07-17 本文已影响16人
魔王哪吒
AngularJS是一个JavaScript框架
一个用JavaScript编写的库
image.png
AngularJS 通过 ng-directives 扩展了 HTML
表达式
{{expression}}
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>
<div ng-app="" ng-init="firstName='Sherlock';lastName='Holmes'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
<div ng-app="" ng-init="firstName='Sherlock';lastName='Holmes'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
<div ng-app="" ng-init="person={Sherlock:'Sherlock',lastName:'Holmes'}">
<p>姓： {{ person.lastName }}</p>
</div>
<div ng-app="" ng-init="person={firstName:'Sherlock',lastName:'Holmes'}">
<p>姓： <span ng-bind="person.lastName"></span></p>
</div>
<div ng-app="" ng-init="points=[2,3,5,7,11]">
<p>第三个值为 {{ points[2] }}</p>
</div>
<div ng-app="" ng-init="points=[2,3,5,7,11]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
AngularJS 表达式不支持条件判断，循环及异常
支持过滤器
可以包含字母，操作符，变量
可以写在 HTML 中
指令
允许自定义指令
ng-model 指令把元素值绑定到应用程序
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>输入的为： {{ firstName }}</p>
</div>
<div ng-app="" 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-app="" ng-init="names=['Sherlock','Watson','Macroft']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
ng-repeat指令用在一个对象数组上：
<div ng-app="" ng-init="names=[
{name:'Sherlock',country:'London'},
{name:'Watson',country:'Manchester'},
{name:'Macroft',country:'Bristol'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }} </li>
</ul>
</div
ng-app 指令定义了 AngularJS 应用程序的 根元素
ng-init 指令为 AngularJS 应用程序定义了 初始值
ng-model 指令 绑定 HTML 元素 到应用程序数据
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素
创建自定义的指令
可以使用.directive函数来添加自定义的指令
作用域
作用域（scope）是应用在HTML和JavaScript之间的纽带
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{countryname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.countryname= "China";
});
</script>
image.png
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names
= ["course", "class", "coding"];
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["course", "class", "coding"];
$rootScope.lastname = "w";
});
</script>
控制器
AngularJS控制器控制AngularJS 应用程序的数据
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Sherlock";
$scope.lastName = "Holmes";
});
</script>
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "Sherlock";
$scope.lastName = "Holmes";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中
image.png
格式化数字为货币格式
从数组项中选择一个子集
格式化字符串为小写
格式化字符串为大写
根据某个表达式排列数组
服务
服务是一个函数或者对
$http服务
$http是AngularJS应用中最常用的服务
$timeout服务
$timeout服务对应了JS window.setTimeout函数
$interval服务
$interval服务对应了JS window.setInterval函数
http
使用格式：
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
//请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
POST 与 GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
$http.get(url) 是用于读取服务器数据的函数
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: '/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
选择框
使用ng-options创建选择框
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>
使用ng-repeat创建下拉列表
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
ng-repeat 指令可以很好的显示表格
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
显示序号 ($index)
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
SQL
使用PHP从MySQL中获取数据
实例：
<div ng-app="myApp" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
var site = "http://www..com";
var page = "/.php";
$http.get(site + page)
.success(function(response) {$scope.names = response;});
}
</script>
HTML DOM
<div ng-app="">
<p><button ng-disabled="mySwitch">点击这里</button></p>
<p><input type="checkbox" ng-model="mySwitch">按钮</p>
<p>{{ mySwitch }}</p>
</div>
ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素
ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素
HTML事件
ng-click 指令
ng-click 指令定义了 AngularJS 点击事件
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点击这里</button>
<p>{{ count }}</p>
</div>
模块
通过AngularJS的angular.module函数来创建模块
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Sherlock";
$scope.lastName = "Holmes";
});
</script>
表单
HTML控件
input元素、select元素、button元素、textarea元素
输入验证
AngularJS表单和控件可提供验证功能
API
image.png
包含
ng-include指令来包含HTML内容
<body>
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
动画
AngularJS提供了动画效果，可以配合CSS使用
需要引入angular-animate.min.js库
<body ng-app="ngAnimate">
依赖注入
依赖注入简化了Angular解析模块/组件之间依赖的过程
路由
实现多视图的单页Web应用
允许通过不同的URL访问不同的内容
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
博客
