Angular 基础入门
简介
什么是AngularJS
- 一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式
- 其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务
- MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动
为什么使用AngularJS
- 更少的代码实现更强劲的功能
- 提供了很多在传统后端开发中大量使用的思想和方式，提高前台代码的结构和可维护性
使用AnuglarJS的流程
- 在HTML中引入Angular.js文件
- 在自己的代码中定义一个AngularJS的模块
- 将模块作用到HTML中的某个节点
- 根据模块的功能定义控制器
- 根据当前页面原型设计$scope的结构
- 通过$scope暴露数据和行为
- 将暴露出来的数据和行为通过特定的指令绑定到HTML节点中
MVC
- 一种应用程序的设计思想，其目的是为了对应用程序的组成进行划分，让结构更加清晰可维护性更高，确保每个原件都有明确的单一职责
模块
- 可以通过
angular.module()方法操作模块- 注意：该方法只有在传入两个参数时才会创建模块，否则为获取已有模块
定义模块
// 第一个参数为模块名，第二个参数为当前这个模块所依赖的模块列表
angular.module('ModuleName', []);
获取已经定义过的模块
var existModule = angular.module('ExistModule');
如何划分模块
1.根据当前需要开发的应用程序的组成划分需要多少模块，
比如：
- 注册模块
- 登录模块
- 用户列表页模块
- 用户详细页模块
- etc.
2. 根据文件类型的不同来划分
比如：
- 所有的控制器
- 所有的服务
- 所有的指令
- etc.
控制器
当下的企业开发，如果使用Angular，主要就是开发对应的控制器和模型
定义控制器
定义控制器可以有三种方式，注意第一种已经被淘汰
传统方式（不要再用了）
在最早期的 Angular 代码中可能会见到以全局函数的方式定义的控制器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>早期的控制器定义方式-全局函数</title>
</head>
<body ng-app>
<div ng-controller="FooController">
<input type="button" value="clicked me!" ng-click="say()">
</div>
</body>
</html>
function FooController($scope) {
$scope.say = function(){
console.log('hello angular');
};
}
这种方式现在已经不被支持，就算没有淘汰也不应该使用，太low（全局作用域的问题）
常用方式（挂载在某个模块下）（必须掌握）
Angular中最常见的一种使用方式，通过模块中定义的controller方法定义控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用方式（挂载在某个模块下）</title>
</head>
<body ng-app="MyModule">
<div ng-controller="FooController">
<input type="button" value="clicked me!" ng-click="say()">
</div>
</body>
</html>
angular.module('MyModule', [])
.controller('FooController', function($scope) {
$scope.say = function(){
console.log('hello angular');
};
});
定义类型的方式（构造函数）
对于喜欢通过定义构造函数的方式编写面向对象代码的同学可以使用构造函数的形式定义一个控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象的方式</title>
</head>
<body ng-app="MyModule">
<div ng-controller="FooController as context">
<input type="button" value="clicked me!" ng-click="context.say()">
</div>
</body>
</html>
function FooController() {
this.message = 'hello angular';
}
FooController.prototype.say = function() {
console.log(this.message);
};
angular.module('MyModule', [])
.controller('FooController', FooController);
注意事项
- 在以上的使用方式中，如果需要为控制器函数注入类似
$scope之类的参数，必须确保参数名为一个特定值 - 也就是说Angular会根据参数名称自动注入对应的对象（与参数个数，出现顺序无关），所以参数名一定不能写错
- 但是，我们对于写完的JS代码经常会在上线之前对代码进行压缩
- 压缩的过程中如果启用混淆压缩的话，就会造成参数名变化
- 一旦变化了参数名，NG就无法为其注入对应的对象了
所以，最安全的写法就是不要依赖参数名（依赖不会变化的东西）：
angular.module('MyModule', [])
.controller('FooController', ['$scope', function(whatever) {
whatever.say = function(){
console.log('hello angular');
};
}]);
解决方式就是将创建控制器的第二个参数改为一个数组，数组的最后一个成员就是以前的控制器函数，前面的成员就是控制器函数需要注入的对象列表，按照顺序对应
扩展小知识：实现原理
如何根据参数名传入特定对象？
function getFnParams(fn) {
if (typeof fn == 'function') {
var mathes = /.+\((.+)\)/.exec(Function.prototype.toString.call(fn));
if (mathes[1]) {
var args = mathes[1].replace(/\s/g, '').split(',');
return args;
}
}
}
function foo(id, name, a1ge) {}
console.log(getFnParams(foo));
$scope
- 视图和控制器之间的数据桥梁
- 用于在视图和控制器之间传递数据
- 用来暴露数据模型（数据，行为）
ViewModel
- $scope 实际上就是MVVM中所谓的VM（视图模型）
- 正是因为$scope在Angular中大量使用甚至盖过了C（控制器）的概念，所以很多人（包括我）把Angular称之为MVVM框架
- 这一点倒是无所谓，具体看怎么用罢了
大家必须掌握的就是如何根据一个原型抽象出对应的视图模型
表达式
类似于模版引擎的语法
作用：
使用表达式把数据绑定到 HTML。
语法：
- 表达式写在双大括号内：{{ expression }}。
- AngularJS 表达式很像 JavaScript 表达式
- 它们可以包含文字、运算符和变量
- 如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
支持的类型
- 数字 {{ 100 + 100 }}
- 字符串 {{ 'hello' + 'angular' }}
- 对象 {{ zhangsan.name }}
- 数组 {{ students[10] }}
与JS的比较：
相同点：
- AngularJS 表达式可以包含字母，操作符，变量。
不同点：
- AngularJS 表达式可以写在 HTML 中。
- AngularJS 表达式不支持条件判断，循环及异常。
- AngularJS 表达式支持过滤器。
指令
- 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
- 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
指令标准属性的问题
- ng-xxx 的属性本身并不是标准中定义的属性
- 很多情况下语法校验是无法通过的
- HTML5 允许扩展的（自制的）属性，以 data- 开头。
- 在 AngularJS 中可以使用 data-ng- 来让网页对 HTML5 有效。
- 二者效果相同。
内置指令
ng-app
- ng-app 指令用来标明一个 AngularJS 应用程序
- 标记在一个 AngularJS 的作用范围的根对象上
- 系统执行时会自动的执行根对象范围内的其他指令
- 可以在同一个页面创建多个 ng-app 节点（不推荐）
- 创建多个ng-app时，默认只能执行第一个，后面的需要手动引导：angular.bootstrap()
- 标记的范围尽可能小，性能
ng-model
- 用于建立界面上的元素到数据模型属性的双向数据绑定
- 一般情况绑定到元素的value属性上
- 但是在checkbox之类的表单元素会有不同
ng-bind
ng-bind-html
ng-repeat
ng-class
ng-cloak
ng-show/ng-hide/ng-if
ng-src
ng-switch
其他常用指令
- ng-checked：
- 单选/复选是否选中，只是单向绑定数据
- ng-selected：
- 是否选中，只是单向绑定数据
- ng-disabled：
- 是否禁用
- ng-readonly：
- 是否只读
常用事件指令
不同于以上的功能性指令，Angular还定义了一些用于和事件绑定的指令：
- ng-blur：
- 失去焦点
- ng-change：
- 发生改变
- ng-copy：
- 拷贝完成
- ng-click：
- 单击
- ng-dblclick：
- 双击
- ng-focus：
- 得到焦点
- ng-blur：
- 失去焦点
- ng-submit：
- 表单提交
自定义指令
- 指令无外乎增强了 HTML，提供额外的功能
- 以上的指令基本上已经可以满足我们的绝大多数需要了
- 少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现：
组件式指令Demo
myModule.directive('hello', function() {
return {
restrict: 'E',
template: '<h1>Hello world</h1>',
replace: true
};
});
功能型指令Demo
myApp.directive("ngHover", function() {
return function(scope, element, attrs) {
element.bind("mouseenter", function() {
element.css("background", "yellow");
});
element.bind("mouseleave", function() {
element.css("background", "none");
});
}
});
自定义指令的类型
- E：Element（元素）
- A：Attribute（属性）
- C：Class（类名）
- M：Comment（注释）
注意：
在定义指令应该使用驼峰命名法，使用指令时应该使用的是全小写字母中划线分割的方式
Angular 基础入门的更多相关文章
- angular基础入门
第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...
- Siki_Unity_1-3_Unity零基础入门_古迹探险
1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列：基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
- 从零3D基础入门XNA 4.0(1)——3D开发基础
[题外话] 最近要做一个3D动画演示的程序,由于比较熟悉C#语言,再加上XNA对模型的支持比较好,故选择了XNA平台.不过从网上找到很多XNA的入门文章,发现大都需要一些3D基础,而我之前并没有接触过 ...
- Shell编程菜鸟基础入门笔记
Shell编程基础入门 1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...
随机推荐
- 前端学HTTP之安全HTTP
前面的话 HTTP的主要不足包括通信使用明文(不加密),内容可能会被窃听:不验证通信方的身份,有可能遭遇伪装:无法证明报文的完整性,有可能被篡改 基本认证和摘要认证能够使得用户识别后较安全的访问服务器 ...
- 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 基于RN开发的一款视频配音APP(开源)
在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...
- iOS有关横向TableView的东西
之前看到Apple store里面有横向的tableview,当然也有可能是collectionview啦. 尤其是项目中只有一条那么需要横向滑动的东西,就没有必要使用庞大的collectionvie ...
- 编写高质量代码:改善Java程序的151个建议(第8章:异常___建议114~117)
建议114:不要在构造函数中抛出异常 Java异常的机制有三种: Error类及其子类表示的是错误,它是不需要程序员处理也不能处理的异常,比如VirtualMachineError虚拟机错误,Thre ...
- iOS开源项目周报1222
由OpenDigg 出品的iOS开源项目周报第二期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. io ...
- 【一起学OpenFoam】02 软件准备
"工欲善其事必先利其器",在利用OpenFoam解决我们的工程问题之前,首先要做的事情是搭建一个OpenFoam运行环境.很遗憾的是,OpenFoam的原生开发系统是Linux,因 ...
- BZOJ 1146: [CTSC2008]网络管理Network [树上带修改主席树]
1146: [CTSC2008]网络管理Network Time Limit: 50 Sec Memory Limit: 162 MBSubmit: 3522 Solved: 1041[Submi ...
- Windows Server 2008 R2常规安全设置及基本安全策略
这篇文章主要介绍了Windows Web Server 2008 R2服务器简单安全设置,需要的朋友可以参考下 用的腾讯云最早选购的时候悲催的只有Windows Server 2008 R2的系统,原 ...
- ADO.NET Entity Framework 在哪些场景下使用？
在知乎回答了下,顺手转回来. Enity Framework已经是.NET下最主要的ORM了.而ORM从一个Mapping的概念开始,到现在已经得到了一定的升华,特别是EF等对ORM框架面向对象能力的 ...