【一起来烧脑】一步学会AngularJS系统

AngularJS是一个JavaScript框架
一个用JavaScript编写的库

[外链图片转存失败(img-JUTh171K-1563341248796)(https://upload-images.jianshu.io/upload_images/11158618-fa50829f94107980.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

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>

[外链图片转存失败(img-edUMEMM3-1563341248798)(https://upload-images.jianshu.io/upload_images/11158618-ce04802de76b06d9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

<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>

过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中
[外链图片转存失败(img-NHNtN3i1-1563341248800)(https://upload-images.jianshu.io/upload_images/11158618-2cf72cda38813bb9.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
格式化数字为货币格式
从数组项中选择一个子集
格式化字符串为小写
格式化字符串为大写
根据某个表达式排列数组

服务

服务是一个函数或者对

$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

[外链图片转存失败(img-5U4U1azQ-1563341248809)(https://upload-images.jianshu.io/upload_images/11158618-66e039b10d75623f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

包含

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访问不同的内容

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

[外链图片转存失败(img-R0RKqTNY-1563341248810)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]