学习Angular1 | 易学教程

教程：

参考教程：

https://www.runoob.com/angularjs/angularjs-tutorial.html

一.angular的简介
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

二.angular的表达式和指令
1.表达式
AngularJS 表达式写在双大括号内：{{ expression }} 相当于ng-bind
可以包含：文字、运算符和变量
eg:{{5+5}}

AngularJS 表达式与 JavaScript 表达式
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

支持 0? "a":"b"
2.指令
参考：
https://www.runoob.com/angularjs/angularjs-reference.html

三.AngularJS Scope(作用域)
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用

根作用域：
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

四.AngularJS控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
简而言之：
AngularJS 控制器控制 AngularJS 应用程序数据的常规的 JavaScript 对象

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 = "John";
    $scope.lastName = "Doe";
});
</script>

应用解析：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

注意：
1.model 中可以有多个 controlle
2.关于 controller 中作用域的问题：
controller 中，如果局部 $scope 和 $rootScope 都存在，且有相同名字的变量，{{变量名}} 指局部变量而不是全局变量，作用域只有当前 controller；{{$root.变量名}} 是全局变量，在 ng-app="" 下任何一个 controller 中都能使用。如果没有 $scope, 只有 $rootScope，那么 {{变量名}} 和 {{$root.变量名}} 就没区别了。

五.AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中
1.常见过滤器
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。

2.向指令添加过滤器

<li ng-repeat="x in names | orderBy:'country'">
3.过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
4.自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：
AngularJS 实例

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("");
} 
}
);

看实例。

六.AngularJS服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务，它可以返回当前页面的 URL 地址
1.$location 服务
注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义
2.$http服务
是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
3.$Timeout服务对应JS window.setTimeout函数
4.$interval 服务对应了 JS window.setInterval 函数。
5.创建自定义服务
eg:
创建名为hexafy 的服务:
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

6.过滤器中，使用自定义服务
eg:
在过滤器 myFormat 中使用服务 hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。
7.$watch服务：持续监听数据上的变化，更新界面

eg:
app.controller('myCtrl', function($scope) {
$scope.lastName = "";
$scope.firstName = "";

//监听lastName的变化，更新fullName
$scope.$watch('lastName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});

//监听firstName的变化，更新fullName
$scope.$watch('firstName', function() {
$scope.fullName = $scope.lastName + " " + $scope.firstName;
});
});

8.其他
Angular的很多服务，在DOM中有对应的对象，那为什么不使用这些对象，而是要用服务呢？
因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合。
$timeout 可用于设置单次或多次延时服务;
$interval 可用于设置始终运行的延时服务。
9.全局服务（函数）注册
方法一：
// 注册全局服务（即变量）myService 可以向其添加一些全局使用的函数

app.service('myService', [function () {

    this.myFunc = function(str){

        return     str.split('').reverse().join('');

    }
}]);

// 向某个控制器传入全局服务对象，此控制器作用域中可调用全局服务对象的方法
app.controller('serviceCtrl',function($scope,myService){

$scope.str = '';

$scope.outputFunc = myService.myFunc;
});

方法二：

<p ng-controller='father'>

    <span ng-controller='son'>

        {{father()}}

    </span>
</p>

/
// 在顶层控制器中注册方法 子控制器都可以使用
a
app.controller('father',function($scope){

    $scope.father = function(){

        return 'I am father';

    }
}
});

 


app.controller('son',function($scope){

    // 随便写，别覆盖了父级的方法就行
}
})

10.controller 有两种写法

写法 1：
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
写法2：
app.controller('myCtrl', ["$scope","$location",function($scope,$location) {
$scope.myUrl = $location.absUrl();
}]);

两种写法都是对的，但是推荐第二种写法，因为第一种写法在 js 压缩后会出问题，而第二种写法可以完美应对 js 压缩，原因是：js 压缩后，变量名会重命名，故第一种写法会报错。
上面的例子第 2 种写法还可以这样：

app.controller('myCtrl', ["$scope","$location",function(a, b) {
a.myUrl = b.absUrl();
}]);

七.AngularJS 事件
1.ng-click 定义了点击事件
2.隐藏HTML元素
ng-hide ng-hise="true"让元素不可见
ng-show ng-show="true" 让元素可见

八.AngularJS模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

var app = angular.module("myApp", []);
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字

九.依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
1.value
value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）
2.factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
3.service
服务是一个函数或对象，可在你的 AngularJS 应用中使用。
4.provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

eg:
// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
m
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});

5.constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

路由配置：

$routeProvider.when(url, { 
template: string, //如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数
templateUrl: string, //如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
controller: string, function 或 array, //function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs: string, //string类型，为controller指定别名
redirectTo: string, function,
resolve: object<key, function>
});

eg:

.when('/dashboard/import', {
templateUrl: 'public/app/features/manage-dashboards/partials/dashboard_import.html',
controller: DashboardImportCtrl,
controllerAs: 'ctrl',
})
.when('/datasources', {
template: '<react-container />',
resolve: {
component: () => DataSourcesListPage,
},
})

来源：https://www.cnblogs.com/yjiangling/p/11757702.html

标签

angular

angularjs自定义指令

指令周期

软件