Angular学习笔记

最新推荐文章于 2023-06-21 17:02:39 发布

CURRY_zhao

最新推荐文章于 2023-06-21 17:02:39 发布

阅读量275

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/qq_24122593/article/details/79115331

版权

angularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考： http://www.runoob.com/angularjs/angularjs-directives.html
AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
在大型的应用程序中，通常是把控制器存储在外部文件中。
AngularJS 过滤器，过滤器可以使用一个管道字符（|）添加到表达式和指令中。（同vue中的 |）
AngularJS 服务(Service)： $location vs window.location、$http服务、$timeout 服务、$interval 服务
创建自定义服务器：
创建名为hexafy 的服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

AngularJS XMLHttpRequest：$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
AngularJS $http 是一个用于读取web服务器上数据的服务。$ http.get(url) 是用于读取服务器数据的函数
AngularJS Select(选择框),AngularJS 可以使用数组或对象创建一个下拉列表选项。

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>
</body>
</html>

AngularJS 表格:ng-repeat 指令可以完美的显示表格。使用 orderBy , uppercase 过滤器,显示序号 ($index),使用 $even 和 $odd。
AngularJS SQL ：使用 PHP 从 MySQL 中获取数据。ASP.NET 中执行 SQL 获取数据。
AngularJS 表单： AngularJS 表单是输入控件的集合，input 元素、select 元素、button 元素、textarea 元素
AngularJS 表单和控件可以验证输入的数据:

$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

API 意为 Application Programming Interface（应用程序编程接口）：

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
Bootstrap
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的元素中添加如下代码:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

<html ng-app    为 <html> 元素定义一个应用(未命名)
<body ng-controller 为 <body> 元素定义一个控制器
<tr ng-repeat   循环 users 对象数组，每个 user 对象放在 <tr> 元素中。
<button ng-click    当点击 <button> 元素时调用函数 editUser()
<h3 ng-show 如果 edit = true 显示 <h3> 元素
<h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
<input ng-model 为应用程序绑定 <input> 元素
<button ng-disabled 如果发生错误或者 incomplete = true 禁用 <button> 元素

AngularJS 依赖注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
1. value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）
2. factory是一个函数用于返回值。在 service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值
3. service
4. provider AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
5. constant constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现.
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

CURRY_zhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular学习笔记

参考： http://www.runoob.com/angularjs/angularjs-directives.html AngularJS 通过被称为指令的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 Ang
复制链接

扫一扫