精通 Angular JS 第一天——Angular 之禅

简介

Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用。它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用。大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量。

2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀。AngularJS主页(http://www.angularjs.org)上包罗万象:概念上的综览、教材、开发者指南、API参考等,并且在AngularJS的文档中有大量代码片段可供参考。

Hello World——AngualrJS示例

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/
angular.js"></script>
</head>
<body ng-app ng-init="name = ‘World‘">
<h1>Hello, {{name}}!</h1>
</body>
</html>

在浏览器上打开含有这段代码的页面,会显示Hello,World。

1、代码中首先是包含AngularJS库,这个库相当小,最小化并压缩之后只有30KB,并且它不依赖其它库。

2、通过AngularJS自定义的ng-app来引导AngularJS库。

3、在模板渲染前,可用ng-init初始化模型(model)name,并通过{{name}}表达式来传递它的值。

通过这个非常简单地例子,Angular JS模板系统表现出了一些重要特征。

  • 使用自定义的HTML标签与属性,为静态HTML文档添加动态行为。
  • 使用双花括号作为输出模型值的表达式的分隔符。

在AngularJS中,所有能够被框架理解和解释的特殊HTML标签和属性,统称为指令(directives)。

时间: 07-11

精通 Angular JS 第一天——Angular 之禅的相关文章

angular.js第一个项目 简单分页

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum

angular js模块,angular js控制器

AngularJS 模块 var app = angular.module('myApp', []); AngularJS 控制器 app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); AngularJS 实例 <div ng-app="myApp" ng-controller="myCtr

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发 链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决

angular js jquery中post请求的一点小区别

这也是最近遇到的坑,还是之前那个项目,现在要实现登录功能. 背景:注册功能之前已经跑通了.前端用的是jquery后台是springMVC.鉴于注册和登录有些接口功能是类似的(比如注册确保邮箱是没有注册过,而登录是确保注册过),于是后台还准备用注册的那套接口. 登录的接口get请求是没问题的,但是post却出了问题:后台收不到请求体里的内容. 后来发现是jquery和angular的post行为有些区别,于是我做了个实验. <!DOCTYPE html> <html lang="

Angular js 简介

---恢复内容开始--- 1:通过 <script> 标签添加一个anjular.js 文件到 HTML 页面 ,(建议把脚本放到body元素的底部) AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效. 2:常用的 angular js 的Directives(指令) ng-app:指令定义一个angular js  的应用程序.如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果. ng-model

angular js的Inline Array Annotation的理解

inline Array annotation的形式是: someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) { // ... }]);其中function($scope,greeter){}分别代表$scope对象,greeter对象. 现在我把上面的代码改动一点: someModule.controller('MyController', ['$scope', 'greet

angular js 模拟获取后台的数据

在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------people.json puDongLibraryLearning-test.html people.json的代码如下: [ { "id": "293", "isActive": false, "eyeColor": "b

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636