[AngularJS] 入门

 

什么是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
posted @ 2015-11-22 13:50  看起来很好吃  阅读(205)  评论(0)  编辑  收藏  举报