开启AngularJS 1.X的学习之路（1）

概念(1)

AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

eg:

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {$scope.firstName= "John";$scope.lastName= "Doe";
});
</script>

AngularJS 模块

var app = angular.module('myApp', []);

可以通过angular.module()方法操作模块
注意：该方法只有在传入两个参数时才会创建模块，否则为获取已有模块!获取模块var app = angular.module('myApp')

AngularJS 控制器

app.controller('myCtrl', function($scope) {$scope.firstName= "John";$scope.lastName= "Doe";
});

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在div内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

完整的指令内容可以参阅 AngularJS 参考手册。

转载于:https://www.cnblogs.com/vichily/p/6438429.html

开启AngularJS 1.X的学习之路（1）相关推荐

2017c语言自学贴吧,【图片】17年1.9开启我的C语言学习之路—小白篇【c语言吧】_百度贴吧...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼什么是程序呐? 我们说这个程序与你的生活有关,通常是达到某个目标或解决某个问题中所需要的步骤或过程,这一系列的步骤就是程序. 生活中的程序与计算机中的程序 ...
linux学习之路——ubuntu 16.04 开机开启数字小键盘解决方法
linux学习之路--ubuntu 16.04 开机开启数字小键盘解决方法参考文章: (1)linux学习之路--ubuntu 16.04 开机开启数字小键盘解决方法 (2)https://www. ...
前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
模运算——开启密码学学习之路
模运算--开启密码学学习之路综述:学完高数,线性代数,概率论,数学已经学了一大半,本以为数学的知识也就到此结束,但没有想到这只是自己自欺欺人.开始看导师密码学的论文的时候,第一眼就吓傻眼,模运算mo ...
webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
redis 3.0 cluster 集群学习之路篇 [3]
周氏一族,整理技术文档,给下一代留点教程...... redis 3.0 cluster 安装篇,请看 http://zhoushouby.blog.51cto.com/9150272/1560400 ...
Redis——学习之路三（初识redis config配置）
我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息. 我们就 ...
Android SurfaceFlinger 学习之路(五)----VSync 工作原理
原址 VSync信号的科普我们上一篇已经介绍过了,这篇我们要分析在SurfaceFlinger中的作用.(愈发觉得做笔记对自己记忆模块巩固有很多帮助,整理文章不一定是用来给别人看的,但一定是为加强自己 ...
Go语言学习之路（二）
Go语言学习之路(二) 面对对象编程思想抽象封装继承接口文件命令行参数 Json 序列化反序列化(unmarshal) 单元测试 Redis Redis简介 Redis基本使用 Go连接 ...

开启AngularJS 1.X的学习之路（1）

概念(1)

AngularJS 应用

AngularJS 指令

开启AngularJS 1.X的学习之路（1）相关推荐

最新文章

热门文章