AngularJS学习笔记(1) - AngularJS入门
什么是AngularJS？
AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架。MVC将业务逻辑代码和视图、模型相分离。AngularJS提供的所有功能都可以通过使用JavaScript和jQuery来实现。
为什么选择AngularJS？
- AngularJS框架强制正确实现MVC，并且可以很容易的正确实现。
- AngularJS HTML模板的声明风格，使得HTML的意图更加直接，并且使得HTML更容易维护。
- AngularJS的模型部分是基本的JavaScript对象，因此容易操作、访问和执行。
- AngularJS使用声明的方式，通过将HTML的声明和背后的JavaScript功能直接联系来扩展HTML的功能。
- AngularJS提供了一个非常简单和灵活的过滤器接口，使得当数据从模型传递到视图时，你可以轻松的格式化数据。
- AngularJS应用程序倾向于使用传统JavaScript应用程序所使用代码的一小部分，因此你只需要关注逻辑，而不用关心琐碎的细节。
- AngularJS比传统的方法所需的文档对象模型操作少了很多，并指导你把操作放在应用程序中正确的位置。
- AngularJS提供了一些内置服务，并使你能够用结构化和可重用的方式实现自己的服务。
AngularJS的一些基本概念
模块
作用域和数据模型
具有模板和指令的视图
表达式
控制器
数据绑定
服务
依赖注入
职责分离
- 视图作为应用程序的正式表示结构，表明任何表示逻辑都应该作为视图中的HTML模板指令。
- 如果需要进行任何DOM操作，就在一个内置指令或者自己自定义的指令中的JavaScript代码中进行。
- 把任何可重复使用的任务都实现为服务，并通过依赖注入把它们添加到你的模块。
- 确保作用域反映了模型的当前状态，并且是由该视图使用的数据的单一来源。
- 确保控制器代码只起到了充实作用域的数据的作用，而不包括任何业务逻辑。
- 在模块的命名空间中定义控制器，而不是全局性定义。
AngularJS的生命周期
引导阶段
编译阶段
运行时数据绑定阶段
如何将AngularJS与现有的JavaScript和jQuery整合
- 至少从头编写一个使用模式、自定义HTML指令、服务和控制器的AngularJS应用程序。
- 确定你的代码的模型部分。具体的说，试图把模型中增加模型数据的代码分离出来，放到控制器函数中，并且把访问后端模型数据的代码分离出来，放到服务中。
- 确定操作视图中的DOM元素的代码。
- 确定给予其他任务的函数，将其放入服务。
- 把指令和控制器隔离到模块中来组织你的代码。
- 使用依赖注入把服务和模块恰当的连接起来
- 更新HTML模板来使用新的指令。
一个简单的示例
var express = require('express');
var app = express();
app.use('/', express.static('./static')).
use('/images', express.static( '../images')).
use('/lib', express.static( '../lib'));
app.listen(80);
<!doctype html>
<html ng-app="firstApp">
<head>
<title>First AngularJS App</title>
</head>
<body>
<div ng-controller="FirstController">
<span>Name:</span>
<input type="text" ng-model="first">
<input type="text" ng-model="last">
<button ng-click='updateMessage()'>Message</button>
<hr>
{{heading + message}}
</div>
<script src="http://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="/js/first.js"></script>
</body>
</html>
var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
$scope.first = 'Some';
$scope.last = 'One';
$scope.heading = 'Message: ';
$scope.updateMessage = function() {
$scope.message = 'Hello ' + $scope.first +' '+ $scope.last + '!';
};
});
AngularJS学习笔记(1) - AngularJS入门的更多相关文章
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- 【AngularJS学习笔记】AngularJS表单验证
AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty 表单有填写记录 3.$v ...
- AngularJS学习笔记一:简单入门
阿里云网站的前端是AngularJS实现的. 先下载AngularJS的开发工具包,我下载的angular-1.4.0. 在合适位置引入js文件: <script src="angul ...
- AngularJS学习笔记3——AngularJS的工作原理
个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
随机推荐
- 大叔最新课程～MVC核心技术剖析
<MVC核心技术剖析介绍> 主讲:仓储大叔 时间:2016-12-04 20:30分 MVC各层分工 Http请求的过程 如何查找Action 如何渲染视图 ViewModel,DTO,D ...
- iOS-即时通讯-环信
下载地址:http://www.easemob.com/downloads SDK目录讲解 1.从官网下载下来的包分为如下四部分: 环信iOS SDK 开发使用 环信iOS release note ...
- Web APi之EntityFramework【CRUD】（三）
前言 之前我们系统学习了EntityFramework,个人觉得有些东西不能学了就算完了,必须要学以致用,在Web API上也少不了增(C).删(D).改(U).查(R).鉴于此,我们通过EF来实现W ...
- iOS开发之SQLite-C语言接口规范(二) —— Prepared Your SQL Statements
在<SQLite的C语言接口规范(一)>中介绍了如何去连接打开数据库,本篇博客就介绍如何操作数据库,本篇主要给出了如何执行数据库查询语句(Select), 然后遍历结果集.本篇博客就直接使 ...
- 2015-10-22 前思后想，决定重构表结构，免得这个APP死在数据表设计上
新的设计稿出来了,如下,原来旧的是第二张 ------- 原来的评论级数只有2级,现在是不限,2级的意思是,用户评论该帖是一级,用户的评论能被人评论,这是第2级,评论评论的评论不能够再被 ...
- JavaMail发送邮件的笔记及Demo
最近碰到一个需求,就是注册用户时候需要向用户发送激活邮箱,于是照着网上搜来的demo自己试着运行了一下,发件时我用的是网易163邮箱,收件时用QQ邮箱,运行后报了一个错误: 网络上搜索解决方式,多次尝 ...
- HashMap和HashTable到底哪不同？
HashMap和HashTable有什么不同?在面试和被面试的过程中,我问过也被问过这个问题,也见过了不少回答,今天决定写一写自己心目中的理想答案. 代码版本 JDK每一版本都在改进.本文讨论的Has ...
- PHP实现实现数字补零格式化
在接支付SDK的时候,第三方回调处理时需要IP,并且IP的需求是:去掉点号,补零到每地址段3位, 如:192168000001 先看看我的实现: <?php $IP = explode ( '. ...
- 【Python实战】Django建站笔记
前一段时间,用Django搭建一个报表分析的网站:借此正好整理一下笔记. 1. 安装 python有包管理工具pip,直接cd Python27/Scripts,输入 pip install djan ...
- 【Android】Fragment懒加载和ViewPager的坑
效果 老规矩,先来看看效果 ANDROID和福利两个Fragment是设置的Fragment可见时加载数据,也就是懒加载.圆形的旋转加载图标只有一个,所以,如果当前Fragment正处于加载状态,在离 ...