您的位置：首页 > Web前端 > AngularJS

[AngularJS] 入门

2015-11-22 13:50 507 查看

什么是AngularJS

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，

其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。

通过表达式绑定数据到 HTML

AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

AngularJS指令

AngularJS可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。通过 ng-directives 扩展了 HTML 属性，带有前缀 ng-。主要的有：

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。与表达式{{ expression}}有相同的效果

AngularJS表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。

简单AngularJS示例

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

<script src="//www.w3c/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>

AngularJS控制器

AngularJS 控制器控制 AngularJS 应用程序的数据，是常规的 JavaScript 对象。

ng-controller 指令用来生成应用程序控制器，并且同时创建了一个新的作用域关联到相应的DOM元素上。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

控制器的 $scope 是把一个DOM元素连结到控制器上的JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。

控制器不仅声明属性，也有方法

<div ng-app="" ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click="sayHello()">打招呼</button>
<hr>
{{greeting}}
</div>

<script>
function MyController($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting= 'Hello ' + $scope.username + '!';
};
}
</script>

View Code

参考

汇智网 3w.hubwiz.com/course/?type=database

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航