【一起来烧脑】一步学会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)]