什么是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>
参考
- 汇智网 3w.hubwiz.com/course/?type=database