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: ...
随机推荐
- 【.net 深呼吸】跨应用程序域执行程序集
应用程序域,你在网上可以查到它的定义,凡是概念性的东西,大伙儿只需要会搜索就行,内容看了就罢,不用去记忆,更不用去背,“名词解释”是大学考试里面最无聊最没水平的题型. 简单地说,应用程序域让你可以在一 ...
- ASP.NET Core: You must add a reference to assembly mscorlib, version=4.0.0.0
ASP.NET Core 引用外部程序包的时候,有时会出现下面的错误: The type 'Object' is defined in an assembly that is not referenc ...
- 在vim中使用查找命令查找指定字符串
要自当前光标位置向上搜索,请使用以下命令: /pattern Enter 其中,pattern 表示要搜索的特定字符序列. 要自当前光标位置 ...
- .NET中AOP方便之神SheepAspect
SheepAspect 简介以及代码示列: SheepAspect是一个AOP框架为.NET平台,深受AspectJ.它静织目标组件作为一个编译后的任务(编译时把AOP代码植入). 多有特性时,可根据 ...
- 完美解决CodeSmith无法获取MySQL表及列Description说明注释的方案
问题描述: CodeSmith是现在比较实用的代码生成器,但是我们发现一个问题: 使用CodeSmith编写MySQL模板的时候,会发现一个问题:MySQL数据表中的列说明获取不到,也就是column ...
- Bluemix中国版体验（二）
从上一篇到现在大概有一个多月了.时隔一个月再登录中国版Bluemix,发现界面竟然更新了,现在的风格和国际版已经基本保持一致!这次我们来体验一下Mobile Service.不过mobile serv ...
- 谨慎使用Marker Interface
之所以写这篇文章,源自于组内的一些技术讨论.实际上,Effective Java的Item 37已经详细地讨论了Marker Interface.但是从整个Item的角度来看,其对于Marker In ...
- webpack解惑：require的五种用法
我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...
- Entity Framework 6 Recipes 2nd Edition（11-6）译 -> 从一个”模型定义”函数里返回一个复杂类型
11-6.从一个”模型定义”函数里返回一个复杂类型 问题 想要从一个”模型定义”函数返回一个复杂类型 解决方案 假设我们有一个病人(patient)和他们访客(visit)的模型,如 Figure 1 ...
- hibernate多对一单向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...