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: ...
随机推荐
- SQL数据库之DQL
初来乍到,我是一个Java行业的小学生,刚学半年. 今天老师讲了数据库的操作语句,在这里与大家分享一下我学到的知识吧,要是有不足的地方麻烦大家指出来,共同进步,共同提高! 1.数据库中的各种符号 %: ...
- Oracle Database 12c Data Redaction介绍
什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...
- Solr 排除查询
前言 solr排除查询也就是我们在数据库和程序中经常处理的不等于,solr的语法是在定语前加[-].. StringBuilder sbHtml=new StringBuilder(); shBhtm ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- 在Visual Studio Code中配置GO开发环境
一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...
- redis成长之路——（二）
redis操作封装 针对这些常用结构,StackExchange.Redis已经做了一些封装,不过在实际应用场景中还必须添加一些功能,例如重试等 所以对一些常功能做了一些自行封装SERedisOper ...
- 报错：You need to use a Theme.AppCompat theme (or descendant) with this activity.
学习 Activity 生命周期时希望通过 Dialog 主题测试 onPause() 和 onStop() 的区别,点击按钮跳转 Activity 时报错: E/AndroidRuntime: FA ...
- JAVA设计模式之模板模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...
- 使用win10远程控制ubuntu16.04
使用win10远程控制ubuntu16.04,网上很多需要安装xfce桌面的.今天介绍一下,不需要安装其他桌面,使用Ubuntu16.04自带桌面,漂亮美观. Ubuntu16.04端: 1.打开终端 ...
- [原创]Macbook Pro Retina 15吋安装Windows 7和Windows 8.1方法
前言 本以为有Bootcamp神器在手,Macbook装Win系统应该是不在话下,没想到着实折腾了一番.期间因为误操作导致OSX也挂掉进不去只得磁盘全部抹掉网络恢复安装.为了让大家少走弯路,提供个人安 ...